前端安全的 Content Security Policy (CSP)：从理论到实战

前端安全的 Content Security Policy (CSP)从理论到实战为什么 CSP 如此重要在当今前端开发中安全问题已经成为不可忽视的重要因素。XSS跨站脚本攻击、CSRF跨站请求伪造等安全威胁时刻威胁着用户的安全和数据的完整性。Content Security Policy (CSP) 作为一种安全机制为网站提供了额外的保护层能够有效防止这些攻击。CSP 的核心优势防止 XSS 攻击限制脚本的执行来源防止恶意脚本注入减少 CSRF 风险限制表单提交和资源加载的来源提高网站安全性为网站提供额外的安全层增强用户信任保护用户数据和隐私符合安全标准满足现代 Web 安全要求CSP 基础1. 什么是 CSPContent Security Policy (CSP)是一种安全机制通过 HTTP 头或 meta 标签告诉浏览器哪些资源可以被加载和执行从而减少 XSS 等攻击的风险。基本原理浏览器根据 CSP 规则检查资源的来源只有符合规则的资源才会被加载和执行不符合规则的资源会被阻止并在控制台显示错误2. CSP 指令常用 CSP 指令指令描述示例default-src默认资源来源default-src selfscript-src脚本来源script-src self https://trusted.comstyle-src样式来源style-src self unsafe-inlineimg-src图片来源img-src self data:font-src字体来源font-src self https://fonts.googleapis.comconnect-srcAJAX 请求来源connect-src self https://api.example.comframe-src框架来源frame-src noneobject-src插件来源object-src noneform-action表单提交目标form-action selfbase-uribase 标签来源base-uri selfreport-uri违规报告地址report-uri /csp-report3. 实现方式通过 HTTP 头设置# Nginx 配置 add_header Content-Security-Policy default-src self; script-src self https://trusted.com; style-src self unsafe-inline;; # Apache 配置 Header set Content-Security-Policy default-src self; script-src self https://trusted.com; style-src self unsafe-inline; # Express.js 配置 app.use((req, res, next) { res.setHeader(Content-Security-Policy, default-src self; script-src self https://trusted.com; style-src self unsafe-inline;); next(); });通过 meta 标签设置meta http-equivContent-Security-Policy contentdefault-src self; script-src self https://trusted.com; style-src self unsafe-inline;CSP 高级配置1. 指令值常用指令值self允许来自同源的资源unsafe-inline允许内联脚本和样式unsafe-eval允许使用 eval() 等危险函数none不允许任何资源https:允许来自 HTTPS 协议的资源data:允许 data URI具体域名允许来自指定域名的资源示例# 允许来自同源的所有资源以及来自 trusted.com 的脚本 Content-Security-Policy: default-src self; script-src self https://trusted.com # 允许来自同源的脚本和样式以及内联样式 Content-Security-Policy: script-src self; style-src self unsafe-inline # 禁止所有插件 Content-Security-Policy: object-src none2. 报告模式报告模式允许 CSP 规则被监控但不强制执行适合在部署前测试# 报告模式 Content-Security-Policy-Report-Only: default-src self; script-src self https://trusted.com; report-uri /csp-report收集报告// Express.js 示例 app.post(/csp-report, (req, res) { console.log(CSP 违规报告:, req.body); // 存储报告到数据库或日志 res.status(204).send(); });3. 哈希和非ce 源使用哈希# 使用脚本哈希 Content-Security-Policy: script-src self sha256-abc123... # 使用样式哈希 Content-Security-Policy: style-src self sha256-def456...使用 nonce// 生成随机 nonce const nonce crypto.randomBytes(16).toString(base64); // 设置 CSP 头 res.setHeader(Content-Security-Policy, script-src self nonce-${nonce};); // 在脚本中使用 nonce script nonce${nonce} // 内联脚本 /script最佳实践1. 从严格到宽松建议的实施步骤使用报告模式先在报告模式下测试 CSP分析报告收集和分析违规报告调整规则根据报告调整 CSP 规则强制执行切换到强制执行模式持续监控定期检查违规报告2. 常见场景配置基本配置# 基本安全配置 Content-Security-Policy: default-src self; script-src self; style-src self unsafe-inline; img-src self data:; font-src self; connect-src self; frame-src none; object-src none; form-action self;包含 Google Analytics# 包含 Google Analytics Content-Security-Policy: default-src self; script-src self https://www.google-analytics.com; img-src self data: https://www.google-analytics.com; connect-src self https://www.google-analytics.com; style-src self unsafe-inline;包含 CDN# 包含 CDN Content-Security-Policy: default-src self; script-src self https://cdn.example.com; style-src self https://cdn.example.com; img-src self https://cdn.example.com data:; font-src self https://cdn.example.com;3. 避免常见错误常见错误过度使用 unsafe-inline允许所有内联脚本和样式降低安全性过度使用 unsafe-eval允许使用 eval() 等危险函数增加安全风险使用通配符 *允许来自任何域名的资源降低安全性忽略报告不收集和分析违规报告无法及时发现问题正确做法使用哈希或 nonce替代 unsafe-inline避免使用 eval()使用其他方式实现功能明确指定域名只允许来自可信域名的资源收集和分析报告及时发现和解决问题代码优化建议反模式!-- 不好的做法使用内联脚本 -- script // 内联脚本 function handleClick() { alert(Clicked!); } /script !-- 不好的做法使用内联样式 -- div stylecolor: red;Red text/div !-- 不好的做法使用 eval() -- script const code alert(Hello);; eval(code); /script# 不好的做法过度宽松的 CSP Content-Security-Policy: default-src *; script-src * unsafe-inline unsafe-eval; # 不好的做法不使用报告模式 Content-Security-Policy: default-src self; script-src self;正确做法!-- 好的做法使用外部脚本 -- script srcscript.js/script !-- 好的做法使用外部样式 -- link relstylesheet hrefstyles.css !-- 好的做法使用 nonce -- script nonce${nonce} // 内联脚本 /script !-- 好的做法避免使用 eval() -- script // 使用函数代替 eval() function executeCode(code) { return Function(code)(); } executeCode(alert(Hello);); /script# 好的做法使用报告模式测试 Content-Security-Policy-Report-Only: default-src self; script-src self; report-uri /csp-report # 好的做法使用哈希或 nonce Content-Security-Policy: default-src self; script-src self sha256-abc123...; style-src self sha256-def456...; # 好的做法明确指定域名 Content-Security-Policy: default-src self; script-src self https://trusted.com; style-src self https://trusted.com;常见问题及解决方案1. 内联脚本被阻止问题内联脚本被 CSP 阻止。解决方案使用外部脚本使用 nonce使用哈希2. 第三方脚本被阻止问题第三方脚本如 Google Analytics被 CSP 阻止。解决方案在 script-src 中添加第三方域名使用报告模式测试3. 样式被阻止问题内联样式或外部样式被 CSP 阻止。解决方案使用外部样式在 style-src 中添加 unsafe-inline仅用于内联样式使用 nonce 或哈希4. AJAX 请求被阻止问题AJAX 请求被 CSP 阻止。解决方案在 connect-src 中添加 API 域名使用相对路径5. 报告收集问题无法收集 CSP 违规报告。解决方案配置 report-uri实现报告收集端点使用第三方服务收集报告总结Content Security Policy (CSP) 是一种强大的安全机制能够有效防止 XSS 等攻击提高网站的安全性。通过合理的 CSP 配置可以为网站提供额外的安全层保护用户数据和隐私。在实际开发中应该根据项目的具体需求选择合适的 CSP 配置并遵循最佳实践确保网站的安全性。记住CSP 不是银弹它需要与其他安全措施如输入验证、输出转义等相结合才能构建真正安全的网站。推荐阅读Content Security Policy 官方文档CSP 最佳实践CSP 指令参考XSS 防护指南