内容安全策略 (CSP) 实施

中等 🟡前端安全

4 个标签

预计阅读时间：7 分钟

前端安全CSP内容安全策略安全配置

内容安全策略 (CSP) 实施

内容安全策略 (Content Security Policy, CSP) 是一种安全机制，通过指定哪些资源可以被加载和执行，从而减少 XSS 等攻击的风险。

CSP 基本概念

定义：

•浏览器安全机制

•通过 HTTP 头部或 meta 标签指定

•限制资源加载来源

•防止恶意脚本执行

目标：

•减少 XSS 攻击风险

•防止数据窃取

•提高网站安全性

•提供安全监控

工作原理：

•浏览器解析 CSP 指令

•验证资源加载请求

•阻止不符合策略的资源

•报告违规行为

CSP 指令

资源来源指令：

•default-src：默认资源来源

•script-src：脚本来源

•style-src：样式来源

•img-src：图片来源

•font-src：字体来源

•media-src：媒体来源

•connect-src：网络请求来源

•frame-src：框架来源

行为限制指令：

•script-src-elem：脚本元素来源

•script-src-attr：脚本属性来源

•style-src-elem：样式元素来源

•style-src-attr：样式属性来源

•base-uri：base 标签来源

•form-action：表单提交目标

•frame-ancestors：允许嵌入当前页面的来源

报告指令：

•report-uri：违规报告地址

•report-to：违规报告组

•report-sample：包含违规代码样本

CSP 实施策略

严格策略：

•仅允许受信任的来源

•禁止内联脚本

•禁止 eval() 等危险函数

•适合安全性要求高的网站

宽松策略：

•允许更多的来源

•可能允许内联脚本

•适合迁移阶段

•逐步收紧策略

迁移策略：

•首先使用 report-only 模式

•分析违规报告

•逐步调整策略

•最终启用强制模式

CSP 实施方法

HTTP 头部：

•Content-Security-Policy: 指令：Content-Security-Policy响应头是CSP的核心，用于指定允许加载资源的来源，主要指令包括default-src（默认来源）、script-src（脚本来源）、style-src（样式来源）、img-src（图片来源）、connect-src（连接来源）、font-src（字体来源）等，每个指令可以指定多个来源如'self'、'none'、'unsafe-inline'、https:等，合理配置CSP可以有效防御XSS和数据注入攻击

•Content-Security-Policy-Report-Only: 指令：Content-Security-Policy-Report-Only响应头用于测试CSP策略而不强制执行，当策略违规时会发送报告但不会阻止资源加载，非常适合在正式部署前测试CSP配置，通过report-uri或report-to指令指定报告接收地址，开发者可以查看哪些资源会被拦截据以调整策略

•服务器配置

•更灵活的控制

Meta 标签：

•

•客户端配置

•不支持 report-uri

•适合静态网站

配置示例：

Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted-cdn.com; style-src 'self' 'unsafe-inline'; img-src 'self' data:; report-uri /csp-report

CSP 最佳实践

资源管理：

•使用 CDN 时指定完整 URL

•避免使用 'unsafe-inline'

•避免使用 'unsafe-eval'

•使用 nonce 或 hash 允许特定内联脚本

报告机制：

•实施报告机制

•分析违规报告

•及时调整策略

•监控安全事件

框架集成：

•React：使用 dangerouslySetInnerHTML 时注意：React的dangerouslySetInnerHTML属性允许插入原始HTML内容，绕过React的自动转义机制，使用时必须先对内容进行严格的清理，可以使用DOMPurify等HTML清理库过滤恶意脚本，建议先评估是否真的需要使用dangerouslySetInnerHTML，尽量使用React组件化方式渲染内容

•Vue：v-html 指令的安全使用

•Angular：内置 CSP 支持：Angular框架内置了对内容安全策略的原生支持，可以通过Angular的Meta服务动态管理CSP策略，Angular的DomSanitizer提供了bypassSecurityTrustHtml、bypassSecurityTrustScript等方法用于安全地处理可信内容，使用这些方法时需要确保内容来源可靠，Angular还自动处理了大多数常见的XSS场景

•检查框架文档

测试与验证：

•使用 CSP 生成器

•测试不同浏览器兼容性

•验证策略效果

•监控用户体验

CSP 兼容性

浏览器支持：

•现代浏览器支持良好

•IE 11 部分支持

•移动浏览器支持

•检查 Can I Use

降级策略：

•不支持 CSP 的浏览器

•备用安全措施

•渐进增强

•安全优先

工具与资源

CSP 生成器：

•CSP Generator：CSP Generator是在线CSP策略生成工具，帮助开发者创建适合自己网站的CSP配置，通过图形界面选择需要允许的脚本、样式、图片等来源，自动生成CSP策略代码，支持导出为HTTP头或meta标签格式，适合不了解CSP语法的开发者快速入门

•CSP Evaluator：CSP Evaluator是Google提供的在线CSP分析工具，可以评估网站CSP策略的安全性，检查是否存在潜在的配置问题，提供改进建议，支持输入CSP策略字符串或URL进行评估，是检测CSP配置错误的利器，帮助开发者发现可能被绕过的配置

•Google CSP Tool：Google提供的CSP配置工具和文档资源，帮助网站配置和验证内容安全策略，Google的CSPEvaluator是其中最常用的工具，Google还提供了详细的CSP部署指南和最佳实践，是学习CSP配置的重要资源

•Mozilla Observatory：Mozilla Observatory是Mozilla提供的网站安全分析工具，可以评估网站的CSP、HSTS、Cookie安全等多项安全配置，给出安全评分和改进建议，支持一键扫描和详细的配置检查，是评估网站整体安全状况的实用工具

学习资源：

•MDN CSP 文档：Mozilla Developer Network提供的CSP完整文档，详细介绍了CSP的所有指令、语法、使用方法，提供了代码示例和最佳实践，是学习CSP的权威参考文档，适合开发者深入了解CSP的各个方面

•OWASP CSP 指南：OWASP组织发布的CSP配置最佳实践指南，详细介绍了如何正确配置CSP来防御各种Web攻击，提供了常见场景的配置示例和注意事项，是企业级应用配置CSP的重要参考

•Google Web Fundamentals

•安全社区论坛

案例分析

成功实施 CSP 的网站：

•Google

•Facebook

•Twitter

•大型金融网站

实施效果：

•XSS 攻击减少

•安全事件减少

•开发规范改善

•用户信任提升