Angular应用经Cloudfront部署后Content-Security-Policy未生效报错求解

问题原因 #

你遇到的问题核心是 HTTP响应头的Content-Security-Policy优先级高于HTML内meta标签定义的CSP，报错信息里的CSP规则default-src https: 'unsafe-inline'并非你meta标签里配置的内容，说明Cloudfront/S3返回的index.html响应头中已经携带了更严格的CSP规则，浏览器会同时生效两套规则，取限制更严格的部分执行，因此你meta里配置的worker-src和blob:源并未生效。

本地环境没有返回额外的CSP响应头，所以meta标签的配置可以正常生效。

解决方案 #

第一步：确认CSP来源 #

打开浏览器开发者工具的「网络」面板，刷新页面后找到index.html的请求，查看响应头中是否存在Content-Security-Policy字段，确认该字段的值是否和你报错信息里的规则一致。

第二步：调整配置（二选一即可，推荐方案1） #

方案1：在Cloudfront中配置正确的CSP响应头（兼容性更好）

• 进入AWS Cloudfront控制台，打开对应站点的分发配置
• 切换到「行为」标签，选中默认缓存行为点击编辑
• 找到「响应头策略」配置项，选择新建自定义响应头策略，或编辑已有策略
• 开启Content-Security-Policy配置，填入你需要的规则：

default-src http: https: data: blob: 'self' 'unsafe-eval' 'unsafe-inline'; worker-src http: https: data: blob: 'self' 'unsafe-eval' 'unsafe-inline';

• 保存配置后等待Cloudfront分发生效（通常5-10分钟），清除缓存后测试即可。

方案2：删除Cloudfront/S3的CSP响应头，使用meta标签配置

• 先检查S3桶中index.html的元数据，确认是否配置了Content-Security-Policy字段，如有则删除
• 再检查Cloudfront的自定义响应头配置，确认是否有强制添加CSP规则的配置，如有则删除
• 提交配置后清除Cloudfront缓存，meta标签内的CSP配置即可生效。

注意事项 #

• 测试时建议使用浏览器隐私模式，或手动清除站点缓存，避免旧的CSP规则被缓存影响验证
• 后续生产环境安全优化时，可逐步移除'unsafe-inline'和'unsafe-eval'规则，进一步提升站点安全性。

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