配置CSP是防御XSS的核心措施，通过设置Content-Security-Policy响应头限制资源加载源，如default-src 'self'、script-src 'self'并禁用'unsafe-inline'，可有效阻止恶意脚本执行，结合report-uri上报违规行为，提升网站安全性。
防止XSS攻击是前端开发中不可忽视的重要环节，而配置HTML在线安全策略（Content Security Policy，简称CSP）是最有效的手段之一。通过合理设置CSP，可以显著降低恶意脚本注入和执行的风险。
什么是Content Security Policy（CSP）
CSP是一种由浏览器支持的安全机制，它允许网站明确声明哪些资源可以被加载和执行。比如：只允许来自自身域名的JavaScript，禁止内联脚本等。这样即使攻击者成功注入了脚本，浏览器也不会执行它。
CSP可以通过HTTP响应头或meta标签来配置，推荐使用HTTP头方式，更灵活且安全性更高。
如何配置CSP HTTP响应头
在服务器端设置Content-Security-Policy响应头，定义资源加载规则。以下是一个基础但实用的配置示例：
立即学习“前端免费学习笔记（深入）”；
<font face="Courier New"> 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'; object-src 'none'; frame-ancestors 'self'; </font>
说明：
- default-src 'self'：默认只允许同源资源
-
script-src：限制JS来源，建议移除
'unsafe-inline'和'unsafe-eval'以增强防护 -
style-src：允许内联样式时需包含
'unsafe-inline'，但应尽量避免 - img-src：允许同源图片和data URI（如小图标）
- object-src 'none'：禁用插件如Flash，提升安全性
- frame-ancestors 'self'：防止点击劫持，禁止被嵌套在其他网站的iframe中
若使用CDN加载jQuery等资源，需将对应域名加入白名单：
<font face="Courier New"> script-src 'self' https://cdn.jsdelivr.net; </font>
避免内联脚本与动态执行
XSS常利用内联事件（如<button onclick="...">）或eval()执行恶意代码。CSP可通过禁止'unsafe-inline'来阻断此类行为。
改进建议：
- 将所有JavaScript移到外部文件中
- 使用
addEventListener代替onclick等内联事件 - 避免使用
innerHTML拼接用户输入，改用textContent或模板转义
启用报告机制监控违规行为
可配置report-uri或report-to指令，让浏览器在检测到违反CSP的行为时发送报告。
<font face="Courier New"> Content-Security-Policy: default-src 'self'; report-uri /csp-report-endpoint; </font>
后端可接收这些报告，用于发现潜在攻击或误配策略，便于及时调整。
部署初期建议使用Content-Security-Policy-Report-Only模式，仅记录不阻止，避免影响正常功能。
配置CSP是防御XSS的核心措施之一。关键是减少对'unsafe-inline'和'unsafe-eval'的依赖，严格控制资源加载源，并结合输入过滤与输出编码。配合报告机制，能实现主动监控与持续优化。基本上就这些，不复杂但容易忽略细节。做好这一步，网站安全性会大幅提升。
