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

Question

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

错误是：

无法获取/

控制台告诉我：

加载资源失败：服务器响应状态为 404（未找到） localhost/:1 拒绝加载图像“http://localhost:3002/favicon.ico”，因为它违反了以下内容安全策略指令：“default-src 'none'”。请注意，'img-src' 没有显式设置，因此 'default-src' 用作备用。

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

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

server.js

index.html 的屏幕截图以显示添加的图像并且 CSP 没有元标记： index.html

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

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

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

Answer 1

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

是的，在黑暗的房间里很难找到一只黑猫，尤其是如果它不在那里的话。

拒绝加载图像“http://localhost:3002/favicon.ico”，因为 它违反了以下内容安全政策指令： “默认源代码‘无’”。请注意，'img-src' 没有明确设置，所以 'default-src' 用作后备。

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

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

所有细节都是here。简而言之 - 默认情况下，浏览器会尝试从网站的根目录获取 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：我认为如果你添加一个自定义错误页面处理程序，它有助于避免类似的误导性诊断（代码示例你可以使用here）。

更新：

无法获取/

表示 webpack 不知道要显示哪个页面 - defServer{...} output{...} sections misconfigured 或错误的路由器（）。因此，您会得到 404 Not Found 页面。 您可以在开发者工具中查看状态代码 404/200 以及您真正拥有的 Content-Security-Policy HTTP 标头（here 是一个教程）。

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

我刚刚搜索了 react-script 中的所有文件，这就是 webpack 配置文件生效，并没有发现任何 “默认-scr：无”

AFAIK，webpack-dev-server 在 404 个页面上使用 finalhandler which rejects /favicons，与您遇到的问题完全相同。这样default-src: 'none'应该在node_modules/finalhandler/index.js中。

为什么我用这个 CRA 应用而不是其他十几个我来处理 CSP 以同样的方式创建？

以前 finalhandler has default-src 'self' 所以 /faficons 不是 CSP 阻止的。但在此线程之后：default-src should be 'none' in finalhandler at May 2019 - things changed。

我猜你的问题与 CSP 无关，只是配置错误 defServer{...} 或 output{...}（一些 path: __dirname + 'public/' 或 publicPath: 指向错误的目录）。
CSP 错误只是疾病的一种症状（不好的是它是一种假症状），但我们需要治疗原因而不是症状。

PS：我认为在 HTML 中应该是 http://localhost/favicon.ico 而不是 %PUBLIC_URL%/favicon.ico，这也是这里配置错误的东西。