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

What’s the purpose of the HTML "nonce" attribute for script and style elements?

提问by ata

W3C says there is a new attribute in HTML5.1 called noncefor styleand scriptthat can be used by the Content Security Policy of a website.

W3C说，有在HTML5.1一个新的属性称为nonce的style和script可以由内容安全策略网站的使用。

I googled about it but finally didn't get it what actually this attribute does and what changes when using it?

我用谷歌搜索了它，但最终没有得到它实际上这个属性的作用以及使用它时有什么变化？

回答by sideshowbarker

The nonceattribute enables you to “whitelist” certain inline scriptand styleelements, while avoiding use of the CSP unsafe-inlinedirective (which would allow allinline script/style), so that you still retain the key CSP feature of disallowing inline script/stylein general.

该nonce属性使您能够将某些内联script和style元素“列入白名单” ，同时避免使用 CSPunsafe-inline指令（这将允许所有内联script/ style），以便您仍然保留通常禁止内联script/的关键 CSP 功能style。

So the nonceattribute is way of telling browsers that the inline contents of a particular script or style element were not injected into the document by some (malicious) third party, but were instead put into the document intentionally by whoever controls the server the document is served from.

因此，该nonce属性是告诉浏览器特定脚本或样式元素的内联内容不是由某些（恶意）第三方注入到文档中的，而是由控制该文档的服务器的任何人有意地将其放入文档中从。

https://developers.google.com/web/fundamentals/security/csp/#if_you_absolutely_must_use_itgives a good example of how to use the nonceattribute, which amounts to the following steps:

https://developers.google.com/web/fundamentals/security/csp/#if_you_absolutely_must_use_it给出了如何使用该nonce属性的一个很好的例子，相当于以下步骤：

1. For every request your Web server receives for a particular document, have your backend generate a random base64-encoded string of at least 128 bits of data from a cryptographically secure random number generator; e.g., EDNnf03nceIOfn39fn3e9h3sdfa. That's your nonce.

2. Take the nonce generated in step 1, and for any inline script/styleyou want to “whitelist”, make your backend code insert a nonceattribute into the document before it's sent over the wire, with that nonce as the value:

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

3. Take the nonce generated in step 1, prepend nonce-to it, and make your backend generate a CSP header with that among the values of the source list for script-srcor style-src:

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

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

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

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

3. 将步骤 1 中生成的随机数添加nonce-到它的前面，并使您的后端生成一个 CSP 标头，其中包含script-srcor的源列表的值style-src：

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

So the mechanism of using a nonce is an alternative to instead having your backend generate a hash of the contents of the inline scriptor styleyou want to allow, and then specifying that hash in the appropriate source list in your CSP header.

因此，使用 nonce 的机制是替代让您的后端生成内联内容的散列script或style您想要允许的替代方法，然后在 CSP 标头的适当源列表中指定该散列。

Note that because browsers don't (can't) check that the nonce value sent changes between page requests, it's possible—though totally inadvisable—to skip 1 above and not have your backend do anything dynamically for the nonce, in which case you could just put a nonceattribute with a static value into the HTML source of your doc, and send a static CSP header with that same nonce value.

请注意，由于浏览器不会（无法）检查页面请求之间发送的 nonce 值是否发生变化，因此有可能（尽管完全不可取）跳过上面的 1 并且不让您的后端为 nonce 动态执行任何操作，在这种情况下，您可以将nonce具有静态值的属性放入文档的 HTML 源中，然后发送具有相同随机数值的静态 CSP 标头。

But the reason you'd not want to use a static nonce in that way is, it'd pretty much defeat the entire purpose of using the nonce at all to begin with—because, if you were to use a static nonce like that, at that point you might as well just be using unsafe-inline.

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