配置极宽松内容安全策略(CSP)仍触发违规报错问题

• 浏览器会同时应用所有来源的CSP规则（包含meta标签与HTTP响应头），只要任意一条规则拦截了资源，就会触发报错。你看到报错提示的规则是script-src 'self'，但meta里配置的是script-src *，说明存在另一套来自HTTP响应头的CSP规则。
• 开发环境运行正常，是因为Parcel自带的开发服务器没有额外添加CSP响应头，仅你写在meta里的规则生效，允许加载任意域名的脚本。
• 打包后运行触发报错，是因为你用来打开打包产物的静态服务器（比如本地测试用的serve工具、线上部署的Nginx/云托管服务）默认配置了Content-Security-Policy: script-src 'self'的响应头，两条CSP规则同时生效时要求脚本同时满足「允许所有域名」和「仅允许同域」，最终只能加载同域脚本，因此第三方CDN的脚本全部被拦截。
• 额外补充：你打包后的HTML里，把type="module"的业务脚本放在了angular等第三方依赖脚本的前面，业务脚本执行时angular还未加载完成，也会触发angular is not defined的报错。

打开浏览器开发者工具的「网络」面板，刷新页面后选中当前HTML文档的请求，查看响应头中是否存在Content-Security-Policy字段，即可确认是否有额外的响应头CSP规则。

• 本地测试场景：更换不会默认添加CSP头的静态服务，或者修改当前静态服务的配置，关闭自动注入CSP的功能。
• 线上部署场景：修改服务器/云托管的配置，要么删除响应头中的CSP规则，仅保留meta中的配置；要么把你用到的第三方CDN域名添加到响应头CSP的script-src列表中，需要添加的域名包括：ajax.googleapis.com、cdnjs.cloudflare.com、cdn.jsdelivr.net。
• 调整HTML中script标签的顺序，把angular等第三方依赖脚本放在业务脚本之前加载，解决依赖未定义的报错。

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