利用CSP防御存储型XSS攻击 - 完整技术指南

1. CSP基本概念

内容安全策略(Content Security Policy, CSP)是由谷歌提出的一项安全协议，通过服务器响应头部添加Content-Security-Policy:<policy-directive>;<policy-directive>来控制页面允许加载的内容资源。

2. CSP实施方式

2.1 通过HTTP响应头设置（推荐）

Content-Security-Policy: script-src static.tuyacn.com; default-src 'none'

2.2 通过HTML meta标签设置（有限制）

<meta http-equiv="Content-Security-Policy" content="script-src static.tuyacn.com">

注意：meta标签设置的CSP规则不能完全应用于meta标签本身和其所在页面，HTTP头方式更全面。

3. CSP防御存储型XSS原理

3.1 存储型XSS攻击流程

1. 攻击者将恶意脚本保存至后端
2. 后端返回含恶意脚本的内容给前端
3. 前端加载并执行恶意代码

3.2 CSP防御机制

通过严格限制脚本来源，即使恶意代码被注入到页面中，浏览器也会根据CSP策略阻止其执行。

4. 实战配置示例

4.1 基础配置

Content-Security-Policy: 
  script-src static.tuyacn.com; 
  default-src 'none';

4.2 效果验证

• 允许：从static.tuyacn.com加载的脚本
• 阻止：内联脚本(<script>alert(1)</script>)
• 阻止：来自其他域的脚本

5. 现代前端框架与CSP

5.1 React框架特点

• 使用hook或监听器处理事件
• 不依赖内联事件处理程序
• 主要逻辑在编译后的JS文件中

5.2 适配方案

Content-Security-Policy: 
  script-src static.tuyacn.com 'unsafe-eval'; 
  style-src 'self' 'unsafe-inline';
  default-src 'none';

注意：unsafe-eval仅在必要时启用，会降低安全性。

6. 高级防御策略

6.1 非典型防御场景

即使恶意脚本被插入到DOM中：

<script>alert(123456)</script>

CSP仍会阻止其执行，但DOM中仍存在该代码。

6.2 综合防护建议

1. 结合CSP和输入输出过滤
2. 使用React等现代框架的XSS防护机制
3. 启用CSP报告机制监控潜在攻击

7. 维护注意事项

1. 策略维护：CSP配置灵活但维护成本较高
2. 兼容性测试：新资源域添加需全面测试
3. 渐进部署：建议先使用Content-Security-Policy-Report-Only模式

8. 完整CSP配置示例

Content-Security-Policy: 
  default-src 'none';
  script-src static.tuyacn.com;
  style-src 'self' 'unsafe-inline';
  img-src 'self' data:;
  connect-src 'self';
  font-src 'self';
  frame-src 'none';
  report-uri /csp-report-endpoint;

9. 限制与补充

1. CSP不能替代其他安全措施
2. 需配合以下措施：
   • 输入验证
   • 输出编码
   • 使用安全框架
3. 某些旧浏览器可能不完全支持CSP

通过合理配置CSP，可以显著提高Web应用对存储型XSS攻击的防御能力，特别是在现代前端框架环境中。