Skip to main content

CSP

介绍​

CSP (内容安全策略) 是一种基于HTTP头部信息的安全策略机制, 可以有效的防止跨站脚本攻击和其他类型的代码注入攻击, 为网站提供更高的安全性.

CSP 可以让网站管理员控制网站的资源加载情况, 通过指定允许加载外部资源的白名单、限制内联脚本和禁止使用 ​eval()​ 等方式限制网站的脚本执行, 这种方式可以帮助浏览器去识别和阻止恶意内容的加载

info

CSP 的实质就是白名单制度，开发者明确告诉客户端，哪些外部资源可以加载和执行，等同于提供白名单。它的实现和执行全部由浏览器完成，开发者只需提供配置。CSP 大大增强了网页的安全性。

使用​

CSP 通过提供多种类型的策略指令, 包括 default-src 、script-src 、style-src 、img-src 、font-src 、connect-src 等，可以快速配置并适用于不同的网站。它还支持 report-uri 指示器，让网站管理员可以记录浏览器报告的违规内容，从而进一步加强安全性。

CSP 策略也可以包含在页面的 HTML 源代码中, 使用 <meta> 进行标记

<meta http-equiv="Content-Security-Policy" content="script-src 'none'; object-src 'none';">

指令​

Book Iconbook

资源加载指令​

这类指令的目的时用于控制某些可能被加载的确切资源类型的位置

  • script-src：在处理脚本资源的时候设置 unsafe-inline 可以阻止内联 Js 代码的执行，使用 unsafe-eval 开关可以禁止 eval、setTimeout、setInterval 函数的执行
  • style-src：会控制样式表@import 和 rel 时所引入的 URI 资源，设置 unsafe-inline 规则可以是浏览器拒绝解析内部样式和内联样式定义。并不会阻止链入外部样式表。
  • img-src：可以控制图片资源的连接，包括 img 标签的 src 属性，以及 CSS3 中的 url() 和 image()方法，以及 link 标签中的 href 属性（当 rel 设置成与图像相关的值，比如 HTML 支持的 icon）
  • font-src：控制 CSS 中的 @font-face 加载的字体源地址
  • frame-src：设置允许通过类似 <frame> 和 <iframe> 标签加载的内嵌内容的源地址
  • manifest-src：限制应用声明文件的源地址
  • media-src：控制媒体类型的外部链入资源，如 <audio>、<video>、<source> 和 <track> 标签的 src 属性
  • object-src：控制 <embed>、<code>、<archive>、<applet> 等对象
  • prefetch-src：指定预加载或预渲染的允许源地址
  • connect-src：控制 XMLHttpRequest 中的 open()、WebSocket、EventSource
  • report-uri: 特殊指令, 当浏览器检测到违反了 CSP 策略，它会将这些信息报告给指定的报告接收方。接收方可以是任何 HTTP 或 HTTPS URL，可以是站内或站外的 URL。已经被 report-to替代

扩展限制​

一些安全相关的功能, 作为扩展存在:

  • block-all-mixed-content：HTTPS 网页不得加载 HTTP 资源（浏览器已经默认开启）
  • upgrade-insecure-requests：自动将网页上所有加载外部资源的 HTTP 链接换成 HTTPS 协议
  • plugin-types：限制可以使用的插件格式
  • sandbox：浏览器行为的限制，比如不能有弹出窗口等

指令配置​

default-src​

default-src 用于设置上面各个选项的默认值。

Content-Security-Policy: default-src 'self'

上面代码限制所有外部资源，只能从当前域名加载。

如果同时设置某个单项限制（比如 font-src）和 default-src，前者会覆盖后者，即字体文件会采用 font-src 的值，其他资源依然采用 default-src 的值。

选项配置​

通过对以下内容进行设置, 这些值就构成了白名单:

多个值也可以并列，用空格分隔。

Content-Security-Policy: script-src 'self' <https://apis.google.com>

如果同一个限制选项使用多次，只有第一次会生效。

# 错误的写法
Content-Security-Policy: script-src <https://host1.com>; script-src <https://host2.com>

# 正确的写法
Content-Security-Policy: script-src https://host1.com https://host2.com;

创建 CSP​

我们可以使用 Report URI: Generate your Content Security Policy 来帮助我们快速生成所需的 CSP 策略.

当设置 script-src 指令以及来源时, 我们需要注意允许加载的内容,如果我们需要从 CDN 等外部来源加载脚本,我们需要确保脚本的完整 URL 或者脚本的SHA 哈希,而不仅仅时托管主机名,比如 jQuery - Libraries- cdnjs 就包含一个 完整 URL 和 SHA256

如果我们需要在网站中包含内联 JS 或者 CSS, 我们需要在服务器端设置随机数生成器或计算内联脚本的 SHA 哈希值, 然后包含在自己的策略中, 比如: 在使用基于 Express的网站, 我们可以使用 npm 的 helmet-csp 模块.如果我们可以希望对脚本进行哈希处理,我们可以使用 Report URI: CSP Hash Generator 、SRI Hash Generator 、autocsp

Notifys​

data URLS​

在默认情况下，CSP 策略不允许使用 data URIs 资源，因为 data URIs 允许将数据直接嵌入到 HTML、CSS 或 JavaScript 中，这可能会导致安全风险，特别是在 XSS 攻击方面。

data URIs 的格式通常为 data:[<mediatype>][;base64],<data>，其中 <mediatype> 表示嵌入数据的 MIME 类型，而 <data> 则是经过 Base64 编码的数据。

如果想在 CSP 策略中允许使用 data URIs 资源，你需要显式地指定允许它们的来源。这可以通过 CSP 的 img-src、font-src、style-src 或其他相关指令来实现，具体取决于你想要在哪个上下文中允许使用 data URIs。

例如，要允许在 img 标签中使用 data URIs，你可以将 img-src 指令设置为包含 'data:'：

Content-Security-Policy: img-src 'self' data:;

script-src 的特殊值​

除了常规值，script-src 还可以设置一些特殊值。注意，下面这些值都必须放在单引号里面。

  • unsafe-inline：允许执行页面内嵌的 <script> 标签和事件监听函数
  • unsafe-eval：允许将字符串当作代码执行，比如使用 eval、setTimeout、setInterval 和 Function 等函数。
  • nonce 值：每次 HTTP 回应给出一个授权 token，页面内嵌脚本必须有这个 token，才会执行
  • hash 值：列出允许执行的脚本代码的 Hash 值，页面内嵌脚本的哈希值只有吻合的情况下，才能执行。我们可以使用 Report URI: CSP Hash Generator 工具来帮助我们生成

nonce 值的例子如下，服务器发送网页的时候，告诉浏览器一个随机生成的 token。

Content-Security-Policy: script-src 'nonce-EDNnf03nceIOfn39fn3e9h3sdfa'

页面内嵌脚本，必须有这个 token 才能执行。

<script nonce="EDNnf03nceIOfn39fn3e9h3sdfa">
  // some code
</script>

hash 值的例子如下，服务器给出一个允许执行的代码的 hash 值。

Content-Security-Policy: script-src 'sha256-qznLcsROx4GACP2dm0UCKCzCG-HiZ1guq6ZZDob_Tng='

下面的代码就会允许执行，因为 hash 值相符。

<script type="text/javascript">
  alert('Hello, world.');
</script>

注意，计算 hash 值的时候，<script> 标签不算在内。

除了 script-src 选项，nonce 值和 hash 值还可以用在 style-src 选项，控制页面内嵌的样式表。