为啥我在设置 express-csp-header 后在 React PWA 应用程序上收到“default-src:'none'”内容安全策略错误？
Posted
技术标签:
【中文标题】为啥我在设置 express-csp-header 后在 React PWA 应用程序上收到“default-src:\'none\'”内容安全策略错误？【英文标题】：Why do I get the "default-src: 'none'" Content Security Policy error on React PWA app after I've set up express-csp-header?为什么我在设置 express-csp-header 后在 React PWA 应用程序上收到“default-src:'none'”内容安全策略错误？ 【发布时间】：2021-02-13 06:25:21 【问题描述】：这里是菜鸟。 使用 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
我已尝试按照其他地方的建议添加标签。 我尝试了我能找到的来自 *** 的所有其他建议。 请指教。
----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，而不是我以同样方式创建的其他十几个应用程序？拔掉我的头发。
【问题讨论】：
【参考方案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，这也是这里配置错误的东西。
【讨论】：
您好，格兰蒂，感谢您的回复。我已经按照你的建议做了，但仍然出现同样的错误。我忘了提到我在开发部门工作。我用 CRA 开始。我想知道是否需要在某处定义公用文件夹的路径？我的 html 在头部包含 ，因此我的文件结构是：Project->client->public->favicon.ico。在 manifest: "icons": [ "src": "favicon.ico", "sizes": "64x64 32x32 24x24 16x16", "type": "image/x-icon" ]，Chrome Dev 看不到manifest.json，显示塞子？谢谢 你好，Bruggineer。我更新了答案，希望它可以帮助您找到问题的真正原因。 granty - 事实上，Express 默认情况下不提供根文件夹。一旦我将 index.html 更正为 并添加了 app.use(express.static('client/public'));和 app.get("/favicon.ico", (req, res) => res.sendFile(path.resolve(__dirname, "/favicon.ico")); );到我的 server.js。谢谢！以上是关于为啥我在设置 express-csp-header 后在 React PWA 应用程序上收到“default-src:'none'”内容安全策略错误？的主要内容，如果未能解决你的问题，请参考以下文章
为啥我在 Express 上设置 CORS 时出现飞行前错误？
为啥我在 Google 地图中使用 GroundOverlay 设置图像时会变形？
当我在 Android 设置中手动禁用位置时，为啥 Android 前台服务会停止？
为啥我在设置中收到“'Bars' 不能用作实体类型 'Foo' 的属性”？