CODEWITHSUNDEEP
javascriptjquerycontent-security-policynonce
ScreamX
ScreamX

Reputation: 339

CSP: Refused to execute inline script

What am I doing wrong? For some reason, CSP blocks the js file call anyway, even though I specified nonce ID in attr.

<head>
    <meta http-equiv="Content-Security-Policy" content="script-src 'nonce-Xiojd98a8jd3s9kFiDi29Uijwdu';">
</head>

Call Function:

jQuery.loadScript = function (url, callback) {

jQuery.ajax({
        url: url,
        dataType: 'script',
        success: callback,
        async: true,
        scriptAttrs: { nonce: "Xiojd98a8jd3s9kFiDi29Uijwdu" }
    });
}

$.loadScript("/js/temp.js");

Error message:

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'nonce-Xiojd98a8jd3s9kFiDi29Uijwdu'". Either the 'unsafe-inline' keyword, a hash ('sha256-9pSu4Q2RG6fzg6RdmNxg1z3W+Y9EdC0f90RGYsLO/o4='), or a nonce ('nonce-...') is required to enable inline execution.

Jquery ver: /*! jQuery v3.4.1 | (c) JS Foundation and other contributors | jquery.org/license */

Edited: if i dont use $.loadScript function, all js files with installed nonce attr works GOOD. The problem is in the dynamic call of the js file, but unfortunately I can not get rid of it. And it needs to be loaded dynamically.

Edited(2): I tried through document.createElement ("script"), also through jQuery.globalEval and added nonce everywhere. The output turns out so that some functions (one of them uses foreach) do not work with an error: Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'nonce-Xiojd98a8jd3s9kFiDi29Uijwdu'". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution. Through the console in the "Network" tab, I see the loaded script.

Dont work --->

jQuery.globalEval($.loadScript("/js/temp.js"), {
    nonce: "Xiojd98a8jd3s9kFiDi29Uijwdu"
});

Dont work again --->

var scriptTag = document.createElement("script");
scriptTag.type = "text/javascript";
scriptTag.src = "/js/temp.js";
scriptTag.setAttribute("nonce", "Xiojd98a8jd3s9kFiDi29Uijwdu");
(document.getElementsByTagName("head")[0] || document.documentElement).appendChild(scriptTag);

If i delete meta Content-Security-Policy - All codes above work. All scripts work as needed)

Upvotes: 5

Views: 4704

Answers (2)

ScreamX
ScreamX

Reputation: 339

The problem was simple. Thanks to the jquery developers. As it turned out, everything was initially clear, but I just did not notice it, because my code is too big. The problem was in the DOM onevent handlers, and in my case, onclick event on DIV.

<div onclick="setContent('content1')">1</div>

Upvotes: 0

brass monkey
brass monkey

Reputation: 6771

In the current documentation the property to set attributes on the script tag is called scriptAttrs.

scriptAttrs

Type: PlainObject

Defines an object with additional attributes to be used in a "script" or "jsonp" request. The key represents the name of the attribute and the value is the attribute's value. If this object is provided it will force the use of a script-tag transport. For example, this can be used to set nonce, integrity, or crossorigin attributes to satisfy Content Security Policy requirements. (version added: 3.4.0)

I suggest you try

jQuery.ajax({
        url: url,
        dataType: 'script',
        success: callback,
        async: true,
        scriptAttrs: { nonce: "Xiojd98a8jd3s9kFiDi29Uijwdu" }
    });
}

Upvotes: 2

Related Questions