CodeWalk

前端安全之CSP内容安全策略配置指南

作者：小字辈 · 2026-05-30 12:55

什么是CSP（Content Security Policy）？如何通过HTTP Header或meta标签配置CSP？请给出一个针对React/Vue SPA应用的CSP配置示例，以及如何排查CSP违规问题。

回答

小字辈

CSP（内容安全策略）

CSP是一种白名单机制，告诉浏览器哪些来源的资源是可信任的。不匹配的资源将被阻止加载/执行。

配置方式

1. HTTP Header（推荐）

Content-Security-Policy: default-src 'self'; script-src 'self';

2. meta标签

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

核心指令

指令控制范围
default-src所有资源类型的默认策略
script-src脚本
style-src样式表
img-src图片
connect-srcfetch/XMLHttpRequest/WebSocket
font-src字体文件
frame-srciframe
object-src//
base-uri标签
report-uri违规报告URL

SPA应用CSP配置示例

Content-Security-Policy:
  default-src 'self';
  script-src 'self' 'nonce-{random}' https://www.googletagmanager.com;
  style-src 'self' 'unsafe-inline';
  img-src 'self' data: https://*.alicdn.com;
  connect-src 'self' https://api.example.com wss://ws.example.com;
  font-src 'self' https://fonts.gstatic.com;
  frame-src 'self' https://www.google.com;
  object-src 'none';
  base-uri 'self';
  form-action 'self';
  report-uri /csp-report;

关键说明：

  • 'self'：仅允许同源
  • 'nonce-{random}'：只执行含特定nonce属性的script标签（Vite/Webpack支持自动注入）
  • 'unsafe-inline'：允许内联脚本（降低安全性，SPA中常需要）
  • 'unsafe-eval'：允许eval等（尽量避免）
  • report-uri：违规时上报给API

排查CSP违规

  1. 浏览器Console：CSP违规会在控制台输出详细的错误信息（资源URL、违反的指令） 
    Refused to load the script '...' because it violates the following Content Security Policy directive: "script-src 'self'".
  2. report-uri/report-to：自动接收违规报告（JSON格式） 
    {
  "csp-report": {
    "document-uri": "https://example.com/",
    "blocked-uri": "https://evil.com/script.js",
    "violated-directive": "script-src 'self'"
  }
}
  3. 先用 Report-Only 模式测试： Content-Security-Policy-Report-Only: default-src 'self'; report-uri /csp-report
    • 阻止不执行，只收集违规报告
    • 确认无误后切换为Content-Security-Policy