为什么我在设置 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?
菜鸟在这里。
使用 create-react-app 和 运行 创建 PWA React 应用程序进入 CSP 问题，关于默认设置为 none 并且没有 img 设置来覆盖它。
已经针对这个确切问题搜索并尝试了许多有用的答案，但还没有找到适用于我的应用程序的答案。
也许我只是需要第二双眼睛？
错误是：
无法获取 /
控制台告诉我这个：
加载资源失败：服务器返回状态 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
我已尝试按照其他地方的建议添加标签。
我尝试了我能找到的来自 Whosebug 的所有其他建议。
请指教
----编辑--- 我想我需要知道的是如何覆盖 webpack 附带的 CSP 作为 Create-React-App 的一部分，因为控制台错误消息说 'img src'未定义，因此默认为“默认 src”，设置为 'none'。我相信我已经正确安装了 express-csp-header 并正确设置了 'img src'，为什么浏览器找不到它？
----另一个编辑--- 一直以来我都在想 webpack 一定是浏览器获取错误消息中提到的“default-scr: NONE”的地方。我刚刚搜索了 react-script 中的所有文件，这是 webpack 配置文件所在的位置，没有发现任何“default-scr: NONE”。它是快速设置吗？为什么我要用这个 CRA 应用程序来处理 CSP 而不是我以相同方式创建的其他十几个应用程序？拔头发。
Maybe I just need a second pair of eyes?
是的，在黑暗的房间里很难找到一只黑猫，尤其是当它不在的时候。
Refused to load the image 'http://localhost:3002/favicon.ico' because
it violates the following Content Security Policy directive:
"default-src 'none'". Note that 'img-src' was not explicitly set, so
'default-src' is used as a fallback.
这是误导性诊断消息的一个很好的例子。您的问题与内容安全策略 (CSP) 无关。
只需将 favicon.ico 文件放入 %PUBLIC_URL% 文件夹并添加到 <head> 部分：
<link rel="icon" type="image/x-icon" href="%PUBLIC_URL%/favicon.ico">
全部 nitty-gritty 是 here。简而言之 - 默认情况下，浏览器会尝试从网站的根目录获取图标，因为您没有设置正确的 <link rel="icon" 标签。那里没有图标，所以出现 404 Not Found（无论如何 Express 默认不提供根文件夹）。
您的 CSP 仅发布在“200 OK 页面”上，因此 Express 默认使用自己的 default-src 'none' 来处理不存在的页面（状态代码为 404/403/500/etc）。
这真的会让任何人感到困惑。
PS：很可能 %PUBLIC_URL% 的存在意味着您没有正确设置 PUBLIC_URL / homepage，因为它应该是被真实的 folder/path 取代。我只是在上面的 <link rel="icon" 标记中使用了您的符号。
PPS：我认为如果您添加自定义错误页面处理程序，它有助于避免类似的误导性诊断（代码示例您可以采用 here）。
更新：
Cannot GET /
表示 webpack 不知道要显示什么页面 - defServer{...} output{...} sections misconfigured 或错误的 router()。因此你得到 404 Not Found 页面。
您可以在开发人员工具中查看状态代码 404/200 以及您真正拥有的 Content-Security-Policy HTTP header（here 是教程）。
如果 404 Not Found，webpack 显示 built-in 默认错误页面（因为您没有创建自己的错误页面）。此错误页面由默认 webpack 的 CSP 提供，而不是您的（您的 CSP 将发布在仅具有 200 OK 状态代码的页面上）。
I just searched all of the files in react-script, which is where
webpack config files live, and don't find any occurance of
"default-scr: NONE"
AFAIK，webpack-dev-server 在 404 页上使用 finalhandler which rejects /favicons 与您遇到的问题完全相同。这样 default-src: 'none' 应该在 node_modules/finalhandler/index.js.
Why am I dealing with CSP with this CRA app and not the other dozen I
created the same way?
之前 finalhandler has default-src 'self' so /faficons was not blocks by CSP. But after this thread: default-src should be 'none' in finalhandler at May 2019 - things changed.
我猜你的问题与 CSP 无关，只是 defServer{...} 或 output{...} 配置错误（某些 path: __dirname + 'public/' 或 publicPath: 指向错误的目录）。
CSP 错误只是疾病的一个症状（糟糕的是它是一个假症状），但我们需要治疗一个原因而不是症状。
PS：我认为 %PUBLIC_URL%/favicon.ico 应该是 HTML 中的 http://localhost/favicon.ico，这里也配置错误。
菜鸟在这里。
使用 create-react-app 和 运行 创建 PWA React 应用程序进入 CSP 问题，关于默认设置为 none 并且没有 img 设置来覆盖它。
已经针对这个确切问题搜索并尝试了许多有用的答案，但还没有找到适用于我的应用程序的答案。
也许我只是需要第二双眼睛？
错误是：
无法获取 /
控制台告诉我这个：
加载资源失败：服务器返回状态 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
我已尝试按照其他地方的建议添加标签。 我尝试了我能找到的来自 Whosebug 的所有其他建议。 请指教
----编辑--- 我想我需要知道的是如何覆盖 webpack 附带的 CSP 作为 Create-React-App 的一部分，因为控制台错误消息说 'img src'未定义，因此默认为“默认 src”，设置为 'none'。我相信我已经正确安装了 express-csp-header 并正确设置了 'img src'，为什么浏览器找不到它？
----另一个编辑--- 一直以来我都在想 webpack 一定是浏览器获取错误消息中提到的“default-scr: NONE”的地方。我刚刚搜索了 react-script 中的所有文件，这是 webpack 配置文件所在的位置，没有发现任何“default-scr: NONE”。它是快速设置吗？为什么我要用这个 CRA 应用程序来处理 CSP 而不是我以相同方式创建的其他十几个应用程序？拔头发。
Maybe I just need a second pair of eyes?
是的，在黑暗的房间里很难找到一只黑猫，尤其是当它不在的时候。
Refused to load the image 'http://localhost:3002/favicon.ico' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.
这是误导性诊断消息的一个很好的例子。您的问题与内容安全策略 (CSP) 无关。
只需将 favicon.ico 文件放入 %PUBLIC_URL% 文件夹并添加到 <head> 部分：
<link rel="icon" type="image/x-icon" href="%PUBLIC_URL%/favicon.ico">
全部 nitty-gritty 是 here。简而言之 - 默认情况下，浏览器会尝试从网站的根目录获取图标，因为您没有设置正确的 <link rel="icon" 标签。那里没有图标，所以出现 404 Not Found（无论如何 Express 默认不提供根文件夹）。
您的 CSP 仅发布在“200 OK 页面”上，因此 Express 默认使用自己的 default-src 'none' 来处理不存在的页面（状态代码为 404/403/500/etc）。
这真的会让任何人感到困惑。
PS：很可能 %PUBLIC_URL% 的存在意味着您没有正确设置 PUBLIC_URL / homepage，因为它应该是被真实的 folder/path 取代。我只是在上面的 <link rel="icon" 标记中使用了您的符号。
PPS：我认为如果您添加自定义错误页面处理程序，它有助于避免类似的误导性诊断（代码示例您可以采用 here）。
更新：
Cannot GET /
表示 webpack 不知道要显示什么页面 - defServer{...} output{...} sections misconfigured 或错误的 router()。因此你得到 404 Not Found 页面。 您可以在开发人员工具中查看状态代码 404/200 以及您真正拥有的 Content-Security-Policy HTTP header（here 是教程）。
如果 404 Not Found，webpack 显示 built-in 默认错误页面（因为您没有创建自己的错误页面）。此错误页面由默认 webpack 的 CSP 提供，而不是您的（您的 CSP 将发布在仅具有 200 OK 状态代码的页面上）。
I just searched all of the files in react-script, which is where webpack config files live, and don't find any occurance of "default-scr: NONE"
AFAIK，webpack-dev-server 在 404 页上使用 finalhandler which rejects /favicons 与您遇到的问题完全相同。这样 default-src: 'none' 应该在 node_modules/finalhandler/index.js.
Why am I dealing with CSP with this CRA app and not the other dozen I created the same way?
之前 finalhandler has default-src 'self' so /faficons was not blocks by CSP. But after this thread: default-src should be 'none' in finalhandler at May 2019 - things changed.
我猜你的问题与 CSP 无关，只是 defServer{...} 或 output{...} 配置错误（某些 path: __dirname + 'public/' 或 publicPath: 指向错误的目录）。
CSP 错误只是疾病的一个症状（糟糕的是它是一个假症状），但我们需要治疗一个原因而不是症状。
PS：我认为 %PUBLIC_URL%/favicon.ico 应该是 HTML 中的 http://localhost/favicon.ico，这里也配置错误。