脚本和样式元素的 HTML“nonce”属性的用途是什么？

W3C 表示 HTML5.1 中有一个新属性，称为nonce for style and script可供网站的内容安全策略使用。

我用谷歌搜索了一下，但最终没有明白这个属性实际上是做什么的，以及使用它时会发生什么变化？

The nonce属性允许您将某些内联“列入白名单”script and style元素，同时避免使用 CSPunsafe-inline指令（这将允许all inline script and style），因此您仍然保留禁止内联的关键 CSP 功能script/style一般来说。

So the nonce属性是一种告诉浏览器特定脚本或样式元素的内联内容不是由某些（恶意）第三方注入到文档中的方法，而是由控制提供文档的服务器的任何人故意放入文档中的。

网络基础知识内容安全政策 https://web.dev/csp/文章的如果你绝对必须使用它 https://web.dev/csp/#if-you-absolutely-must-use-it部分有一个很好的例子说明如何使用nonce属性，相当于以下步骤：

1. 对于您的 Web 服务器收到的针对特定文档的每个请求，让您的后端从加密安全随机数生成器生成至少 128 位的随机 Base64 编码字符串；例如。，EDNnf03nceIOfn39fn3e9h3sdfa。那是你的随机数。

2. 获取步骤 1 中生成的随机数，并且对于任何内联script/style你想要“白名单”，让你的后端代码插入一个nonce在通过网络发送文档之前将属性添加到文档中，并以该随机数作为值：

    <script nonce="EDNnf03nceIOfn39fn3e9h3sdfa">…</script>
   

3. 取出步骤 1 中生成的随机数，添加到前面nonce-，并让您的后端生成一个 CSP 标头，其中包含源列表的值script-src or style-src:

    Content-Security-Policy: script-src 'nonce-EDNnf03nceIOfn39fn3e9h3sdfa'
   

因此，使用随机数的机制是一种替代方案，可以替代让后端生成内联内容的哈希值script or style您希望允许，然后在 CSP 标头中的相应源列表中指定该哈希。

注意：浏览器不会（不能）检查服务器发送的随机数值在页面请求之间是否实际发生变化；因此，尽管完全不建议，但可以跳过上面的 1，并且不让后端为随机数动态执行任何操作，在这种情况下，您可以只放置一个nonce具有静态值的属性到文档的 HTML 源中，并发送具有相同随机数值的静态 CSP 标头。

但你不想以这种方式使用静态随机数的原因是，它几乎完全违背了使用随机数的全部目的——因为，如果你要使用这样的静态随机数，那时你可能只是使用unsafe-inline.

至于哪些元素是“nonceable”：CSP 规范当前限制浏览器仅检查 noncescript and style元素。以下是规格详细信息：

• In https://w3c.github.io/webappsec-csp/#match-element-to-source-list https://w3c.github.io/webappsec-csp/#match-element-to-source-list，参见步骤 2：
  如果类型是“script”或“style”，并且 §6.6.3.1 元素是否为 nonceable？返回“Nonceable”...

• At https://w3c.github.io/webappsec-csp/#is-element-nonceable https://w3c.github.io/webappsec-csp/#is-element-nonceable, the 元素是 nonceable 吗？算法本身不仅仅检查script/style元素；但规范调用的唯一地方是上面引用的部分，这将其限制为script/style。因此，如果您在任何其他元素上放置随机数，规范要求浏览器忽略它。