将 nonce 添加到脚本标签

问题描述

我想向动态构造的脚本标记添加随机数。以下不会向生成的脚本标记添加任何随机数。有人知道如何添加随机数吗？

var _wss = document.createElement('script');
_wss.nonce = 'random-string';
_wss.type = 'text/javascript';
_wss.charset = 'utf-8';
_wss.async = true;
_wss.src = "url";
var __wss = document.getElementsByTagName('script')[0];
__wss.parentNode.insertBefore(_wss,__wss);

结果是：

<script type="text/javascript" charset="utf-8" async src="url"></script>

预期结果：

<script nonce="random-string" type="text/javascript" charset="utf-8" async src="url"></script>

谢谢！

解决方法

我在这个 stackoverflow 页面上运行了你的代码，并且成功了。

我认为您遇到的问题是您希望将 nonce 视为脚本标记的属性，但它仅在 javascript 中作为属性可用。

标签看起来像这样

<script type="text/javascript" charset="utf-8" async="" src="url"></script>

但是如果你跑了

console.log(document.getElementsByTagName('script')[0].nonce)

它会显示"random-string"

原因是安全。见https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce#accessing_nonces_and_nonce_hiding。具体

出于安全原因，nonce 内容属性被隐藏（一个空的字符串将被返回）。

nonce 属性是访问 nonce 的唯一方法：

如果您想动态导入/构建脚本，您必须使用 strict-dynamic CSP 源而不是 nonce。

strict-dynamic 源表达式指定显式给予标记中脚本的信任，通过随附随机数或散列，应传播到所有脚本由该根脚本加载。同时，任何允许列表或源表达式（例如“self”或“unsafe-inline”）都将被忽略。

来源MDN - CSP: script-src

您还可以在 Content Security Policy (CSP) Quick Reference Guide 阅读更多相关信息并查看一些示例。

javascript nonce