CSP：style-src

HTTP 的 Content-Security-Policy (CSP) style-src 指令指定樣式表的有效來源。

CSP 版本 1
指令型別 獲取指令
default-src 回退 是。如果此指令不存在，使用者代理將查詢default-src指令。

語法

可以為style-src策略允許一個或多個來源

http
Content-Security-Policy: style-src <source>;
Content-Security-Policy: style-src <source> <source>;

來源

<source> 可以是CSP 來源值中列出的任何一個值。

請注意，這同一組值可用於所有獲取指令（以及許多其他指令）。

示例

違規情況

給定此 CSP 標頭

http
Content-Security-Policy: style-src https://example.com/

以下樣式表將被阻止，並且不會載入

html
<link href="https://not-example.com/styles/main.css" rel="stylesheet" />

<style>
  #inline-style {
    background: red;
  }
</style>

<style>
  @import url("https://not-example.com/styles/print.css") print;
</style>

以及使用Link 標頭載入的樣式

http
Link: <https://not-example.com/styles/stylesheet.css>;rel=stylesheet

內聯樣式屬性也會被阻止

html
<div style="display:none">Foo</div>

以及透過 JavaScript 直接設定style屬性或設定cssText來應用的樣式

js
document.querySelector("div").setAttribute("style", "display:none;");
document.querySelector("div").style.cssText = "display:none;";

但是，直接在元素的style屬性上設定的樣式屬性不會被阻止，允許使用者透過 JavaScript 安全地操作樣式

js
document.querySelector("div").style.display = "none";

可以透過script-src CSP 指令不允許 JavaScript 來阻止這些型別的操作。

不安全的內聯樣式

注意：不允許內聯樣式和內聯指令碼是 CSP 提供的最大安全優勢之一。但是，如果您絕對必須使用它，則有一些機制將允許它們。

要允許內聯樣式，可以指定'unsafe-inline'、nonce 源或與內聯塊匹配的雜湊源。以下內容安全策略將允許諸如<style>元素和任何元素上的style屬性之類的內聯樣式

http
Content-Security-Policy: style-src 'unsafe-inline';

以下<style>元素和style屬性將被策略允許

html
<style>
  #inline-style {
    background: red;
  }
</style>

<div style="display:none">Foo</div>

您可以使用 nonce 源僅允許特定的內聯樣式塊。您需要生成一個隨機的 nonce 值（使用密碼安全的隨機令牌生成器）並將其包含在策略中。需要注意的是，此 nonce 值需要動態生成，因為它必須對每個 HTTP 請求都是唯一的

http
Content-Security-Policy: style-src 'nonce-2726c7f26c'

您必須在<style>元素上設定相同的 nonce

html
<style nonce="2726c7f26c">
  #inline-style {
    background: red;
  }
</style>

或者，您可以從內聯樣式建立雜湊。CSP 支援 sha256、sha384 和 sha512。雜湊的二進位制形式必須使用 base64 編碼。您可以在命令列上透過openssl程式獲取字串的雜湊值

bash
echo -n "#inline-style { background: red; }" | openssl dgst -sha256 -binary | openssl enc -base64

您可以使用雜湊源僅允許特定的內聯樣式塊

http
Content-Security-Policy: style-src 'sha256-ozBpjL6dxO8fsS4u6fwG1dFDACYvpNxYeBA6tzR+FY8='

生成雜湊時，不要包含<style>標籤，並注意大小寫和空格很重要，包括前導或尾隨空格。

html
<style>
  #inline-style {
    background: red;
  }
</style>

不安全的樣式表示式

'unsafe-eval'源表示式控制幾種從字串建立樣式宣告的樣式方法。如果'unsafe-eval'未與style-src指令一起指定，則以下方法將被阻止，並且不會有任何效果

規範

規範
內容安全策略級別 3
# directive-style-src

瀏覽器相容性

BCD 表格僅在瀏覽器中載入

另請參閱