前端CSP（内容安全策略）：防范XSS攻击的配置指南

内容安全策略（CSP）是一种通过白名单机制限制资源加载的安全策略，能有效防范XSS攻击。以下为详细配置方法及代码示例。

---

基本CSP配置

通过HTTP响应头或<meta>标签配置CSP。以下是一个严格的基础配置示例：

<!-- HTTP响应头示例 -->
Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self'; connect-src 'self'; frame-src 'none'; object-src 'none'<!-- 等效的<meta>标签示例 -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self'; connect-src 'self'; frame-src 'none'; object-src 'none'">

关键指令说明：

• default-src 'self'：默认仅允许同源资源
• script-src：控制脚本加载，需谨慎使用unsafe-inline
• style-src：限制CSS来源
• img-src：限制图片来源
• frame-src 'none'：禁止嵌套页面

---

生产环境推荐配置

Content-Security-Policy: default-src 'none';script-src 'self' 'sha256-abc123...' cdn.example.com;style-src 'self' 'unsafe-inline';img-src 'self' data: *.cdn.example.com;font-src 'self' fonts.googleapis.com;connect-src 'self' api.example.com;form-action 'self';base-uri 'self';frame-ancestors 'none'

安全增强措施：

• 使用哈希（sha256-）或随机数（nonce-）替代unsafe-inline
• 禁用unsafe-eval阻止动态代码执行
• frame-ancestors防止点击劫持
• form-action限制表单提交目标

---

非内联脚本处理方案

方案1：使用随机数（nonce）

<!-- 服务器生成随机数 -->
Content-Security-Policy: script-src 'nonce-abc123'<!-- 页面脚本标记 -->
<script nonce="abc123">// 允许执行的代码
</script>

方案2：使用哈希值

Content-Security-Policy: script-src 'sha256-abc123...'

---

动态内容安全处理

对于需要动态插入内容的场景，采用以下模式：

// 创建安全DOM节点
const div = document.createElement('div');
div.textContent = untrustedData;
document.body.appendChild(div);// 使用textContent而非innerHTML
element.textContent = dynamicContent;

---

报告违规行为

启用报告功能帮助调试：

Content-Security-Policy: default-src 'self'; report-uri https://example.com/csp-report
Content-Security-Policy-Report-Only: default-src 'self'; report-uri https://example.com/csp-report

报告示例（JSON格式）：

{"csp-report": {"document-uri": "https://example.com","violated-directive": "script-src","blocked-uri": "http://malicious.com","line-number": 10}
}

---

常见问题解决方案

Vue/React兼容方案：

script-src 'self' 'unsafe-eval'  # 仅开发环境需要
style-src 'self' 'unsafe-inline'  # 避免CSS-in-JS问题

CDN资源处理：

script-src 'self' https://cdn.jsdelivr.net
img-src 'self' https://*.amazonaws.com

WebSocket连接：

connect-src 'self' wss://api.example.com

---

注意事项

• 逐步部署建议先用Content-Security-Policy-Report-Only模式
• 避免过度使用unsafe-inline和unsafe-eval
• 定期审查CSP规则，移除不再需要的域名
• 使用CSP分析工具（如CSP Evaluator）检查配置有效性

通过合理配置CSP可显著降低XSS攻击风险，但需结合其他安全措施（如输入验证、输出编码）形成完整防护体系。