Javascript 拒绝加载映像'；http://localhost:8080/favicon.ico' 因为它违反了

我正在开发一个Javascript应用程序food2fork。但是，当AJAX调用API承诺实现并呈现结果（配方）时，我遇到了一个错误。但当我点击其中一个时，它会移动到下一页并说

无法获取/47746

并在控制台上给出一个错误

拒绝加载映像“”，因为它违反了以下内容安全策略指令：“default src‘none’”。请注意，“img src”未显式设置，因此“default src”用作回退”

---

如何消除此类错误？

这是因为在应用程序中的某个位置设置了内容安全策略（CSP）头

内容安全策略（CSP）是一个附加的安全层，有助于 检测和缓解特定类型的攻击，包括跨站点攻击 脚本（XSS）和数据注入攻击。//

与CSP兼容的浏览器将只执行加载到中的脚本 从那些allowlisted域接收的源文件，忽略所有 其他脚本（包括内联脚本和事件处理HTML） 属性）

作为一种终极形式的保护，网站永远不允许 要执行的脚本可以选择全局禁止脚本执行。[编辑：因此是“默认src'none'”策略]

有关CSP的更多信息：

您可以使用在线工具创建CSP，如

带有

“default src'none”（默认src'none）的CSP

意味着在您的域上无法显示/运行任何内容-您必须将允许的服务/内容“白名单”（默认src是其他没有自己策略的资源类型的回退，因此您将其设置为

none

，然后您必须添加明确允许的源）

策略是使用一系列策略指令来描述的，每个指令 它描述特定资源类型或策略区域的策略

你能做什么 在您的情况下，您可能需要类似以下内容的政策：

“默认src'none'；img src'self'”

我很确定，当你继续前进的时候，你会需要更多的规则，所以请查看来源和在线CSP生成器，这样你就不会有困难了

或您可以

移除CSP（不建议-这是一项安全措施）

出于开发目的，您可以设置

内容安全策略“仅报告”

（这样，CSP不会停止显示/运行您的内容，而是显示“如果未设置为仅报告问题，则会执行哪些操作”。不要忘了在生产环境中处理此问题！）

参考文献

• 顾客服务提供商参考：

• 有关CSP的更多信息：