为什么这个简单的应用会抛出这个错误？

Question

尽我所能，最后我求助于一些专家的建议。

对于像您这样的人来说，这不是一个复杂的问题。很确定这对您来说很容易解决！

屏幕报错如下

以下是该应用具有的元标记：

<meta http-equiv="Content-Security-Policy"
    content="default-src 'none'; connect-src 'self';font-src 'self'; img-src 'self' data: https:; style-src 'self' ; script-src 'self'">

试图找到 favicon.ico，但找不到。

我现在头晕目眩！

期待您的帮助！

非常感谢！

Answer 1

<meta http-equiv="Content-Security-Policy"
    content="default-src 'none'; connect-src 'self';font-src 'self'; img-src 'self' data: https:; style-src 'self' ; script-src 'self'">

看到这段代码：

您已设置 default-src 'none' 并用 img-src 'self' data: https: 覆盖它。
但是使用的协议是http。

Answer 2

您显示的 CSP 确实包含 img-src，因此 Chrome 控制台警告意味着此 CSP 不作用于页面，但在页面上作用于另一个 CSP。

看起来您的应用确实在某处发布了默认 CSP，并且此 CSP 不包含 img-src 指令。

所以您确实同时拥有 2 个 CSP，在这种情况下，一个限制性更强。

检查是否存在第二个 <meta http-equiv="Content-Security-Policy" 标记（在 HTML 代码中）或 HTTP header 内容安全策略（在开发工具中）。

或者您可以删除您的：

<meta http-equiv="Content-Security-Policy"
    content="default-src 'none'; connect-src 'self';font-src 'self'; img-src 'self' data: https:; style-src 'self' ; script-src 'self'">

并看到由于第二个 CSP，Chrome 控制台中仍然存在相同的警告。

更新： 经过一些研究，发现上述情况 real reason of /favicon blocking。

为什么这个简单的应用会抛出这个错误？

Why is this simple app throwing this error?

html

javascript

content-security-policy