内容安全策略 (CSP) 完全指南：从基础到生产部署

内容安全策略 (CSP) 是防御跨站脚本 (XSS) 攻击最有效的手段之一。通过告诉浏览器哪些资源可以加载，CSP 即使在应用存在漏洞时也能阻止恶意代码注入。

什么是 CSP，为什么重要？

CSP 是一个 HTTP 响应头，控制浏览器可以为给定页面加载哪些资源。没有 CSP，一个 XSS 漏洞就可能让攻击者注入脚本、窃取 Cookie、重定向用户或篡改网站。

CSP 工作原理

当浏览器收到 CSP 头时，会通过阻止违规资源来执行策略：

Browser receives HTTP response:
  Content-Security-Policy: default-src 'self'; script-src 'self' https://cdn.example.com

Browser allows:
  ✅ <script src="/app.js">              (same origin = 'self')
  ✅ <script src="https://cdn.example.com/lib.js">

Browser blocks:
  ❌ <script src="https://evil.com/steal.js">
  ❌ <script>alert('XSS')</script>       (inline = not allowed)

所有 CSP 指令

来源值说明

分步实施

步骤 1：从仅报告模式开始

先以仅报告模式部署 CSP，在不破坏网站的情况下识别违规：

Content-Security-Policy-Report-Only: default-src 'self'; report-uri /csp-report

步骤 3：构建策略

根据分析结果创建策略。从严格开始，按需放宽：

Content-Security-Policy:
  default-src 'self';
  script-src 'self' https://cdn.example.com;
  style-src 'self' 'unsafe-inline';
  img-src 'self' data: https:;
  font-src 'self' https://fonts.gstatic.com;
  connect-src 'self' https://api.example.com;
  frame-ancestors 'self';
  base-uri 'self';
  form-action 'self';
  object-src 'none';
  upgrade-insecure-requests

常见 CSP 配置

严格策略（最高安全性）

Content-Security-Policy:
  default-src 'none';
  script-src 'self';
  style-src 'self';
  img-src 'self';
  font-src 'self';
  connect-src 'self';
  base-uri 'self';
  form-action 'self';
  frame-ancestors 'none';
  object-src 'none';
  upgrade-insecure-requests

中等（典型 SPA）

Content-Security-Policy:
  default-src 'self';
  script-src 'self' 'unsafe-inline' 'unsafe-eval';
  style-src 'self' 'unsafe-inline';
  img-src 'self' data: blob: https:;
  font-src 'self' https://fonts.gstatic.com;
  connect-src 'self' https://api.example.com wss://ws.example.com;
  frame-ancestors 'self'

带 Google Analytics

Content-Security-Policy:
  default-src 'self';
  script-src 'self' https://www.googletagmanager.com https://www.google-analytics.com;
  img-src 'self' https://www.google-analytics.com https://www.googletagmanager.com;
  connect-src 'self' https://www.google-analytics.com https://analytics.google.com

实现方法

Nginx

add_header Content-Security-Policy "default-src 'self'; script-src 'self'" always;

Apache

Header set Content-Security-Policy "default-src 'self'; script-src 'self'"

Express.js

// Using helmet middleware (recommended)
const helmet = require('helmet');
app.use(helmet.contentSecurityPolicy({
  directives: {
    defaultSrc: ["'self'"],
    scriptSrc: ["'self'", "https://cdn.example.com"],
    styleSrc: ["'self'", "'unsafe-inline'"],
    imgSrc: ["'self'", "data:", "https:"],
  }
}));

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

HTML Meta 标签

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

常见 CSP 错误

常见问题