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 表格仅在浏览器中加载

另请参阅