CSP测试全攻略从配置到实战问题解决的经验分享

直接上手：CSP的基本用法

最近在项目里折腾了一下CSP（Content Security Policy），说真的，这玩意刚开始接触还挺让人头疼的。不过现在回过头看，其实核心就那么几个关键点。我先给你一段可以直接用的基础代码：

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

这段代码的意思是：默认只允许加载同源资源，脚本可以额外从https://jztheme.com加载，样式支持内联样式。 亲测有效，建议直接用这种方式快速上手。

踩坑提醒：这三点一定注意

在实际使用过程中，有几个地方特别容易踩坑，我简单总结一下：

• 不要漏掉必要的指令。 比如你用了Google Analytics或者一些第三方库，但没加对应的script-src，那页面加载时这些脚本就会被拦截。我就因为这个原因折腾了半天才发现问题。
• inline脚本和样式的处理。 默认情况下，CSP会禁止所有的内联脚本和样式。如果你需要支持，得显式加上'unsafe-inline'，但这也有安全风险，所以建议尽量避免内联脚本。
• 调试工具的支持。 CSP配置错误的时候，浏览器控制台会报错，但有时候报错信息不够明确。比如有一次我写错了域名格式，浏览器只是提示“Refused to load”，并没有具体说明哪里有问题。

多种场景下的CSP配置

不同的场景下，CSP的配置需求也会有所不同。下面我举几个常见的例子，附带完整的代码。

场景一：全站HTTPS

如果网站强制使用HTTPS，可以用以下配置：

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests; default-src https:; script-src https: 'self'; style-src https: 'self';">

这里的关键是upgrade-insecure-requests，它会自动把HTTP请求升级为HTTPS。我之前在一个老项目里用了这个配置，解决了不少混合内容的问题。

场景二：允许CDN资源

如果你的项目依赖CDN资源，比如jQuery、Bootstrap等，记得加上对应的域名：

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://cdn.jsdelivr.net; style-src 'self' https://cdn.jsdelivr.net;">

这里我用的是jsDelivr的CDN地址，你可以根据实际情况替换为你用的CDN域名。

场景三：动态加载内容

对于一些动态加载的内容，比如AJAX请求或者iframe嵌套，可以这样配置：

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; connect-src 'self' https://jztheme.com; frame-src 'self' https://example-frame.com;">

这里的connect-src用于限制AJAX请求的目标，frame-src则是针对iframe的。我在一个项目里用这个配置解决了跨域iframe的安全问题。

高级技巧：报告机制

CSP还有一个非常实用的功能，就是可以开启报告机制，用来监控哪些资源被拦截了。配置起来也很简单：

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; report-uri /csp-report-endpoint;">

这里的report-uri指定一个接口地址，所有被拦截的请求都会发送到这个接口。我之前用Node.js写了一个简单的接收服务：

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

app.use(express.json());

app.post('/csp-report-endpoint', (req, res) => {
  console.log('CSP Violation Report:', req.body);
  res.status(204).end();
});

app.listen(3000, () => {
  console.log('CSP report server running on port 3000');
});

通过这种方式，你可以轻松监控CSP的实际效果，及时调整配置。

背景知识：CSP到底是什么？

稍微补充一下CSP的背景知识吧。CSP全称Content Security Policy，是一种用来防止XSS攻击和其他代码注入的安全机制。简单来说，它通过限制页面可以加载哪些资源，来减少恶意代码执行的可能性。

比如，有些黑客会通过注入恶意脚本来窃取用户数据，而CSP可以通过限制脚本来源来阻止这种攻击。虽然配置起来有点麻烦，但从长远来看，对项目安全性提升还是很有帮助的。

结尾：还有更多玩法

以上是我个人对CSP测试的完整讲解，当然，这个技术的拓展用法还有很多，比如结合非ces框架做更细粒度的控制，或者用CSP配合其他安全策略一起使用。后续我会继续分享这类博客，有更优的实现方式欢迎评论区交流。