csp需通过响应头显式配置script-src等指令并协同前端开发才能生效：禁用'unsafe-inline'和'unsafe-eval'，限制脚本来源为'self'或可信cdn，配合nonce机制、object-src 'none'、base-uri 'self'等指令及dom安全操作习惯共同防御注入攻击。
Content Security Policy（CSP）是HTML5中用于防御第三方脚本注入的核心机制，但它本身不“自动生效”，关键在于你如何配置响应头与前端行为协同配合。
明确禁止未授权的脚本来源
CSP通过script-src指令控制哪些脚本可以执行。默认情况下，浏览器允许所有来源，必须显式收紧：
- 用
'self'限定只加载同源脚本，例如：script-src 'self' - 如需引入CDN脚本，只写可信域名，如：
script-src 'self' https://cdn.example.com - 绝对禁用
'unsafe-inline'和'unsafe-eval'——它们会让内联<script></script>、onclick、eval()等绕过全部防护 - 避免使用通配符
*或data:、javascript:等危险协议
阻止内联脚本与动态执行
攻击者常通过innerHTML拼接、eval()、setTimeout(string)等方式注入代码。CSP需从源头切断：
- 移除所有
onclick="doSomething()"类内联事件，改用addEventListener - 禁用
document.write()和javascript:xxx跳转链接 - 若业务真需内联脚本（如统计代码），用
nonce机制：服务端生成唯一随机值（如nonce-AbCdEf123），在响应头中声明script-src 'self' 'nonce-AbCdEf123'，并在对应<script nonce="AbCdEf123"></script>标签中写入——浏览器只执行带匹配nonce的脚本
补充关键指令防止绕过路径
单靠script-src不够，攻击者可能通过其他载体注入执行逻辑：
-
object-src 'none'：禁止Flash、Java插件等旧式可执行内容 -
base-uri 'self'：防止恶意<base href="http://attacker.com">劫持所有相对URL -
form-action 'self'：阻止表单提交到第三方，缓解CSRF与数据外泄 -
frame-ancestors 'none'：防止页面被嵌入钓鱼iframe（点击劫持） -
report-uri /csp-report或report-to：收集违规请求，便于发现漏配或绕过尝试
配合前端开发习惯落地
CSP策略再严格，若前端仍用危险方式操作DOM，就形同虚设：
- 不用
innerHTML直接插入用户输入；优先用textContent，或手动转义后再用innerHTML - 解析URL参数时，校验
new URL(url).protocol，拒绝javascript:、data:等协议 - 富文本场景必须用
DOMPurify.sanitize()净化，而非简单正则过滤 - 框架中慎用
v-html（Vue）或dangerouslySetInnerHTML（React），启用前确保内容已净化
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
