如何定位触发CSP(Content Security Policy)脚本拦截错误的具体脚本

你遇到的报错本质是有脚本执行了内联代码逻辑（包括外部脚本动态插入内联script标签、调用eval/Function构造函数等动态执行逻辑），触发了你的CSP拦截规则，可通过以下方式快速定位：

• 查看浏览器控制台报错详情
  打开Chrome/Edge等浏览器的DevTools（按F12唤起），先进入DevTools设置页，勾选「Show CSP errors in issues tab」选项，再回到控制台面板，点击当前报错信息左侧的展开箭头。多数情况下被折叠的详情中会直接显示触发报错的文件路径、对应行号。
• 切换CSP为仅报告模式
  将你当前的CSP响应头从Content-Security-Policy修改为Content-Security-Policy-Report-Only，该模式下CSP不会真的拦截资源，只会将所有违规行为的详细信息（触发源、违规内容、行号）上报到控制台，不会因为拦截导致上下文信息丢失。定位完成后再改回拦截模式即可。
• 二分法排查外部脚本
  先注释掉页面中一半的外部script引用，刷新页面观察报错是否消失：
  • 若报错消失，说明触发问题的脚本在被注释的半区
  • 若报错保留，说明触发问题的脚本在未注释的半区
    重复这个筛选逻辑，最多5次就能从20个脚本里定位到具体的问题文件。
• 监听CSP违规事件主动打印信息
  临时在CSP的script-src指令中加入'unsafe-inline'，然后在页面最开头插入如下代码：

  document.addEventListener('securitypolicyviolation', (violation) => {
    console.log('违规脚本路径：', violation.sourceFile);
    console.log('违规代码行号：', violation.lineNumber);
    console.log('违规内容样例：', violation.sample);
  });
  

  刷新页面后控制台会直接输出所有CSP违规的详细信息，定位完成后记得删除'unsafe-inline'配置和这段调试代码。

内容的提问来源于stack exchange，提问作者Gurkeerat Sondhi