Content-Security-Policy: style-src 指令
HTTP Content-Security-Policy (CSP) 的 style-src 指令指定了樣式表的有效來源。
| CSP 版本 | 1 |
|---|---|
| 指令型別 | 獲取指令 |
default-src 回退 |
是的。如果此指令缺失，使用者代理將查詢 default-src 指令。 |
語法
Content-Security-Policy: style-src 'none';
Content-Security-Policy: style-src <source-expression-list>;
此指令可以具有以下值之一
'none'-
不允許載入此型別的任何資源。單引號是強制性的。
<source-expression-list>-
一個由源表示式值組成的空格分隔列表。如果資源型別與任何給定的源表示式匹配，則可以載入此類資源。對於此指令，以下源表示式值適用：
<host-source><scheme-source>'self''unsafe-inline''unsafe-hashes''nonce-<nonce_value>''<hash_algorithm>-<hash_value>''report-sample'
請注意，規範中也包含了
'unsafe-eval'作為有效的源表示式值，以允許解析和插入 CSS 字串的 CSSOM 方法，包括insertRule()方法以及各種介面上的cssTextsetter，例如CSSStyleSheet.insertRule()和CSSStyleDeclaration.cssText。然而，目前沒有瀏覽器會阻止這些方法，因此無需應用unsafe-eval。
示例
違規情況
給定此 CSP 頭
Content-Security-Policy: style-src https://example.com/
以下樣式表將被阻止，無法載入：
<link href="https://not-example.com/styles/main.css" rel="stylesheet" />
<style>
#inline-style {
background: red;
}
</style>
<style>
@import "https://not-example.com/styles/print.css" print;
</style>
以及使用 Link 頭載入的樣式：
Link: <https://not-example.com/styles/stylesheet.css>;rel=stylesheet
內聯樣式屬性也將被阻止：
<div style="display:none">Foo</div>
以及透過直接設定 style 屬性或設定 cssText 在 JavaScript 中應用的樣式：
document.querySelector("div").setAttribute("style", "display:none;");
document.querySelector("div").style.cssText = "display:none;";
然而，直接在元素的 style 屬性上設定的樣式屬性將不會被阻止，允許使用者透過 JavaScript 安全地操作樣式：
document.querySelector("div").style.display = "none";
可以透過 script-src CSP 指令禁止 JavaScript 來防止這些型別的操作。
不安全的內聯樣式
注意：禁止內聯樣式和內聯指令碼是 CSP 提供的最大安全優勢之一。但是，如果你絕對必須使用它們，有幾種機制可以允許它們。
要允許內聯樣式，可以指定 'unsafe-inline'、一個 nonce-source 或一個與內聯塊匹配的 hash-source。以下內容安全策略將允許像 <style> 元素和任何元素上的 style 屬性這樣的內聯樣式：
Content-Security-Policy: style-src 'unsafe-inline';
以下 <style> 元素和 style 屬性將受策略允許：
<style>
#inline-style {
background: red;
}
</style>
<div style="display:none">Foo</div>
你可以使用 nonce-source 來只允許特定的內聯樣式塊。你需要生成一個隨機 nonce 值（使用加密安全的隨機令牌生成器）並將其包含在策略中。重要的是，此 nonce 值需要動態生成，因為它必須對每個 HTTP 請求都是唯一的。
Content-Security-Policy: style-src 'nonce-2726c7f26c'
你必須在 <style> 元素上設定相同的 nonce：
<style nonce="2726c7f26c">
#inline-style {
background: red;
}
</style>
或者，你可以從內聯樣式建立雜湊。CSP 支援 sha256、sha384 和 sha512。雜湊的二進位制形式必須用 base64 編碼。你可以透過 openssl 程式在命令列上獲取字串的雜湊：
echo -n "#inline-style { background: red; }" | openssl dgst -sha256 -binary | openssl enc -base64
你可以使用 hash-source 來只允許特定的內聯樣式塊。
Content-Security-Policy: style-src 'sha256-ozBpjL6dxO8fsS4u6fwG1dFDACYvpNxYeBA6tzR+FY8='
生成雜湊時，不要包含 <style> 標籤，並且請注意大小寫和空格（包括前導或尾隨空格）都很重要。
<style>
#inline-style {
background: red;
}
</style>
規範
| 規範 |
|---|
| 內容安全策略級別 3 # directive-style-src |
瀏覽器相容性
載入中…