CSP 安全头怎么配置？script-src、img-src、connect-src 实用指南
Content-Security-Policy 可以减少 XSS 风险，但配置太严会让网站资源加载失败。这里用常见场景讲 CSP 安全头怎么逐步配置。
打开配套工具 →Content-Security-Policy，简称 CSP，是网站安全里很重要的一类响应头。它可以限制页面允许加载哪些脚本、样式、图片、接口和 iframe，从而降低 XSS 等风险。
但 CSP 也不能随手复制。配置太松没意义，配置太严会让网站脚本、图片、统计代码全部挂掉。你可以用 CSP 安全头生成器 先生成草稿，再逐步测试。
CSP 解决什么问题
如果页面被插入恶意脚本，CSP 可以让浏览器拒绝加载不在白名单里的脚本来源。
例如：
Content-Security-Policy: default-src 'self'; script-src 'self'意思是默认只允许本站资源，脚本也只允许本站。
这不能替代输入过滤和后端安全，但可以作为浏览器层面的防线。
常见指令怎么看
常用指令：
default-src：默认资源来源。script-src：脚本来源。style-src：样式来源。img-src：图片来源。font-src：字体来源。connect-src：接口、WebSocket、fetch 连接来源。frame-src：iframe 来源。report-uri/report-to：违规报告地址。
如果没有单独设置某个指令，浏览器会回退到 default-src。
从 Report-Only 开始更稳
生产站不要一上来就强制 CSP。建议先使用：
Content-Security-Policy-Report-Only: ...Report-Only 只报告违规，不拦截资源。你可以先观察哪些资源会被拦，再逐步收紧。
确认没有误伤后，再切换到：
Content-Security-Policy: ...script-src 最容易出问题
script-src 是最关键也最容易出问题的指令。
常见来源包括：
- 本站脚本：
'self' - CDN
- 统计工具
- 客服插件
- 支付 SDK
不建议长期依赖 'unsafe-inline'，因为它会削弱 CSP 的价值。如果项目需要内联脚本，可以考虑 nonce 或 hash，但实现要和框架配合。
connect-src 别忘了接口域名
前端请求 API、上传、WebSocket、监控上报，都可能走 connect-src。
如果接口突然请求失败，Network 显示被 CSP 拦截，可以检查 connect-src 是否包含：
- API 域名。
- 监控上报域名。
- WebSocket 域名。
- 第三方服务域名。
这类错误经常被误判为接口挂了。
图片和字体也要单独看
很多站点图片来自对象存储或 CDN，字体来自字体服务。如果 img-src、font-src 太严格，就会出现图片不显示、字体回退。
常见配置会包含：
img-src 'self' data: https:;
font-src 'self' data:;是否允许 data: 要看业务需要。比如内联 SVG、Base64 图片、字体文件可能会用到。
配置流程建议
- 先列出网站实际资源来源。
- 用 CSP 安全头生成器 生成初稿。
- 先用 Report-Only。
- 打开主要页面、登录、支付、上传、后台功能。
- 查看控制台 CSP 报错。
- 收紧或补充来源。
- 再切换为强制 CSP。
总结
CSP 是很有价值的安全头，但它需要按网站实际资源配置。不要照搬别人的策略，也不要为了省事全部放开。
如果你要开始配置，可以先用 CSP 安全头生成器 做草稿，再通过 Report-Only 和控制台错误逐步验证。