Create React App中Content Security Policy被忽略问题求助

核心问题 #

你的S3存储桶（或配合使用的CloudFront）在返回页面时，HTTP响应头中已经设置了优先级更高的Content-Security-Policy，导致页面中的meta标签CSP被浏览器直接忽略。控制台错误显示的default-src 'self'正是响应头中的CSP规则，而非你配置的meta标签内容。

解决步骤 #

1. 配置S3的响应头CSP #

浏览器优先遵循HTTP响应头中的CSP规则，因此需要直接在S3中设置响应头：

• 登录AWS控制台，进入目标存储桶
• 若仅针对index.html：选中该文件 → 点击操作 → 修改元数据 → 添加键为Content-Security-Policy，值填入你的规则：

  base-uri 'self'; object-src 'none'; script-src 'unsafe-inline' 'self' 'unsafe-eval' 'nonce-<hash>=='; style-src 'unsafe-inline' 'self' 'nonce-<hash>=='; connect-src 'self' https://dev-<hash>.us.auth0.com/
  

• 若针对整个桶的静态资源：通过AWS CLI或存储桶策略批量设置响应头；如果启用了CloudFront CDN，需在CloudFront的行为中配置响应头策略

2. 移除页面中的meta标签CSP #

删除页面里的<meta http-equiv="Content-Security-Policy">标签，避免规则冲突。

3. 验证配置 #

刷新页面后，在浏览器开发者工具的网络面板中，查看index.html的响应头，确认Content-Security-Policy字段已正确设置。再测试Auth0集成流程，确认CSP错误消失。

额外提示 #

• 若使用CloudFront，必须在CloudFront侧配置响应头策略，否则CDN缓存会覆盖S3的响应头设置
• 检查Auth0域名是否正确（错误信息中出现https://dev-.us.auth0.com，缺少租户ID，需与实际域名完全一致）

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