为什么我在设置 express-csp-header 后在 React PWA 应用程序上收到“default-src: 'none'”内容安全策略错误?

IT技术 reactjs express progressive-web-apps content-security-policy
2021-03-30 10:24:11

菜鸟在这里。使用 create-react-app 创建 PWA React 应用程序并遇到有关默认设置为 none 和没有 img 设置来覆盖它的 CSP 问题。
已经针对这个确切的问题搜索并尝试了许多有用的答案,但还没有找到适合我的应用程序的答案。也许我只需要第二双眼睛?

错误是:

不能获取 /

控制台告诉我:

加载资源失败:服务器响应状态为 404(未找到)localhost/:1 拒绝加载图像“http://localhost:3002/favicon.ico”,因为它违反了以下内容安全策略指令:“默认-src '无'”。请注意,'img-src' 未明确设置,因此使用 'default-src' 作为后备。

localhost/:1 加载资源失败:服务器响应状态为 404(未找到)

我尝试实现 express-csp-header 的 server.js 的屏幕截图:

服务器.js 在此处输入图片说明

index.html 的屏幕截图,用于显示添加的图像,并且没有 CSP 的元标记:index.html

在此处输入图片说明

我曾尝试按照其他地方的建议添加标签。我尝试了我能找到的来自 stackoverflow 的所有其他建议。请指教。

----编辑--- 我想我需要知道的是如何覆盖 webpack 附带的 CSP 作为 Create-React-App 的一部分,因为控制台错误消息说 'img src' 没有定义,所以它是默认的设置为“无”的“默认 src”。我相信我已经正确安装了 express-csp-header 并且正确设置了 'img src',为什么浏览器没有找到?

----另一个编辑--- 一直以来我都在想 webpack 必须是浏览器获取错误消息中提到的“default-scr:NONE”的地方。我刚刚搜索了 react-script 中的所有文件,这是 webpack 配置文件所在的位置,没有发现任何“default-scr: NONE”的出现。是 Express 设置吗?为什么我要使用这个 CRA 应用程序来处理 CSP,而不是我以相同方式创建的其他十几个应用程序?拉我的头发。

1个回答

也许我只需要第二双眼睛?

是的,在黑暗的房间里很难找到一只黑猫,特别是如果它不在那里。

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

这是误导性诊断消息的一个很好的例子。您的问题与内容安全策略 (CSP) 无关。
只需将favicon.ico文件放入%PUBLIC_URL%文件夹并添加到<head>部分:

<link rel="icon" type="image/x-icon" href="%PUBLIC_URL%/favicon.ico">

所有的细节都在这里简而言之 - 默认情况下,浏览器会尝试从网站的根目录获取 favicon,因为您没有设置正确的<link rel="icon"标签。那里没有图标,所以 404 Not Found 发生(无论如何 Express 默认不提供根文件夹)。
您的 CSP 仅发布在“200 个 OK 页面”上,因此 Express 默认情况下将其自己default-src 'none'用于不存在的页面(状态代码为 404/403/500/等)。

这真的会让任何人感到困惑。

PS:很可能%PUBLIC_URL%的存在意味着您没有正确设置PUBLIC_URL / homepage,因为它应该被真实的文件夹/路径替换。我只是在<link rel="icon"上面标签中使用了你的符号

PPS:我认为如果您添加自定义错误页面处理程序,它有助于避免类似的误导性诊断(您可以在此处获取代码示例)。

更新:

不能获取 /

意味着 webpack 不知道要显示哪个页面 - defServer{...} output{...} 部分配置错误或路由器()错误。因此你会得到 404 Not Found 页面。您可以在开发人员工具中查看状态代码 404/200 以及您真正获得的 Content-Security-Policy HTTP 标头(这里是教程)。

404 Not Found 的情况下,webpack 显示内置的默认错误页面(因为你没有创建自己的)。此错误页面由默认的 webpack 的 CSP 提供,而不是您的(您的 CSP 将仅发布在具有200 OK状态代码的页面上)。

我刚刚搜索了 react-script 中的所有文件,这是 webpack 配置文件所在的位置,并且没有发现任何“default-scr: NONE”的出现

AFAIK,webpack-dev-server 使用最终处理程序,它/favicons在 404 页面上完全拒绝您遇到的相同问题。这样default-src: 'none'应该是在node_modules/finalhandler/index.js

为什么我要使用这个 CRA 应用程序来处理 CSP,而不是我以相同方式创建的其他十几个应用程序?

以前finalhandler 有 default-src 'self'所以/faficons没有被 CSP 阻止。但是在这个线程之后:default-src在 2019 年 5 月的finalhandler应该是 'none' - 事情发生了变化

我猜您的问题与 CSP 无关,只是配置错误defServer{...}output{...}(某些path: __dirname + 'public/'publicPath:指向错误的目录)。
CSP 错误只是疾病的一个症状(坏事是错误的症状),但我们需要治疗原因而不是症状。

PS:我认为%PUBLIC_URL%/favicon.ico它不应该http://localhost/favicon.ico在 HTML 中,而是在这里配置错误。

granty-事实上,Express 默认不提供根文件夹。一旦我将 index.html 更正为 <link rel="icon" href="/favicon.ico"> 并添加了 app.use(express.static('client/public')); 和 app.get("/favicon.ico", (req, res) => { res.sendFile(path.resolve(__dirname, "/favicon.ico")); }); 到我的 server.js。谢谢!
2021-05-24 10:24:11
嗨布鲁基纳。我更新了答案,希望它可以帮助您找到问题的真正原因。
2021-06-17 10:24:11
您好格兰蒂,感谢您的回复。我已经按照你的建议做了,但仍然出现同样的错误。我忽略了我在开发中工作。我用 CRA 开始。我想知道是否需要在某处为我的公用文件夹定义路径?我的 html 在头部包含 <link rel="icon" href="%PUBLIC_URL%/favicon.ico"> ,因此我的文件结构是:Project->client->public->favicon.ico。在 manifest: "icons": [ { "src": "favicon.ico", "sizes": "64x64 32x32 24x24 16x16", "type": "image/x-icon" } ],Chrome Dev 没有看到manifest.json,显示塞子?谢谢
2021-06-20 10:24:11