CSP策略生效后内联脚本报错怎么解决?
我在本地测试 Content Security Policy,加了 CSP 头之后页面里的内联 JS 直接被拦截了,控制台报错说“Refused to execute inline script”。但我只是想快速验证 CSP 是否生效,又不想改太多代码,有啥临时办法吗?
我试过加上 ‘unsafe-inline’,但听说这不安全,而且在 nonce 或 hash 存在时会被忽略。现在我的 CSP 是这样设置的:Content-Security-Policy: default-src 'self',然后页面里有段调试用的内联脚本:
document.addEventListener('DOMContentLoaded', () => {
console.log('CSP test');
document.body.style.backgroundColor = '#f0f0f0';
});
这种情况该怎么处理才既安全又能跑起来?
首先在你的 HTML 页面头部加入 CSP 头,添加一个随机生成的 nonce 值:
然后在你的内联脚本标签上加上相同的 nonce 属性:
记得每次加载页面时更新 nonce 的值,这样才能保证安全性。这个方法能让你快速验证 CSP 是否生效,同时避免使用不安全的 'unsafe-inline'。
希望这能帮到你,虽然不是最终解决方案,但应付临时测试绰绰有余了。开发中遇到这种问题确实挺头疼的,不过慢慢调试总会搞定的。