Question

我在做什么错？由于某种原因，即使我在attr中指定了现时ID，CSP仍会阻止js文件调用。

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

错误消息：

拒绝执行内联脚本，因为它违反了以下要求内容安全策略指令：“ script-src 'nonce-Xiojd98a8jd3s9kFiDi29Uijwdu'”。要么是“不安全内联” 关键字，哈希（'sha256-9pSu4Q2RG6fzg6RdmNxg1z3W + Y9EdC0f90RGYsLO / o4 ='）或随机数（“ nonce -...”）才能启用内联执行。

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. 通过“网络”标签中的控制台，我看到了已加载的脚本。

不工作--->

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

如果我删除meta Content-Security-Policy-以上所有代码均有效。所有脚本均根据需要运行）

Answer 1

在current documentation中，用于在脚本标签上设置属性的属性称为scriptAttrs。

scriptAttrs

类型：PlainObject

定义具有附加属性的对象，该对象将在“脚本”或“ jsonp”请求中使用。键代表属性的名称，而值是属性的值。如果提供了此对象，它将强制使用脚本标签传输。例如，这可以用于设置现时，完整性或跨域属性以满足内容安全策略要求。（添加的版本：3.4.0）

我建议您尝试

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

Answer 2

问题很简单。感谢jQuery开发人员。事实证明，一切最初都是清晰的，但我只是没有注意到，因为我的代码太大了。问题出在DOM onevent处理程序中，在我来说，是DIV上的onclick事件。

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

CSP：拒绝执行内联脚本

2 个答案: