JS `Content Security Policy (CSP)`：防范 XSS 攻击与内容注入

咳咳，各位观众老爷们，晚上好！我是今天的主讲人，很高兴能在这里跟大家聊聊一个听起来很高大上，但其实理解起来很简单，用起来能有效防止你被“黑”的玩意儿——Content Security Policy (CSP)。咱们今天要讲的就是这个CSP，主要是关于怎么用它来防范XSS攻击和内容注入。

别害怕，虽然名字听起来像科幻电影里的武器，但CSP其实就是一个浏览器安全机制，说白了，就是告诉浏览器哪些资源可以加载，哪些不可以。它可以有效地阻止恶意脚本的执行，避免你的网站被XSS攻击搞得乌烟瘴气。

一、什么是XSS攻击和内容注入？

在深入了解CSP之前，我们先来快速回顾一下XSS攻击和内容注入。

XSS（Cross-Site Scripting，跨站脚本攻击）： 想象一下，你家的网站是个大舞台，用户可以上来表演。正常情况下，用户表演唱歌跳舞没问题。但是，如果有人偷偷溜上来，表演了一段恶意代码，这段代码可以窃取用户的Cookie，修改页面内容，甚至跳转到钓鱼网站，那就麻烦大了。XSS就是干这种事的。攻击者通过在你的网站上注入恶意脚本，当其他用户浏览页面时，这些脚本就会执行，从而造成安全问题。
内容注入： 这玩意儿跟XSS有点像，都是往你的网站里塞东西。但内容注入不一定非得是脚本。比如，有人在你的评论区里塞了一堆垃圾广告链接，或者恶意修改了页面上的文字。虽然不一定直接窃取用户信息，但也会影响用户体验，甚至损害你的品牌形象。

二、CSP：你的网站安全卫士

CSP就像一个严格的门卫，它根据你预先设定的规则，决定哪些资源可以进入你的网站。如果有人想偷偷塞进来一些非法的东西，比如恶意脚本，CSP就会毫不留情地拦住它。

CSP主要通过HTTP响应头或者HTML meta标签来设置。

HTTP响应头： 这是推荐的方式，因为更安全。
```
Content-Security-Policy: 指令列表
```

HTML meta标签： 这种方式比较简单，但安全性稍差。

<meta http-equiv="Content-Security-Policy" content="指令列表">

三、CSP指令：告诉门卫该放行哪些人

CSP的核心在于各种各样的指令，这些指令定义了哪些来源的资源可以加载。下面是一些常用的指令：

指令	描述	示例
`default-src`	定义了所有未被其他指令明确声明的资源类型的默认策略。	`default-src 'self'` (只允许来自同源的资源)
`script-src`	定义了JavaScript的来源。	`script-src 'self' https://cdn.example.com` (允许来自同源和cdn.example.com的JavaScript)
`style-src`	定义了样式的来源。	`style-src 'self' 'unsafe-inline'` (允许来自同源和内联的样式，注意’unsafe-inline’有安全风险)
`img-src`	定义了图片的来源。	`img-src 'self' data:` (允许来自同源和data URI的图片)
`connect-src`	定义了可以建立连接的URL。用于XMLHttpRequest (AJAX), WebSocket或EventSource。	`connect-src 'self' wss://example.com` (允许来自同源和wss://example.com的连接)
`font-src`	定义了字体的来源。	`font-src 'self' https://fonts.example.com` (允许来自同源和fonts.example.com的字体)
`media-src`	定义了`<audio>`、`<video>`和`<track>`元素的来源。	`media-src 'self'` (只允许来自同源的媒体资源)
`object-src`	定义了`<object>`、`<embed>`和`<applet>`元素的来源。	`object-src 'none'` (不允许加载任何object元素)
`frame-src`	定义了`<frame>`和`<iframe>`元素的来源。	`frame-src 'self' https://example.com` (允许来自同源和https://example.com的iframe)
`base-uri`	定义了`<base>`元素的URL。	`base-uri 'self'` (只允许页面使用同源的base URI)
`form-action`	定义了`<form>`元素可以提交到的URL。	`form-action 'self' https://example.com/submit` (允许提交到同源和https://example.com/submit)
`upgrade-insecure-requests`	指示用户代理自动将网站中所有不安全的URL（HTTP）替换为安全的URL（HTTPS）。	`upgrade-insecure-requests` (强制升级所有HTTP请求到HTTPS)
`block-all-mixed-content`	阻止加载任何使用HTTP协议通过HTTPS页面加载的内容。该指令确保所有混合内容（mixed content）都被阻止，从而提高网站的安全性。	`block-all-mixed-content` (阻止加载任何混合内容)
`report-uri`	指定一个URL，当CSP策略被违反时，浏览器会向该URL发送报告。这个指令已经过时，建议使用`report-to`。	`report-uri /csp-report` (当CSP策略被违反时，向/csp-report发送报告)
`report-to`	指定一个命名的端点（endpoint），当CSP策略被违反时，浏览器会向该端点发送报告。需要配合`Reporting-Endpoints` HTTP头使用。	`report-to csp-endpoint` (当CSP策略被违反时，向名为csp-endpoint的端点发送报告，需要在`Reporting-Endpoints`中定义)

四、CSP策略示例：打造你的安全堡垒

下面是一些CSP策略的示例，你可以根据自己的需求进行调整。

最严格的策略：只允许同源资源
```
Content-Security-Policy: default-src 'none'; script-src 'self'; connect-src 'self'; img-src 'self'; style-src 'self';
```
这个策略非常严格，它禁止加载任何外部资源，只允许加载来自同源的资源。这意味着你的网站只能使用自己的代码、图片和样式，任何来自其他域名的资源都会被阻止。这种策略可以有效地防止XSS攻击，但可能会影响网站的功能，比如无法使用CDN上的资源。
允许来自CDN的JavaScript和样式
```
Content-Security-Policy: default-src 'self'; script-src 'self' https://cdn.example.com; style-src 'self' https://cdn.example.com; img-src 'self';
```
这个策略允许加载来自cdn.example.com的JavaScript和样式。这在实际开发中非常常见，因为很多网站都会使用CDN来加速静态资源的加载。
允许内联样式和脚本 (不推荐)
```
Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self';
```
'unsafe-inline'允许执行内联的JavaScript和样式。但是，这会大大降低CSP的安全性，因为攻击者可以通过注入内联脚本来绕过CSP。除非万不得已，否则不要使用'unsafe-inline'。
使用nonce来允许特定的内联脚本
```
Content-Security-Policy: default-src 'self'; script-src 'self' 'nonce-rAnd0m'; style-src 'self'; img-src 'self';
```
```
<script nonce="rAnd0m">
    // Your inline script here
</script>
```
Nonce是一个随机字符串，你需要在CSP策略中指定这个字符串，然后在HTML代码中为每个内联脚本添加nonce属性，并设置相同的值。只有nonce值匹配的内联脚本才能执行。这可以有效地防止攻击者注入恶意脚本。
使用hash来允许特定的内联脚本
```
Content-Security-Policy: default-src 'self'; script-src 'sha256-yourscriptHash'; style-src 'self'; img-src 'self';
```
你需要计算内联脚本的SHA256哈希值，然后在CSP策略中指定这个哈希值。只有哈希值匹配的内联脚本才能执行。这种方式比nonce更安全，因为即使攻击者知道了nonce值，也无法修改脚本的内容。
报告CSP违规行为
```
Content-Security-Policy: default-src 'self'; script-src 'self'; report-uri /csp-report;
```
这个策略指定了report-uri指令，当CSP策略被违反时，浏览器会向/csp-report发送一个POST请求，其中包含了违规的信息。你可以在服务器端接收这个请求，并将信息记录下来，以便分析和修复安全问题。

更好的方式是使用 report-to 指令，并且配合 Reporting-Endpoints HTTP 头：
```
Reporting-Endpoints: csp-endpoint="https://example.com/csp-report"
Content-Security-Policy: default-src 'self'; script-src 'self'; report-to csp-endpoint;
```
这样配置，违规报告会被发送到 https://example.com/csp-report。这种方式更加灵活，可以配置多个报告端点，并且可以控制报告的格式。

五、部署CSP：一步一个脚印

部署CSP是一个迭代的过程，不能一蹴而就。你需要逐步收紧策略，并密切关注CSP违规报告，以确保不会误伤正常功能。

Report-Only模式：先观察，不阻止

在开始正式启用CSP之前，建议先使用Content-Security-Policy-Report-Only头。这个头不会阻止任何资源加载，但会将CSP违规行为报告到指定的URL。
```
Content-Security-Policy-Report-Only: default-src 'self'; script-src 'self'; report-uri /csp-report;
```
通过分析CSP违规报告，你可以了解哪些资源违反了CSP策略，并据此调整策略，以避免误伤正常功能。
逐步收紧策略：从小到大

首先，可以从一个比较宽松的策略开始，比如只允许来自同源的资源。然后，逐步添加其他来源，比如CDN、字体服务器等。每次修改策略后，都要密切关注CSP违规报告，确保没有误伤正常功能。
监控和维护：持之以恒

CSP不是一劳永逸的。你需要定期检查CSP策略，并根据网站的变化进行调整。同时，也要密切关注CSP违规报告，及时发现和修复安全问题。

六、CSP的局限性：不要过度依赖

虽然CSP可以有效地防止XSS攻击和内容注入，但它并不是万能的。CSP只能阻止浏览器加载恶意资源，但无法阻止服务器端的漏洞。如果你的服务器端存在漏洞，攻击者仍然可以通过其他方式来攻击你的网站。

此外，CSP的配置也比较复杂，容易出错。如果CSP策略配置不当，可能会导致网站功能异常。因此，在使用CSP时，需要仔细阅读文档，并进行充分的测试。

七、实际代码示例：

假设我们有一个简单的HTML页面：

<!DOCTYPE html>
<html>
<head>
    <title>CSP Example</title>
    <style>
        body { font-family: sans-serif; }
    </style>
</head>
<body>
    <h1>Hello, CSP!</h1>
    <img src="image.jpg" alt="My Image">
    <script>
        console.log("Inline script running");
    </script>
</body>
</html>

要添加一个基本的 CSP，你可以通过服务器发送以下头部：

Content-Security-Policy: default-src 'self'; img-src 'self'; script-src 'self'; style-src 'self';

或者，你也可以使用 <meta> 标签：

<!DOCTYPE html>
<html>
<head>
    <title>CSP Example</title>
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src 'self'; script-src 'self'; style-src 'self';">
    <style>
        body { font-family: sans-serif; }
    </style>
</head>
<body>
    <h1>Hello, CSP!</h1>
    <img src="image.jpg" alt="My Image">
    <script>
        console.log("Inline script running");
    </script>
</body>
</html>

如果现在尝试加载来自外部源的图片，例如：

<img src="https://example.com/image.jpg" alt="My Image">

浏览器将会阻止该图片的加载，并在控制台中显示 CSP 违规。

为了允许来自 https://example.com 的图片，需要更新 CSP：

Content-Security-Policy: default-src 'self'; img-src 'self' https://example.com; script-src 'self'; style-src 'self';

或者使用 meta 标签:

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src 'self' https://example.com; script-src 'self'; style-src 'self';">

八、总结：

CSP是一个强大的安全机制，可以有效地防止XSS攻击和内容注入。但是，它并不是万能的，需要与其他安全措施结合使用。在使用CSP时，需要仔细阅读文档，并进行充分的测试。

记住，安全是一个持续的过程，需要不断学习和实践。希望今天的讲座能帮助你更好地理解和使用CSP，为你的网站保驾护航！

发表回复 取消回复

发表回复取消回复