Error blocked loading of Jquery.js - Content Security Policy

Question

I am getting below error while loading application:

Content Security Policy: The page’s settings blocked the loading of a resource at inline (“script-src”). jquery-3.6.0.js:6333:7

code at this line:

 if ( elem.nodeType === 1 ) { jQuery.cleanData( getAll( elem, false ) ); elem.innerHTML = value; // this line is causing issue }

My CSP header:

add_header Content-Security-Policy    "default-src 'self' data: blob: ;
                                        script-src 'self' data: blob: 'nonce-2726c7f26c';
                                        style-src 'self' data: blob: ;
                                        img-src 'self' ;
                                        form-action 'self' ;
                                        frame-ancestors 'self' ;" always; 

I am trying to use 'nonce' also but it is not working.

<script src="js/jquery-3.6.0.js" nonce="2726c7f26c"></script>

I don't want to use 'unsafe-inline'.

Can anyone please help to fix this issue, I have spent 2 days in googling but nothing works out. Thanks in Advance.

Update 1: In Chrome below errors are coming:

jquery-3.6.0.js:6262 Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' data: blob: 'nonce-2726c7f26c'". Either the 'unsafe-inline' keyword, a hash ('sha256-1PxuDsPyGK6n+LZsMv0gG4lMX3i3XigG6h0CzPIjwrE='), or a nonce ('nonce-...') is required to enable inline execution.

(anonymous) @ jquery-3.6.0.js:6262 domManip @ jquery-3.6.0.js:6089 prepend @ jquery-3.6.0.js:6259 (anonymous) @ angular.min.js:315

:81/uploadGrp:1 Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' data: blob: 'nonce-2726c7f26c'". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present.

Code at line jquery-3.6.0.js:6262:

if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) {
     var target = manipulationTarget( this, elem );
     target.insertBefore( elem, target.firstChild ); //this line is causing issue.
}

Answer 1

The jquery 3.6 redistributes 'nonce-value' it into all inline scripts it injected, including scriptAttrs: {nonce: "value"} attribute in $.ajax() . Therefore the line:

elem.innerHTML = value; // this line is causing issue

contains inline event handler (eg <tag onclick='...' ) or javascript navigation (eg <a href='javascript:void()' ) or even <script>...</script> in the 'value'.

The Firefox browser is not much verbose to differ these kinds of inline scripts, but Chrome will dfescribe violations more prescribely ( Refused to execute inline script / Refused to execute inline event handler / Refused to run the JavaScript URL ). Therefore using Chrome you can shred a lights whats going on.

Alternatively you can use reporting facilities of Content Security Policy (CSP) - add 'report-sample' token into script-src directive and add report-uri https://url_to_handle_reports; directive at the end of your CSP (for example you can temporary use a free plan of https://report-uri.com , or use some Node.js packages to handle violation reports).
With a 'report-sample' token you'll get a sample of code caused violation (first 40 chars).

After identifying the code causing the violation, you can already try to fix it.

Update after Chrome console messages been attached

jquery-3.6.0.js:6262 Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' data: blob: 'nonce-2726c7f26c'". Either the 'unsafe-inline' keyword, a hash ('sha256-1PxuDsPyGK6n+LZsMv0gG4lMX3i3XigG6h0CzPIjwrE=') ...

The 'sha256-1PxuDsPyGK6n+LZsMv0gG4lMX3i3XigG6h0CzPIjwrE=' hash relates to typical block of <style> of Angular framework.

Jquery does not redistribute 'nonce-value' from scripts to styles. Anyway Angular requires 'unsafe-inline' in the style-src directive - pls see Suggested Steps: 1. We should clearly state that allowing 'unsafe-inline' in style-src is required for Angular applications .

:81/uploadGrp:1 Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' data: blob: 'nonce-2726c7f26c'". Either the 'unsafe-inline' keyword, a hash ('sha256-...') ...

You do insert inline event handler like elem.innerHTML = "<div onclick='...'" . This require 'unsafe-inline' in the 'script-src' , because built-in event handlers are covered by 'unsafe-hashes' token but it's not supported in Safari.

If you can change a logic and use addEventListener to attach event handler:

document.querySelector("#element-id").addEventListener("click", function() {...do something...} );

you can avoid using 'unsafe-inline' in script-src .

BTW: you can to define what event handler is blocked by using a piece of code:

if ('SecurityPolicyViolationEvent' in window)
  document.addEventListener('securitypolicyviolation', (e) => {
     console.log(e.sample + '` in `' + e.violatedDirective + '`');
  } );
else console.log('SecurityPolicyViolationEvent unsupported');