jQuery 3 1 1 violation of CSP directive

0 votes

I'm using jQuery version 3.1.1 and I'm trying to implement Content Security Policy (CSP) directives on my webpage.

I'm getting the following error:

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' 'nonce-c20t41c7-73c6-4bf9-fde8-24a7b35t5f71'". Either the 'unsafe-inline' keyword, a hash ('sha256-KAcpKskREkEQf5B3mhDTonpPg34XnzaUC5IoBrOUrwY='), or a nonce ('nonce-...') is required to enable inline execution.

The error is produced on line 82 of the main jquery.js script file. The content of this line is:

doc.head.appendChild( script ).parentNode.removeChild( script );

Basically, it adds an inline script tag to the DOM, that violates the CSP.

I do not want to use 'unsafe-inline'. Is there another way to circumvent this error?

As you can see on the CSP violation, I'm using CSP level 2 (nonce), but it is ignored. Would it be possible (somehow) to inform jQuery to use this nonce when appending the script tag?


This is how the HTML looks like (using an Express.js template for nonce)

<script nonce="<%=nonce%>" type="text/javascript" src="jquery.js"></script>

Once the HTML is rendered, the nonce attribute on the script tag matches the CSP nonce directive sent by the server.


It does work with plain JavaScript:

<script nonce="<%=nonce%>" type="text/javascript">
        var userEmail = "<%=user.user.email%>";
</script>

Without the nonce attribute, this script tag would violate the CSP directive.

Aug 3 in Web Development by gaurav
• 17,580 points
7 views

1 answer to this question.

0 votes

It looks like a bug or quirk of jQuery how it appends inline scripts ends up discarding all of their attributes and I can't see an obvious way of fixing it to test it I used the following HTML:

<!DOCTYPE html>
<html>

    <head>
        <meta http-equiv="Content-Security-Policy" content="default-src http://localhost 'nonce-123456' ; child-src 'none'; object-src 'none'; script-src 'nonce-123456';">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.js" nonce="123456"></script> <!-- HTML nonce works -->
        <script nonce="123456">
            // This works
            console.log('Inline nonce works');

            // This will also work
            var s = document.createElement('script');
            s.setAttribute('nonce', '123456');
            s.textContent = 'console.log("Dynamically generated inline tag works")';
            document.head.appendChild(s);

            // This won't work
            var s2 = document.createElement('script');
            s2.setAttribute('nonce', '123456');
            s2.textContent = 'console.log("Dynamically generated inline tag appended via jQuery doesn\'t work")';
            $(document.head).append(s2); // This will throw a CSP error
        </script>
    </head>

<body>

</body>

</html>

When using jQuery to append it goes through the following process (reduced a little):

  • Creates a document fragment and appends a script tag to it
  • Applies a type="false/" attribute to the script tag
  • Removes the type attribute
  • If a src attribute is present it retrieves the script via Ajax (didn't investigate this further)
  • If not it runs DOMEval(node.textContent.replace(rcleanScript, ""), doc)

DomEval looks like this (with added comments):

doc = doc || document;
var script = doc.createElement( "script" );
script.textContent = code;
doc.head.appendChild( script ).parentNode.removeChild( script );

As you can see, no attributes would carry over to the new element before it was appended and as such CSP fails.

The solution would be to just use native JavaScript to append the element as opposed to jQuery or possibly wait on a bug fix/response to your report. I'm unsure what their reasoning would be to exclude attributes in this manner for inline script tags maybe a security feature?

The following should achieve what you want without jQuery - just set the textContent attribute to your JavaScript source code.

var script = document.createElement('script');
script.setAttribute('nonce', '<%=nonce%>');
script.textContent = '// Code here';
document.head.appendChild(script);

So essentially why that particular line throws the error is that the appended tag is actually a new tag with the same code and no attributes applied to it and as it has no nonce it's rejected by CSP.

answered Aug 4 by rajatha
• 7,040 points

Related Questions In Web Development

0 votes
1 answer

jQuery get value of select onChange

Try this- $('select').on('change', function() { alert( this.value ...READ MORE

answered Jun 23 in Web Development by rajatha
• 7,040 points
21 views
0 votes
1 answer

jQuery get value of select onChange

To get the value and text of ...READ MORE

answered Jun 23 in Web Development by rajatha
• 7,040 points
18 views
0 votes
1 answer

jQuery get value of selected radio button

Input Radio value Property Get the value of ...READ MORE

answered Jun 23 in Web Development by rajatha
• 7,040 points
53 views
0 votes
1 answer

Why use jQuery on() instead of click()

The . on() method attaches event handlers to ...READ MORE

answered Jun 27 in Web Development by rajatha
• 7,040 points
9 views
0 votes
1 answer

How to use jquery with asp.net ajax?

If you weren't aware, Microsoft is planning ...READ MORE

answered Oct 15, 2018 in IoT (Internet of Things) by Annie97
• 2,160 points
190 views
0 votes
1 answer

Is 'sparkline' a method?

I suggest you to check 2 things That jquery.sparkline.js is actually ...READ MORE

answered Nov 9, 2018 in Apache Spark by Frankie
• 9,830 points
601 views
0 votes
1 answer

What is jQuery?

Hey, jQuery is a fast and concise JavaScript ...READ MORE

answered Feb 14, 2020 in JQuery by kartik
• 37,500 points
308 views
0 votes
1 answer

Error: Global Variable is not accessable to local function

Hey kartik, A variable declared outside a function has a ...READ MORE

answered Feb 19, 2020 in PHP by Niroj
• 82,740 points
283 views
0 votes
1 answer

Pure JS equivalent of Jquery eq()

To get the element index in the ...READ MORE

answered Jun 23 in Web Development by rajatha
• 7,040 points
13 views
0 votes
1 answer

$("#select option:second").val() jquery - keep select second value of select box option

Yes, you want the special jQuery eq() selector. ...READ MORE

answered Jun 22 in Web Development by rajatha
• 7,040 points
7 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP