Chrome/Edge冷加载静态页面触发CSP内联脚本报错,刷新及Firefox正常的问题求助
我的场景
我正在开发一个由AWS CloudFront分发、存储在S3上的静态页面,页面仅使用基础的HTML、CSS和JS编写,没有引入任何框架。因为静态站点无法使用nonce机制,所以我的CSP配置采用了哈希值方案。
遇到的问题
页面在Firefox中加载完全正常,但在Chrome和Edge中,**初次加载(或禁用缓存加载)**时,Vite通过vite-plugin-inline-source插件内联的UMD库(代码为 <script inline-source type="application/javascript" src="./js/PageConfiguration.umd.js"></script>)会触发CSP错误,可刷新页面后又能正常加载。
错误提示:
Refused to execute inline script because it violates the following Content Security Policy directive:
我的排查过程
由于是静态站点,我专门用对比工具验证过:触发CSP错误的初次加载,和后续正常加载的页面代码完全一致;同时两次请求返回的CSP响应头也没有任何差异。
困惑与求助方向
我现在完全摸不着头绪,想请教大家:
- 这会不会是Chromium引擎的bug?
- 有没有可能即使CSP头包含了正确的哈希值,仍会出现合法的报错?
- 为什么初次加载(或禁用缓存)会失败,刷新就正常?
- 为什么Firefox从来不会出现这个问题?
我更倾向于Chrome这边出现了误报,而非Firefox没检测到风险,但实在想不通背后的原因。目前我已经尝试调整各种配置来解决,但都没效果,非常想搞清楚到底发生了什么。
临时解决方案
我现在加了个临时检测逻辑:判断脚本对应的变量是否加载完成,如果typeof该变量为undefined,就强制刷新页面。这个方案我自己都觉得很糟糕,但目前只能先凑合用,直到找到根本原因。
备注:内容来源于stack exchange,提问作者Jacob Chmielowiec

