CSP 头部生成器

使用步骤

1. 选择一个预设。Strict 对应 OWASP 的「strict CSP」推荐配置，Empty 让你从空白策略开始。
2. 切换模式。先用 Report-Only：浏览器只上报违规，不阻断真实用户。
3. 逐条指令：点击关键字芯片（‘self’、‘strict-dynamic’、‘none’）、协议芯片（https:、data:），或在输入框里写主机/路径后按 Enter。
4. 用hash 计算器为某段 inline script / style 生成 SHA-256/384/512 哈希；或点击 + nonce 生成一次性 nonce。
5. 切换输出页签复制需要的形式：HTTP header、HTML <meta>、Express (helmet)、Nginx add_header。

Strict CSP 起步配置

Strict 预设围绕三条规则展开：script-src 写 ‘self’ ‘strict-dynamic’，object-src 写 ‘none’，base-uri 写 ‘self’。再配合按请求生成的 nonce 或按脚本计算的 hash，足以拦下绝大多数反射型与存储型 XSS 注入。如果想进一步压制 phishing 类攻击，把 form-action 写成 ‘self’，frame-ancestors 写成 ‘none’。

容易踩的坑

• ’none’ 必须独占。 与其他源同列时，浏览器会把整条指令视为无效。
• frame-ancestors 仅在 HTTP 头部生效。 在 <meta> 里写它会被浏览器忽略，report-uri、report-to、sandbox 同理。
• hash / nonce 会让 ‘unsafe-inline’ 失效。 现代浏览器会优先采用更安全的策略。
• 务必声明 default-src。 缺失的 fetch 指令会回退到 default-src；没有它，未来新增的指令也得不到任何兜底。
• 自定义主机不能包含分号。 分号会终止策略，把后续指令一并破坏。

Hash 还是 Nonce？

对于静态内联内容（埋点片段、关键 CSS、服务端渲染的辅助脚本），用 hash。它和静态 HTML、边缘缓存兼容，不需要每次请求都生成新值。

对于动态渲染内容，用 nonce。服务端在头部里写 ‘nonce-XYZ’，并在所有 <script nonce=“XYZ”> 上盖同一个值。把 nonce 与 ‘strict-dynamic’ 组合使用，可以让被信任脚本的子脚本继承信任，而你不必维护庞大的主机白名单。

部署速查

• Nginx：把 Nginx 页签的内容粘贴到 server 块并 reload。always 标志让错误响应也带上头部。
• Apache：在 .htaccess 或 httpd.conf 里写 Header always set Content-Security-Policy ”…”。
• Express / Node：粘贴 helmet 片段。务必关闭 useDefaults，避免你的策略被 helmet 默认值悄悄合并。
• Cloudflare Pages / Vercel / Netlify：把 HTTP header 写进各自的 headers 配置（_headers、vercel.json、netlify.toml）。