拒绝加载图像,因为它违反了以下内容安全策略指令:“default-src 'none'”

时间:2021-01-09 18:07:55

标签: reactjs heroku react-redux react-router content-security-policy

拒绝加载图片,因为它违反了以下内容安全策略指令:“default-src 'none'”。请注意,'img-src' 未明确设置,因此使用 'default-src' 作为后备。

该站点首先被加载,但在刷新后出现上述错误。我在前端使用 React.js 构建了我的网站,后端使用 Node.js。我的网站部署在 heroku 上。

编辑 1:

在问题中也低于这个

您站点的内容安全策略阻止了某些资源,因为它们的来源未包含在内容安全策略标头中 内容安全策略 (CSP) 通过定义可信来源列表并指示浏览器仅执行或呈现该列表中的资源来提高站点的安全性。无法访问您网站上的某些资源,因为它们的来源未在 CSP 中列出。

要解决这个问题,请仔细检查下面列出的所有被阻止的资源是否值得信赖;如果是,请将其来源包含在您网站的内容安全策略中。您可以将策略设置为 HTTP 标头(推荐)或通过 HTML 标记。

⚠️ 切勿将您不信任的来源添加到您网站的内容安全政策中。如果您不信任来源,请考虑在您自己的网站上托管资源。

1 指令 资源状态指令源代码 https://xxxx.herokuapp.com/favicon.ico 阻止了 img-src

编辑 2:

响应头

HTTP/1.1 500 内部服务器错误 服务器:牛仔 连接:保持连接 X-Powered-By: Express 访问控制允许来源:* Access-Control-Allow-Headers: Origin, X-Requested-With, Content-type, Accept, Authorization 内容安全策略:default-src 'none' X-Content-Type-Options: nosniff 内容类型:文本/html;字符集=utf-8 内容长度:148 日期:2021 年 1 月 9 日星期六 18:23:41 GMT 通过:1.1 vegur

编辑 3:

对我来说,我忘了申报

const path = require("path");

在我的 server.js 中,这导致了上述问题

1 个答案:

答案 0 :(得分:0)

您有状态代码 500 Internal Server Error Server,但没有 200 OK。在这种情况下,出于安全原因,NodeJS 运行 finalhandler,它发布默认 CSP:Content-Security-Policy: default-src 'none'
default-src 'none' 阻止所有资源包括图像。

我猜您已经阻止了 /favicon.ico,浏览器默认从网页根目录 / 加载它,here 是类似的问题已解决。

您需要修正 500 Internal Server Error Server