Content-Security-Policy（CSP）是防止XSS、恶意脚本注入和第三方劫持的核心机制，必须配置在HTTPS server块顶层并加always参数，从default-src 'none'起步，分Report-Only灰度上线，协同HSTS等头形成安全闭环。
HTTPS 本身只加密传输，不控制页面能加载什么资源。真正防止 XSS、恶意脚本注入、第三方劫持的，是 Content-Security-Policy（CSP）。它必须和 HTTPS 配合使用，且配置位置、写法、上线节奏都直接影响效果和稳定性。
必须放在 HTTPS server 块顶层，加 always 参数
CSP 头只在启用 SSL 的 server { listen 443 ssl; } 块里生效，不能写在全局 http{} 或 HTTP 的 80 端口块中。否则可能误作用于非加密站点，或被浏览器忽略。
- ✅ 正确位置：SSL 证书配置下方、所有
location块之外 - ❌ 错误做法：嵌套在
location /api { }里（除非你明确需要接口级差异化策略） - 必须加
always：用add_header Content-Security-Policy "..." always;，确保 301、404、500 等所有状态码都携带该头，避免错误页失去防护
从 default-src 'none' 起步，按需放开
宽松策略等于没设。起点应是彻底禁止，再逐类授权真实需要的资源：
-
default-src 'none'—— 拒绝一切，默认兜底 -
script-src 'self' 'unsafe-inline'—— 同源 JS + 内联脚本（如 Vue 模板、统计代码），生产环境建议改用 nonce 或哈希校验替代'unsafe-inline' -
style-src 'self' 'unsafe-inline'—— 多数前端框架依赖内联样式，可先放开；长期建议提取为外部 CSS -
img-src 'self' data:—— 支持同源图片和 base64 图标 -
font-src 'self' fonts.gstatic.com—— 若用了 Google Fonts，必须显式添加 -
connect-src 'self' https://api.example.com—— 明确声明 AJAX、fetch、WebSocket 目标域名
先用 Report-Only 模式灰度上线
直接启用拦截模式容易导致白屏或功能异常。推荐分两阶段：
- 第一阶段：把头换成
Content-Security-Policy-Report-Only，并配report-uri /csp-report接收违规日志（Nginx 中需增加对应location /csp-report处理 POST） - 观察 7–14 天，检查浏览器 Console 和后端日志，确认所有合法资源都被覆盖
- 第二阶段：将
-Report-Only改为正式头，report-uri可保留用于持续监控
协同其他安全头形成闭环
CSP 不是孤立策略，需与 HSTS、X-Content-Type-Options 等配合使用：
-
add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;—— 强制后续访问走 HTTPS，防止降级 -
add_header X-Content-Type-Options "nosniff" always;—— 阻止浏览器 MIME 类型嗅探，防资源误执行 -
add_header X-Frame-Options "DENY" always;—— 防点击劫持 - 所有头统一加
always，确保全状态码覆盖
