🛡️CSP：你知道它能轻松搞定XSS攻击吗？

前言

Hello~大家好。我是秋天的一阵风

在开发网站时，安全问题总是让人头疼，尤其是XSS攻击，防不胜防。

内容安全策略（Content Security Policy，简称 CSP） 就像是网站的"安全卫士"，能有效抵御这些威胁。但很多开发者对它了解有限，甚至觉得配置起来很麻烦。其实，CSP并不复杂，只要掌握正确的方法，就能为网站筑牢安全防线。今天，咱们就来好好聊聊CSP，看看它是怎么工作的，以及如何在项目中用好它。

在介绍CSP之前，我们来简单回顾下XSS攻击的相关知识。

一、XSS 攻击：（Cross-Site Scripting -跨站脚本攻击）

XSS 攻击是一种常见的 Web 安全漏洞，攻击者通过在 Web 页面中注入恶意脚本，当这些脚本被浏览器执行时，攻击者可以窃取用户的 Cookie、会话信息、敏感数据，甚至劫持用户的会话。XSS 攻击通常分为三种类型：存储型 XSS 、反射型 XSS和基于DOM类型。

1. 存储型 XSS 攻击

存储型 XSS 攻击是指攻击者将恶意脚本存储在服务器的数据库或文件中，当其他用户访问这些数据时，恶意脚本会被执行。例如，攻击者在论坛的帖子中插入恶意脚本，当其他用户查看该帖子时，脚本就会被触发。

假设有一个简单的博客系统，用户可以在评论区发表评论。攻击者可能会提交一个包含恶意脚本的评论，例如：

js 复制代码

<script>alert('XSS攻击成功！');</script>

当其他用户访问该博客页面时，服务器会从数据库中读取评论内容并显示在页面上。如果服务器没有对这些内容进行适当的处理，浏览器会自动执行这段恶意脚本，弹出一个警告框，这就是存储型XSS攻击。

2. 反射型 XSS 攻击

反射型 XSS 攻击是指攻击者通过 URL 参数或表单提交将恶意脚本发送到服务器，服务器将这些脚本反射回用户的浏览器，从而执行恶意脚本。例如，攻击者通过构造一个带有恶意脚本的 URL，诱导用户点击，当用户访问该 URL 时，恶意脚本就会被触发。

假设有一个简单的 Web 应用，用户可以通过 URL 参数提交搜索内容。以下是该应用的代码示例：

HTML 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Search</title>
</head>
<body>
    <h1>Search Results</h1>
    <p>You searched for: <span id="search-term"></span></p>
    <script>
        const searchTerm = new URLSearchParams(window.location.search).get('q');
        document.getElementById('search-term').textContent = searchTerm;
    </script>
</body>
</html>

如果用户访问以下 URL：

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

浏览器会弹出一个警告框，显示 XSS。这是因为恶意脚本 <script>alert('XSS')</script> 被直接插入到页面中并执行了。

3. 基于DOM的XSS攻击

基于DOM的XSS攻击是一种特殊的跨站脚本攻击，它通过操作DOM（文档对象模型）来注入恶意脚本，而不是直接通过服务器端代码注入。这种攻击方式通常利用客户端JavaScript代码动态修改页面内容，从而绕过传统的服务器端XSS防护措施。

假设有一个简单的网页，它使用JavaScript动态显示用户输入的内容：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基于DOM的XSS示例</title>
</head>
<body>
    <input type="text" id="userInput" placeholder="请输入内容">
    <button onclick="displayMessage()">显示消息</button>
    <div id="message"></div>

    <script>
        function displayMessage() {
            var userInput = document.getElementById('userInput').value;
            document.getElementById('message').innerHTML = userInput;
        }
    </script>
</body>
</html>

在这个示例中，用户输入的内容会被直接插入到<div id="message"></div>中。如果用户输入的是恶意脚本，比如：

js 复制代码

<script>alert('XSS攻击成功！');</script>

当用户点击"显示消息"按钮时，displayMessage函数会将用户输入的内容插入到页面的DOM中，浏览器会自动执行这段脚本，弹出一个警告框，这就是基于DOM的XSS攻击。

二、CSP：抵御 XSS 攻击的坚固防线

内容安全策略（CSP）是一种额外的安全层，它通过指定哪些内容可以加载和执行，帮助开发者防止 XSS 攻击。CSP 通过 HTTP 响应头 Content-Security-Policy 来定义安全策略，这些策略可以限制页面加载的资源、执行的脚本、插入的内联样式等。

1. CSP 的基本原理

CSP 的核心思想是限制页面可以加载和执行的资源。开发者可以通过定义策略来指定哪些资源是可信的，哪些是不可信的。例如，CSP 可以禁止执行内联脚本，从而防止 XSS 攻击。

2. 开启 CSP 策略

（1）通过`<meta>`标签来开启CSP

在HTML文档的<head>部分添加一个<meta>标签，指定http-equiv属性为Content-Security-Policy，并通过content属性设置具体的CSP策略。例如：

html 复制代码

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

这个例子中，CSP策略规定：

默认情况下，只允许加载来自当前页面所在源（'self'）的资源（default-src 'self'）。
允许加载来自当前页面所在源以及https://trusted-source.com的脚本（script-src 'self' https://trusted-source.com）。
允许加载来自当前页面所在源以及https://trusted-styles.com的样式表（style-src 'self' https://trusted-styles.com

需要注意的是，通过<meta>标签设置CSP存在一些限制。例如，某些CSP指令（如frame-ancestors和report-uri）无法通过<meta>标签设置。此外，对于多页面网站，每个页面都需要包含一个<meta>标签来定义CSP策略

（2）通过设置响应头`Content-Security-Policy` 开启CSP

除了meta标签以外，我们还可以通过 HTTP 响应头 Content-Security-Policy 定义。以下是一个简单的 CSP 策略示例：

http 复制代码

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

default-src 'self'：默认情况下，只允许加载来自当前域的资源。
script-src 'self' https://trustedscripts.com：只允许加载来自当前域和 https://trustedscripts.com 的脚本。
style-src 'self' https://trustedstyles.com：只允许加载来自当前域和 https://trustedstyles.com 的样式。

具体代码实现

我们可以通过服务器端代码来设置 CSP 响应头。以下是使用 Node.js 和 Express 设置 CSP 的示例：

JavaScript 复制代码

const express = require('express');
const app = express();

app.use((req, res, next) => {
    res.setHeader('Content-Security-Policy', "default-src 'self'; script-src 'self'; style-src 'self'");
    next();
});

app.get('/search', (req, res) => {
    const searchTerm = req.query.q;
    res.send(`
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Search</title>
        </head>
        <body>
            <h1>Search Results</h1>
            <p>You searched for: <span id="search-term">${searchTerm}</span></p>
        </body>
        </html>
    `);
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

三、CSP 的缺陷

1. CSP 的兼容性

CSP 在现代浏览器中得到了广泛支持，但是在IE中是不支持的。

2. WordPress 插件和主题的兼容性问题：

在 WordPress 中，一些插件和主题可能会因为 CSP 策略而无法正常工作。例如，某些插件可能依赖于 eval() 或内联脚本，而这些在严格的 CSP 策略下会被阻止。

3. 内联脚本和样式：

CSP 策略通常会禁止内联脚本和样式，这可能会导致一些旧代码或第三方库出现问题。