CSP：拒绝执行内联脚本

Question

我做错了什么？出于某种原因，CSP 无论如何都会阻止 js 文件调用，即使我在 attr 中指定了 nonce ID。

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

调用函数：

jQuery.loadScript = function (url, callback) {

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

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

错误信息：

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版本： /*! jQuery v3.4.1 | (c) JS Foundation and other contributors | jquery.org/license */

已编辑：如果我不使用 $.loadScript 函数，所有安装了 nonce attr 的 js 文件都可以正常工作。问题出在js文件的动态调用上，可惜我没法去掉。而且需要动态加载。

已编辑(2)：我尝试通过 document.createElement ("script")，也通过 jQuery.globalEval 并在各处添加随机数。结果显示某些函数（其中一个函数使用 foreach）无法运行并出现错误：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. 通过 "Network" 选项卡中的控制台，我看到加载的脚本。

不工作 --->

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

不要再工作了--->

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);

如果我删除元 Content-Security-Policy - 以上所有代码均有效。所有脚本都按需要工作）

Answer 1

在current documentation中属性设置脚本标签上的属性叫做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)

我建议你试试

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

Answer 2

问题很简单。感谢 jquery 开发人员。事实证明，一开始一切都很清楚，但我只是没有注意到，因为我的代码太大了。问题出在 DOM 一个事件处理程序中，在我的例子中，是 DIV.

上的 onclick 事件

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

CSP：拒绝执行内联脚本

CSP: Refused to execute inline script

javascript

jquery

nonce

content-security-policy