创建React App内容安全策略被忽略

Question

我尝试将 Auth0 添加到我的应用程序中，该应用程序在本地运行，但当我部署到 S3 存储桶时，出现以下错误：

“拒绝连接到'https://dev-.us.auth0.com/oauth/token'，因为它违反了以下内容安全策略指令：“default-src 'self'”。请注意，'connect-src'未明确设置，因此使用“default-src”作为后备。”

为了解决该问题，我尝试按照“使用内联脚本或样式”标题下的这篇文章中的说明进行操作，但是即使我可以看到正在对相关元标记进行更改（请参见下文，摘自浏览器）我仍然遇到同样的错误。

<meta http-equiv="Content-Security-Policy" content="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/">

我不明白的是，它看起来完全忽略了元标记，因为我可以看到

connect-src

正在浏览器使用的 html 中设置，但随后在控制台中它抛出此错误，声称它尚未被设置。这里可能出了什么问题？

我尝试将内容安全标头添加到创建反应应用程序中，并且我希望使用该标头。但是，标头被忽略。

Answer 1

听起来您遇到了这样的问题：当您的应用程序部署到 AWS S3 存储桶时，您在 HTML 元标记中设置的内容安全策略 (CSP) 未得到遵守。导致此问题的可能原因有多种，我将指导您完成一些步骤来排除故障并希望能够解决它：

1. 元标记与 HTTP 标头

• 设置 CSP 最有效的方法是通过 HTTP 标头而不是元标记。这在涉及外部 API 调用的场景中尤其重要，例如 Auth0 的调用。某些浏览器可能比元标记中更一致地强制执行 HTTP 标头中定义的 CSP。
• 解决方案：配置您的 S3 存储桶以将 CSP 作为 HTTP 标头发送。这可以通过在 S3 对象的元数据中设置

  Content-Security-Policy

  标头来完成。如果您在 S3 之前使用 CloudFront，则可以使用 Lambda@Edge 或 CloudFront 函数修改 HTTP 标头以包含 CSP 标头。

2. CSP 标头语法检查

• 确保 CSP 规则包含所有必要的来源。您当前的策略似乎是正确的，但请重新检查用于 Auth0 的域以确保没有拼写错误或配置错误。
• 双重检查：确保

  connect-src

  指令中的域与应用程序尝试连接的域完全匹配，包括检查

  <hash>

  等任何占位符，应将其替换为实际值。

3. CSP 实施和浏览器缓存

• 浏览器可以积极缓存 CSP，并且更改可能不会立即反映出来。
• 解决方案：彻底清除浏览器缓存或尝试在隐身窗口中访问您的应用程序，看看问题是否仍然存在。

4. 调试 CSP 问题

• 使用浏览器的开发者工具来监控网络请求和响应。检查是否正在发送任何其他可能会覆盖您在元标记中指定的内容的 CSP 标头。
• 检查标头：查看开发人员工具中的“网络”选项卡以检查初始页面加载的响应标头。这可以告诉您服务器是否正确设置了 CSP 标头。

5. AWS S3/CloudFront 设置

• 如果使用 CloudFront，请检查是否定义了可能影响标头的任何其他设置或行为。
• 配置检查：检查任何 OAI（源访问身份）设置或剥离标头或修改请求/响应的行为。

行动计划

1. 将 CSP 移至 HTTP 标头：更新您的部署流程以在 HTTP 标头中包含 CSP 规则，而不是仅仅依赖元标记。
2. 清除缓存并重试：更新标头后，清除浏览器缓存或在隐身模式下进行测试，以确保您看到的是应用程序的最新版本。
3. 使用开发人员工具检查：使用浏览器的开发人员工具确保 CSP 标头按预期发送，并且不存在冲突的标头。

通过执行这些步骤，您应该能够查明并解决当您的应用程序部署到 S3 时不遵守 CSP 的问题。