Jquery +datatables causing CSP errors for inline style

[ripjal]

I have been trying to get rid of the unsafe-inline from the CSP style-src headers as it is vulnerable. While removing this, I am getting below errors in jQuery execution in chrome:

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' 'nonce-TXYxR0tlamZ1emk2a3Y4RHFwdTdTZ0JaR1R2TTdEaUk=' 'unsafe-eval' ". Either the 'unsafe-inline' keyword, a hash ('sha256-Z0MkpGRk0/9QW+7eJ/G1D//1i6WKVbat+HlIwkiFln4='), or a nonce ('nonce-...') is required to enable inline execution

While debugging I found that it is failing at

From jquery 3.5.1
tmp.innerHTML = wrap[ 1 ] + jQuery.htmlPrefilter( elem ) + wrap[ 2 ];

in buildFragment method. At failing point ,elem is evaluated as a string which contains the html for tr containing inline style generated by the datatables.Even though the datatables seems to be applying CSP safe way as below but when it gets passed back to jQuery whole TR containing inline style is loaded as innerHTML which gets failed due to unsafe-inline

from datatables.js 1.10.21
`_fnApplyToChildren( function(nSizer, i) {
nSizer.innerHTML = '

'+footerContent[i]+'

';
nSizer.childNodes[0].style.height = "0";
nSizer.childNodes[0].style.overflow = "hidden";
nSizer.style.width = footerWidths[i];
}, footerSrcEls );
}

As seen above datatables is applying inline styles in CSP acceptable way as they are applying style property directly on the elements style property Below is the run time value that gets evaluated in "elem" in jquery buildFragment method containing inline styles
<tr role="row"><th class="dataGridCheckBoxCell sorting" aria-controls="tablegrid" rowspan="1" colspan="1" aria-label=": activate to sort column ascending" style="padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px; width: 41px;" role="columnheader"><div class="dataTables_sizing" **style="height: 0px; overflow: hidden;"**><div id="checkAllQueues" class="selectable" role="checkbox"></div>

I am not sure if it is a data tables issue or jquery or combination of both. Any insight on the issue will be helpful or any workaround that can be applied

[roblarsen]

https://bugs.jquery.com/ https://datatables.net/forums/categories/bug-reports

[Markel]

Hi! 👋

Which tests and Modernizr version are you using? It will probably be useful to understand the error.

Maybe this error is related with #1263 & #2625

[ripjal]

@roblarsen I dont think it is a bug in datatables as they are adding inline styles using java script in the right way by using the style property of the element which is acceptable .That is the reason chrome is not throwing error in datatables.

@Markel :I am just loading my application page which uses datatables internally to load the grid.I am not sure of the modernize version we are using in our legacy application but I think issue is not with the modernize but with the jquery

[Markel]

@ripjal So you think that it is an error from Modernizr or not? 😅😅

About the version, in the js file there's usually a comment at the top that specifies the version.