为什么我会得到“default-src: 'none'"?设置 express-csp-header 后 React PWA 应用程序出现内容安全策略错误? [英] 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 应用程序并遇到关于默认设置为 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--- 我想我需要知道的是如何覆盖 webpack 附带的 CSP 作为 Create-React-App 的一部分，因为控制台错误消息说 'img src' 未定义所以它默认为default src"，它被设置为none".我相信我已经正确安装了 express-csp-header 并且正确设置了 'img src'，为什么浏览器没有找到?

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

解决方案

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

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

<块引用>

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

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

所有细节都在这里.简而言之 - 默认情况下，浏览器会尝试从网站的根目录获取 favicon，因为您没有设置正确的 标签.那里没有网站图标，因此会出现 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 配置文件处于活动状态，并且没有发现任何默认-scr:无"

AFAIK，webpack-dev-server 使用 finalhandler 拒绝 /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{...}(某些 路径:__dirname + 'public/' 或 publicPath: 指向错误的目录.
CSP错误只是疾病的一种症状(坏事是假症状)，但我们需要治疗原因而不是症状.

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

noob here. Creating a PWA React app using create-react-app and running into the CSP issue regarding default set to none and no img setting to override it.
Have searched for and tried many, many helpful answers for this exact problem but have not hit upon the one that will work for my app. Maybe I just need a second pair of eyes?

The error is:

Cannot GET /

The console tells me this:

Failed to load resource: the server responded with a status of 404 (Not Found) localhost/:1 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.

localhost/:1 Failed to load resource: the server responded with a status of 404 (Not Found)

Screenshot of server.js where I tried to implement express-csp-header:

server.js

Screenshot of index.html to show the added images and that there is no meta tag for CSP: index.html

I have tried adding the tag as advised elsewhere. I tried every other suggestion from stackoverflow that I could find. Please advise.

----EDIT--- I guess what I need to know is how to override the CSP that comes with webpack as part of Create-React-App because the console error message says that 'img src' is NOT defined so it defaulted to "default src", which is set to 'none'. I believed I have installed express-csp-header correctly and have 'img src' set correctly, why doesn't the browser find that?

----Another EDIT--- Here all this time I was thinking that webpack must be where the browser is getting the "default-scr: NONE" referred to in the error message. 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". Is it an Express setting? Why am I dealing with CSP with this CRA app and not the other dozen I created the same way? Pulling my hair out.

解决方案

Maybe I just need a second pair of eyes?

Yeah, it is difficult to find a black cat in a dark room, especially if it is not there.

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.

This is a great example of a misleading diagnostic message. Your issue have nothing to do with Content Security Policy (CSP).
Just place favicon.ico file into %PUBLIC_URL% folder and add into <head> section:

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

All nitty-gritty is here. Briefly - browser by default tries to get favicon from the root of website, since you do not set right <link rel="icon" tag. There is no favicon there, so 404 Not Found occurs (anyway Express do not serve root folder by default).
Your CSP is published on "200 OK pages" only, so Express by default uses its own default-src 'none' for nonexistent pages (with status codes 404/403/500/etc).

This can really be confusing to anyone.

PS: Quite possible that the presence of %PUBLIC_URL% means you do not set PUBLIC_URL / homepage properly, because it should be substituted by a real folder/path. I just use your notation in the <link rel="icon" tag above.

PPS: I think if you add a custom error pages handler, it help to avoid similar misleading diag (code example you can take here).

UPDATE:

Cannot GET /

means webpack dos not know what page to show - defServer{...} output{...} sections misconfigured or wrong router(). Therefore you get 404 Not Found page. You could to look in the Developer tools is the Status Code 404/200 and which Content-Security-Policy HTTP header you have really got (here is a tutorial).

In case of 404 Not Found, webpack shows built-in default error page (since you do not created your own). This error page is served with default webpack's CSP, not yours (your CSP will be published on pages with 200 OK status code only).

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 uses a finalhandler which rejects /favicons on 404 pages exactly with the same issue you have. In this way default-src: 'none' should be in 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?

Previously 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.

I guess you issue is not CSP related, it's just have misconfigured defServer{...} or output{...} (some path: __dirname + 'public/' or publicPath: points to a wrong dir).
CSP error is only a symptom (bad thing it's a false symptom) of the disease, but we need to treat a cause but not symptoms.

PS: I think instead of %PUBLIC_URL%/favicon.ico it should be http://localhost/favicon.ico in HTML, it's something misconfigured here too.

这篇关于为什么我会得到“default-src: 'none'"?设置 express-csp-header 后 React PWA 应用程序出现内容安全策略错误?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！