如何将 nonce 属性随机 id 与内联 JavaScript 关联

Posted

技术标签:

【中文标题】如何将 nonce 属性随机 id 与内联 JavaScript 关联【英文标题】：How to associate nonce attribute random id with inline JavaScript 【发布时间】：2021-06-26 12:37:01 【问题描述】：

我正在网站上添加内容安全策略限制。所以内联 JS 和 CSS 不再可用。但是我应该在每个页面上都有一些内联 JS，因此我添加了 nonce 属性。 我应该为页面上的每个内联脚本和 css 生成新的随机 id

<html>
<head>
<script src="url/example1.js" nonce="id-1"/>
<script src="url/example2.js" nonce="id-2"/>
<script src="url/example3.js" nonce="id-3"/>
</head>
</html>

或者我可以生成一个 id 并为页面上的每个 JS 和 CSS 重用它（是否像上面的方式一样安全）？

<html>
<head>
<script src="url/example1.js" nonce="id-1"/>
<script src="url/example2.js" nonce="id-1"/>
<script src="url/example3.js" nonce="id-1"/>
</head>
</html>

对我来说，这两种方法都很好，但 CSP 标头有长度限制（1024 个字符）。每个 id 看起来都像“nonce-20..30 chars”。存在下一个新的内联 JS 可能被拒绝的风险...

【问题讨论】：

...but CSP header has length limit(1024 chars)... - 真的不是这样。我使用 5036 个字符长度的 CSP 标头。 https://twitter.com/ 的 CSP 长度为 2560 个字符。我只遇到了一个限制 - LimitRequestFieldsize=8190 字节作为 Ahache 服务器中 all HTTP 标头的最大大小。一些旧手机的浏览器也限制了标题的输入缓冲区。 【参考方案1】：

https://www.w3.org/TR/CSP3/#security-nonces 表示您应该在每次提交保单时生成一个唯一值。这意味着您可以在整个文档中重复使用 nonce。在下一页加载时，您需要一个新的随机数。

【讨论】：

以上是关于如何将 nonce 属性随机 id 与内联 JavaScript 关联的主要内容，如果未能解决你的问题，请参考以下文章

如何允许内联 JS 脚本使用 Nonce 进行 CSP

内容安全策略 nonce 不适用于事件处理程序属性

忽略样式属性的内容安全策略随机数

CSP nonce 实现是啥样的？

需要帮助理解nonce

nonce值是什么？（Number once）（Number used once）cnonce（client nonce）（一个只被使用一次的任意或非重复的随机数值）