Handling Content Security Policy (CSP) Errors with Datatables: Removing Unsafe Inline Styles
Handling Content Security Policy (CSP) Errors with Datatables: Removing Unsafe Inline Styles
![gitzi](https://secure.gravatar.com/avatar/2520c470024dd00c3f9484fa0dd0fa6b/?default=https%3A%2F%2Fvanillicon.com%2F2520c470024dd00c3f9484fa0dd0fa6b_200.png&rating=g&size=120)
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!
Answers
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
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:
Interesting! I'd be curious to know what you find out if you have the time to write back with any details.
Thanks,
Allan
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.
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
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"
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.
With:
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 thestyle-src
option.I'm not seeing an error in Firefox with this example.
Allan
It works now using
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.
If it works with the latest version, we'll take it
. Thanks for letting me know.
Allan