时间戳

首页 > 解决方案 > 图片违反了以下内容安全策略指令 - 创建 React App

reactjs - 图片违反了以下内容安全策略指令 - 创建 React App

问题描述

运行我的 React 应用程序时，我在 chrome 中收到以下内容安全策略错误。我尝试在谷歌上搜索了很长时间，但是在使用 create-react-app 时我找不到有关如何解决此问题的足够信息。我将非常感谢任何帮助。

在此处输入图像描述

标签： reactjsgoogle-chromecreate-react-appfaviconcontent-security-policy

解决方案

在对您的问题进行了一些搜索后，我最终来到了 MDN。我将很快定义问题所在，但要了解更多信息，我强烈建议您阅读提供的链接。

那么这里到底发生了什么？

这是因为该网站被配置为使用内容安全策略 (CSP) 来防止有人恶意加载来自第三方的代码。Content-Security-Policy 元标记允许您定义可以从何处加载资源，防止浏览器从任何其他位置加载数据，从而降低 XSS 攻击的风险。这使得攻击者更难将恶意代码注入您的站点。

那怎么解决呢？

根据我提供的 MDN 链接，我们应该通过将以下元标记添加到我们的index.html.

<meta http-equiv="Content-Security-Policy" content="default-src 'self' *.trusted.com">

注意： *.trusted.com应该是受信任的站点或它们的列表。

那么它应该在你自己的本地主机上发生什么呢？

我遇到了几个像你这样的问题，然后发现这个错误何时出现在你的控制台上，这并不一定表明你的项目有这个确切的问题，你的主代码中的其他问题可能会导致这样的错误。我刚刚发现了一些类似的问题，将在下面分享：

那么你必须做什么？

首先，请检查您项目中所有现有的代码和路径，并确保它们都没有错误。当您摆脱所有错误时，这应该像往常一样消失，但是如果问题仍然存在，请确保禁用浏览器中的所有扩展程序（您可以在不禁用任何东西的情况下安全地在隐身模式下测试它）然后运行项目看看错误是否消失。

所以有两个步骤可以摆脱它：

  1. 摆脱所有项目和路径错误
  2. 确保您的所有扩展程序都已禁用

推荐阅读