Handling Content Security Policy (CSP) Errors with Datatables: Removing Unsafe Inline Styles

gitzi

Hi everyone,

I've been working on implementing Datatables with a focus on ensuring it adheres to our Content Security Policy (CSP) which disallows unsafe inline styles. While Datatables works well in Chrome, I'm encountering CSP-related errors in Firefox.

Specifically, the errors are triggered in the Responsive add-on with the following code:

clonedTable.style.width = 'auto';

Additionally, in the core module, the following code also triggers CSP errors:

/* Create the settings object for this table and set some of the default parameters */
var oSettings = $.extend(true, {}, DataTable.models.oSettings, {
    "sDestroyWidth": $this[0].style.width,
    "sInstance":     sId,
    "sTableId":      sId,
    colgroup: $('<colgroup>').prependTo(this),
    fastData: function (row, column, type) {
        return _fnGetCellData(oSettings, row, column, type);
    }
});

I would like to know if Datatables is designed to handle CSP compliance, specifically removing unsafe inline styles.

Thanks in advance for any guidance!

allan

Yes, I do try to keep it in mind, but absolutely I also need to be able to set styles sometimes. What are your CSP settings please? I'll see if I can reproduce the issue.

Allan

gitzi

Ok, i just found out. The issues occurs only if i debug with source maps. I use webpack for bundling and there is this option 'devtool'. During development you typically use source-maps for debugging. In production mode this is typically turned off. Seems like this CSP issue only occurs in firefox AND if i provide javascript source maps. I guess I have to dig a little deeper to understand why this happens. Sorry for bothering. This doesn't seem to be an datatables issue.

Anyway, here are my CSP settings:

            "default-src 'self'; "
            "connect-src 'self'; "
            "frame-src 'self'; "
            "media-src 'self'; "
            "img-src 'self' data: https:; "
            "font-src 'self' data:; "
            "form-action 'self'; "
            "block-all-mixed-content; "
            "base-uri 'self'; "
            "frame-ancestors 'self'; "
            "manifest-src 'self'; "
            f"style-src 'self' 'nonce-{nonce}'; "
            f"script-src 'self';"

allan

Interesting! I'd be curious to know what you find out if you have the time to write back with any details.

Thanks,
Allan

gitzi

OK. Forget what i said about source maps. I overlooked the fact that this problem also occurs without source maps. The code from datatables (datatables.net and datatables.net-responsive) I've mentioned above triggers CSP errors. But only in firefox. Seems like Firefox is very strict on the ".style.width" usage, while Chrome sees no problem here.

allan

I've just tried it in Firefox with your CSP (except default-src since I'm using the DataTables CDN for the test) and it appears to work okay: https://live.datatables.net/hubecute/1/edit .

This is with Firefox 126 on OpenSUSE Tumbleweed.

Chrome 125.0.6422.112 also appears to render correctly.

Allan

gitzi

Note, I think your CSP config differs from mine. The missing parts are: style-src 'self' and script-src 'self'. Usually if those are not provided it will fallback to default-src. And afaik if default-src is missing it will fallback to "allow everything"

gitzi

I suppose the issue can't be really adressed using external JS. Because I use datatables via npm packages and import it into my javascript on the server. style-src and script-src are exactly the vulnerable parts that I try to make safe by using 'self' only or at least for some other third party apps with "nonces". If those two are not provided in the CSP, we allow every unsafe inline stuff afaik.

allan

With:

default-src 'self' https://cdn.datatables.net;
script-src 'self' 'unsafe-inline' https://cdn.datatables.net;
style-src 'self' https://cdn.datatables.net;

I got it to render: https://live.datatables.net/bibihife/1/edit .

I had to use unsafe-inline to initialise the DataTable, otherwise it wasn't running the <script> tag with the code to initialise it.

Would that option cause the width = 'auto' issue to go away? I wouldn't have thought so, as you mentioned the error talks about inline styles. That would surely fall under the style-src option.

I'm not seeing an error in Firefox with this example.

Allan

gitzi

It works now using

style-src 'self'
script-src 'self'

and with es6 imports.
Unfortunately, I don't know what exactly changed. Seems like I had to update datatables-bs5 to 2.1.0. Nevermind, thanks for your help.

allan

If it works with the latest version, we'll take it . Thanks for letting me know.

Allan