为什么我得到"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问题.
已针对这个确切的问题搜索并尝试了许多有用的答案，但没有找到适合我的应用程序的答案.也许我只需要第二双眼睛?
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?
错误是:
无法获取/
控制台告诉我这一点:
无法加载资源:服务器响应状态为404(未找到)localhost/:1拒绝加载映像"http://localhost:3002/favicon.ico"，因为它违反了以下内容安全策略指令:"default-src'none'".请注意，未明确设置"img-src"，因此将"default-src"用作备用.
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无法加载资源:服务器响应状态为404(未找到)
localhost/:1 Failed to load resource: the server responded with a status of 404 (Not Found)
我尝试实现express-csp-header的server.js的屏幕截图:
Screenshot of server.js where I tried to implement express-csp-header:
server.js
server.js
index.html的屏幕截图，以显示添加的图像，并且CSP没有meta标签:index.html
Screenshot of index.html to show the added images and that there is no meta tag for CSP: index.html
我已尝试按照其他地方的建议添加标签.我尝试了从stackoverflow中找到的所有其他建议.请告知.
I have tried adding the tag as advised elsewhere. I tried every other suggestion from stackoverflow that I could find. Please advise.
----编辑---我想我需要知道的是如何覆盖Webpack附带的CSP(作为Create-React-App的一部分)，因为控制台错误消息指出未定义'img src'因此它默认设置为默认src"，默认设置为无".我相信我已经正确安装了express-csp-header并正确设置了'img src'，为什么浏览器找不到呢?
----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?
----另一项编辑---在此期间，我一直在思考Webpack必须位于浏览器获取"default-scr:NONE"的位置.错误消息中提到的内容.我只是在react-script中搜索了所有文件，react-script是webpack配置文件所在的位置，并且没有发现"default-scr:NONE"的任何出现.是Express设置吗?为什么我要使用此CRA应用程序处理CSP，而不用相同的方式创建其他十几个CSP应用程序?拔出我的头发.
----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.
拒绝加载图像"http://localhost:3002/favicon.ico"，因为它违反了以下内容安全策略"指令:"default-src'none'".请注意，未明确设置"img-src"，因此'default-src'用作后备.
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> 部分:
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">
所有内容都是此处.简要地说-由于您未设置正确的< link rel ="icon" 标签，默认情况下，浏览器会尝试从网站的根目录获取网站图标.没有图标，因此会出现404 Not Found(无论如何，Express默认不会提供根文件夹).
您的CSP在"200 OK页面"上发布.仅，因此Express默认情况下对不存在的页面(状态代码为404/403/500/etc)使用其自己的 default-src'none'.
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:％PUBLIC_URL％的存在很可能意味着您未设置标记中使用您的符号.
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:我认为，如果您添加自定义错误页面处理程序，则有助于避免类似的误导诊断(代码示例，您可以采用
PPS: I think if you add a custom error pages handler, it help to avoid similar misleading diag (code example you can take here).
更新:
无法获取/
表示Webpack不知道显示哪个页面- defServer {...}输出{...}部分配置错误或错误的router().因此，您会得到404 Not Found页面.您可以在开发人员工具中查看状态代码404/200，以及您真正拥有的Content-Security-Policy HTTP标头(
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).
如果未找到 404 ，则webpack会显示内置的默认错误页面(因为您没有创建自己的错误页面).此错误页面与默认的webpack的CSP一起提供，而不与您的默认CSP一起提供(您的CSP将仅在状态代码为 200 OK 的页面上发布).
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).
我刚刚搜索了react-script中的所有文件webpack配置文件处于活动状态，并且没有发现任何" default-scr:NONE"
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使用 finalhandler拒绝/favicons 在404页上完全与您遇到的问题相同.这样， default-src:'none'应该位于 node_modules/finalhandler/index.js 中.
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.
为什么我要使用此CRA应用程序处理CSP，而不是其他我是用相同的方式创建的吗?
Why am I dealing with CSP with this CRA app and not the other dozen I created the same way?
以前是 finalhandler 具有default-src'self'，因此/faficons 未被CSP阻止.但是在此线程之后: default-src在finalhandler中应该为"none" -已更改.
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.
我想您的问题与CSP不相关，只是配置错误的 defServer {...} 或 output {...} (某些 path:__dirname +'public/'或 publicPath:指向错误的目录).
CSP错误只是该疾病的一种症状(不好的事情是一种虚假症状)，但是我们需要治疗原因而不是症状.
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:我认为它应该代替HTML中的 http://localhost/favicon.ico ，而不是％PUBLIC_URL％/favicon.ico ，在这里也配置不正确
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屋！
