你知道CSP吗

在前端与 Web 安全领域，CSP（Content Security Policy，内容安全策略） 是一种安全机制，用来帮助开发者防止 XSS（跨站脚本攻击） 和 数据注入攻击。

它的核心思想是：由服务器通过 HTTP Header 或 <meta> 标签，告诉浏览器“哪些资源可以加载和执行”，从而限制恶意脚本的注入和运行。

CSP 的核心原理

• 默认阻止一切资源，只允许策略中明确声明的来源。
• 可以控制的内容包括：
  • 脚本 (script-src)
  • 样式 (style-src)
  • 图片 (img-src)
  • 字体 (font-src)
  • 连接请求 (connect-src)
  • 框架 (frame-src)
    等等。

常见配置示例

1. 仅允许同源脚本执行

textContent-Security-Policy: script-src 'self'

2. 允许加载某个 CDN 的脚本

textContent-Security-Policy: script-src 'self' https://cdn.example.com

3. 禁止内联脚本和 eval（非常常见的安全手段）

textContent-Security-Policy: script-src 'self'; unsafe-inline; unsafe-eval;

4. 作为 <meta> 配置也可用

xml<meta http-equiv="Content-Security-Policy" content="default-src 'self'">

优点

• 有效防止大多数 XSS 攻击。
• 能限制外部恶意资源的加载。
• 提升整体前端安全性。

缺点

• 配置较为复杂，容易误伤合法资源。
• 对遗留系统改造成本较高（因为可能有大量内联脚本被 CSP 拦截）。

CSP只能防止XSS吗

CSP 不仅仅能防止 XSS，它的能力比单纯防 XSS 更广泛，可以看作是一个通用的 前端资源安全白名单机制。

可以防御的安全问题

• XSS（跨站脚本攻击）：最主要的用途，阻止恶意脚本注入执行。
• 数据注入攻击：防止攻击者通过恶意第三方资源（脚本/样式/图片）进行数据操纵。
• 点击劫持（Clickjacking）：通过 frame-ancestors 限制网页能否被嵌入到 <iframe> 内。
• 混合内容攻击：通过 CSP 可以要求所有资源必须通过 HTTPS 加载，避免 HTTPS 页面里被注入 HTTP 资源。
• 数据泄露：通过 connect-src 限制浏览器只能与受信任的域名通信，避免攻击者把用户隐私数据偷偷上传。

CSP 的关键能力

• 请求来源白名单：控制哪些域名的资源可以加载（防范恶意外链）。
• 执行策略控制：禁止内联脚本（unsafe-inline）、禁止 eval 类动态执行。
• HTTPS 强制：强制所有请求必须走 HTTPS（防止中间人攻击）。
• 上报机制：通过 report-uri 或 report-to，收集违规行为日志。

总结

CSP 的确 主要目标是防止 XSS，但它的安全覆盖面更大，还能起到防止点击劫持、数据泄露、混合内容等作用，是 Web 应用整体安全防护的重要组成部分。