内容安全策略指令：“img-src 数据：”错误

Posted 2023-02-18

【中文标题】内容安全策略指令：“img-src 数据：”错误

【英文标题】：Content Security Policy directive: "img-src data:" error

【发布时间】：2018-08-14 17:05:46

【问题描述】：

我正在 github 页面上测试我的 Angular 5 应用程序，每当我重新加载 index.html 以外的页面时，我都会收到此错误：

Refused to load the image 'https://sebamed.github.io/favicon.ico' because it violates the following Content Security Policy directive: "img-src data:".

另外，当我尝试访问“404”错误页面时，我收到了相同的消息。

现在，我尝试了几种解决方案，但似乎都没有奏效。我什至将它添加到我的 index.html 中：

<meta http-equiv="Content-Security-Policy" content="img-src * 'self' data: https:">

但什么也没发生。

我已将默认的 Angular 5 favicon.ico 更改为我自己的，将其放在我的资产文件夹中，并在 index.html 中为其设置相对路径（浏览器成功识别它！）：

<link rel="icon" type="image/x-icon" href="/pokedex/assets/png/favicon.ico">

这个问题有什么解决办法吗？我以前从来没有过...

我的应用链接是here

编辑：

手动导航到 my-pokedex 组件后我的应用程序的屏幕截图，存储在 /mypokedex 路由中！ （当我通过应用侧边栏导航到 my-pokedex 时，它可以正常工作！）：

Screenshot

【参考方案1】：

在页面上做得很好。我正在查看演示，我没有看到图标有任何问题，也没有收到任何控制台错误消息。你还在看你的问题吗？如果你是，错误信息的截图总是好的。

编辑 1： 因此，您遇到的问题不一定是 Content Security Policy 指令，而是当您直接访问 URL 时会收到 404。这更有意义。这篇关于路由 Angular-routing, direct URL navigation 的 *** 帖子可能有助于了解您所遇到的情况。

【讨论】：

谢谢！我会用截图编辑我的帖子。除了在演示中首先启动的组件之外，您是否尝试过刷新任何组件？例如，如果我手动导航到 /mypokedex，我会收到错误消息，但如果我通过 sidemenu 导航，应用程序可以完美运行。

我打算将此作为评论，而不是答案，但我已经用一些注释更新了我的答案。

哇，谢谢！您的链接没有直接解决我的问题，但它帮助我从不同的角度看待问题。长话短说，问题出在路由上，我需要将 useHash: true ) 添加到我的路由常量中，以便它为 index.html 提供服务器。 @Chester，再次感谢您！

我有类似的问题，但 useHash: true 没有解决它。 'lkovari.github.io/kovariLAB'