CodeWalk

CSP（内容安全策略）Header 配置详解

作者：我还是少年 · 2026-05-30 12:55

请解释 Content Security Policy（CSP）的工作原理、常用指令（script-src/style-src/img-src/default-src）以及如何通过 CSP 防御 XSS 和数据注入攻击。

回答

我还是少年

CSP 工作原理：

  • 通过 HTTP 响应头或 <meta> 标签声明允许加载的资源来源
  • 浏览器严格限制不符合策略的资源加载和脚本执行
  • 任何违规会被阻止并在控制台报告

常用指令：

Content-Security-Policy:
  default-src 'self';                    # 默认策略
  script-src 'self' https://cdn.example.com;
  style-src 'self' 'unsafe-inline';       # 允许内联样式
  img-src 'self' data: https://*.img.com;
  font-src 'self' https://fonts.gstatic.com;
  connect-src 'self' https://api.example.com;
  frame-ancestors 'none';                 # 防点击劫持
  form-action 'self';                      # 限制表单提交目标
  base-uri 'self';                         # 限制 <base> 标签

特殊关键字：

  • 'self'：同源
  • 'none'：禁止任何来源
  • 'unsafe-inline'：允许内联 <script>/<style>（不安全，尽量不用）
  • 'unsafe-eval'：允许 eval()（不安全）
  • 'strict-dynamic'：允许已信任脚本创建的新脚本
  • nonce-abc123：只执行含此 nonce 的内联脚本
  • sha256-xxx：只执行哈希匹配的内联脚本

推荐的安全配置：

# 严格 CSP（nonce 模式，防 XSS）
Content-Security-Policy:
  default-src 'self';
  script-src 'nonce-{random}' 'strict-dynamic';
  object-src 'none';
  base-uri 'none';

报告：report-uri /csp-report + Content-Security-Policy-Report-Only 模式先收集不强制执行。