Content Security Policy (CSP) 是什么？Web 安全的一道隐形护城河

CSP 是什么？

想象一下，你开了一家餐厅。门口有个保安，他手里有一份"允许进入的供应商名单"。只有名单上的人能进来送食材，名单外的谁也别想混进去。

CSP（Content Security Policy，内容安全策略）就是网页的"保安"。

它是浏览器支持的一种 HTTP 响应头，告诉浏览器：“这个页面只允许从这些地方加载脚本、图片、样式等资源。其他地方来的，一律拦截。”

没有 CSP 的页面就像没锁门的房子，谁都能往里塞东西。有了 CSP，页面就有了明确的边界。

CSP 有什么用？

CSP 最核心的作用就是防 XSS（跨站脚本攻击）。

XSS 攻击的原理很简单：黑客在页面上注入一段恶意 JavaScript 代码，你的浏览器信了，就去执行了。这段代码可能偷走你的登录凭证、篡改页面内容、甚至操控你的摄像头。

CSP 怎么防？它直接说：“这个页面只允许执行来自 cdn.example.com 的脚本，其他地方的脚本一律不跑。“黑客注入的恶意代码不在白名单里，浏览器直接拦截。

除了防 XSS，CSP 还能：

• 阻止内联脚本执行——很多网站把 JS 写在 HTML 的 <script> 标签里，CSP 可以直接禁止这种写法
• 限制资源加载来源——图片、字体、iframe 等都可以指定允许的域名
• 防止数据注入——通过 form-action 限制表单只能提交到指定地址
• 阻断不安全的请求——通过 upgrade-insecure-requests 自动把 HTTP 请求升级到 HTTPS

CSP 怎么用？

CSP 的配置写在一个 HTTP 响应头里，叫 Content-Security-Policy。

最简单的 CSP 长这样：

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

拆开来看：

• default-src 'self'——默认策略，只允许加载同源资源
• script-src 'self' https://cdn.example.com——脚本只允许从本站和指定的 CDN 加载
• style-src 'self' 'unsafe-inline'——样式允许同源和本地内联样式

常用指令一览：

特殊关键字说明：

• 'self'——只允许同源
• 'none'——完全禁止
• 'unsafe-inline'——允许内联脚本和样式（不推荐）
• 'unsafe-eval'——允许 eval()（非常不推荐）
• https:——允许任意 HTTPS 协议的来源

实际部署分三步：

第一步：先只报告不拦截。 把 Content-Security-Policy-Report-Only 加上，浏览器只会记录违规行为，不会真正拦截。这样你可以先看看现有页面有哪些问题。

第二步：分析报告，逐个修复。 检查 CSP 报告里的违规条目，把必要的第三方资源域名加入白名单，把内联脚本移到外部文件。

第三步：切换到正式模式。 去掉 -Report-Only 后缀，CSP 开始真正生效并拦截违规内容。

一个完整的 CSP 示例：

Content-Security-Policy: \
  default-src 'self'; \
  script-src 'self' https://cdn.jsdelivr.net https://unpkg.com; \
  style-src 'self' https://fonts.googleapis.com 'unsafe-inline'; \
  img-src 'self' https://images.example.com data:; \
  font-src 'self' https://fonts.gstatic.com; \
  connect-src 'self' https://api.example.com; \
  frame-src 'self' https://www.youtube.com; \
  object-src 'none'; \
  upgrade-insecure-requests

总结

CSP 不是万能的，但它确实是目前浏览器端最有效的 XSS 防御手段之一。很多大厂早就标配了 CSP，Google、GitHub、Twitter 都有严格的 CSP 策略。

配置 CSP 需要一点耐心——你得先搞清楚自己的页面引用了哪些第三方资源，然后一条条加到白名单里。但一旦配好，你的网站就多了一层实打实的安全保障。

如果你的网站还没加 CSP，可以从 Report-Only 模式开始试起。不用一步到位，慢慢调整就好。

你网站的 CSP 配好了吗？还是说还在用 'unsafe-inline' 偷懒？