利用CSP防御存储型XSS攻击 - 完整技术指南<\/h1>

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

2. CSP实施方式<\/h2>
2.1 通过HTTP响应头设置（推荐）<\/h3>
Content-Security-Policy: script-src static.tuyacn.com; default-src 'none'
<\/span><\/span><\/span><\/code><\/pre>2.2 通过HTML meta标签设置（有限制）<\/h3>
<meta<\/span> http-equiv<\/span>=<\/span>"Content-Security-Policy"<\/span> content<\/span>=<\/span>"script-src static.tuyacn.com"<\/span>>
<\/span><\/span><\/code><\/pre>注意<\/strong>：meta标签设置的CSP规则不能完全应用于meta标签本身和其所在页面，HTTP头方式更全面。<\/p>
3. CSP防御存储型XSS原理<\/h2>
3.1 存储型XSS攻击流程<\/h3>

攻击者将恶意脚本保存至后端<\/li>
后端返回含恶意脚本的内容给前端<\/li>
前端加载并执行恶意代码<\/li>
<\/ol>
3.2 CSP防御机制<\/h3>
通过严格限制脚本来源，即使恶意代码被注入到页面中，浏览器也会根据CSP策略阻止其执行。<\/p>
4. 实战配置示例<\/h2>
4.1 基础配置<\/h3>
Content-Security-Policy: 
<\/span><\/span><\/span>  script-src static.tuyacn.com; 
<\/span><\/span><\/span>  default-src 'none';
<\/span><\/span><\/span><\/code><\/pre>4.2 效果验证<\/h3>

允许：从static.tuyacn.com<\/code>加载的脚本<\/li>
阻止：内联脚本(<script>alert(1)<\/script><\/code>)<\/li>
阻止：来自其他域的脚本<\/li>
<\/ul>
5. 现代前端框架与CSP<\/h2>
5.1 React框架特点<\/h3>

使用hook或监听器处理事件<\/li>
不依赖内联事件处理程序<\/li>
主要逻辑在编译后的JS文件中<\/li>
<\/ul>
5.2 适配方案<\/h3>
Content-Security-Policy: 
<\/span><\/span><\/span>  script-src static.tuyacn.com 'unsafe-eval'; 
<\/span><\/span><\/span>  style-src 'self' 'unsafe-inline';
<\/span><\/span><\/span>  default-src 'none';
<\/span><\/span><\/span><\/code><\/pre>注意<\/strong>：unsafe-eval<\/code>仅在必要时启用，会降低安全性。<\/p>
6. 高级防御策略<\/h2>
6.1 非典型防御场景<\/h3>
即使恶意脚本被插入到DOM中：<\/p>
<script<\/span>>alert<\/span>(123456<\/span>)<\/script<\/span>>
<\/span><\/span><\/code><\/pre>CSP仍会阻止其执行，但DOM中仍存在该代码。<\/p>
6.2 综合防护建议<\/h3>

结合CSP和输入输出过滤<\/li>
使用React等现代框架的XSS防护机制<\/li>
启用CSP报告机制监控潜在攻击<\/li>
<\/ol>
7. 维护注意事项<\/h2>

策略维护<\/strong>：CSP配置灵活但维护成本较高<\/li>
兼容性测试<\/strong>：新资源域添加需全面测试<\/li>
渐进部署<\/strong>：建议先使用Content-Security-Policy-Report-Only<\/code>模式<\/li>
<\/ol>
8. 完整CSP配置示例<\/h2>
Content-Security-Policy: 
<\/span><\/span><\/span>  default-src 'none';
<\/span><\/span><\/span>  script-src static.tuyacn.com;
<\/span><\/span><\/span>  style-src 'self' 'unsafe-inline';
<\/span><\/span><\/span>  img-src 'self' data:;
<\/span><\/span><\/span>  connect-src 'self';
<\/span><\/span><\/span>  font-src 'self';
<\/span><\/span><\/span>  frame-src 'none';
<\/span><\/span><\/span>  report-uri \/csp-report-endpoint;
<\/span><\/span><\/span><\/code><\/pre>9. 限制与补充<\/h2>

CSP不能替代其他安全措施<\/li>
需配合以下措施：

输入验证<\/li>
输出编码<\/li>
使用安全框架<\/li>
<\/ul>
<\/li>
某些旧浏览器可能不完全支持CSP<\/li>
<\/ol>
通过合理配置CSP，可以显著提高Web应用对存储型XSS攻击的防御能力，特别是在现代前端框架环境中。<\/p>

利用CSP防御存储型XSS攻击 - 完整技术指南<\/h1>

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

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

4. 实战配置示例<\/h2>

5. 现代前端框架与CSP<\/h2>

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

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