I recently added CSP header to my project.
At the same time, I am also using PDFTron webviewer in my project.
As you know, PDFTron webviewer is rendered in an iframe and after adding CSP headers, I'm getting below error - related frame-ancestors.
Question1 is how can I add a frame-ancestors header to the PDFtron webviewer to bypass this error?
Question2 is the second error related with cross domain is not fixable by adding my domains to configorigin.txt, is it related with the csp header setting?
To Question1: Just change frame-ancestors 'none' to the frame-ancestors 'self' (or to frame-ancestors localhost:* if in your particular browser the 'self' token does not cover a localhost:port_number) to allow embedding PDF webviewer.
To Question2: I think the second error is CSP-related (side effect of CSP blocking) because localhost should not be a cross-origin resource since main page is loaded with the same host name and port number http://localhost:3000.
Related
I get the following error in the Chrome's web console on my deployed React app:
Refused to frame 'https://www.youtube.com/' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'frame-src' was not explicitly set, so 'default-src' is used as a fallback.
However, I have specified frame-src in my index.html like in the following snippet:
<meta http-equiv="Content-Security-Policy" content="frame-src https://www.youtube.com/">
The source for the error is a YouTube embed, and with the meta tag in place the embed works fine on localhost. What could cause this error only to appear on a deployed React app?
Fixed it by adding Content-Security-Policy header on the server. So it wasn't an issue with the front-end code after all.
We are working with websphere portal and curently dealing with chrome mixed content issue,
Mixed Content: The site at 'https://tgcs551.commerce.toshiba.com/' was loaded over a secure connection, but the file at 'http://tgcs04.toshibacommerce.com/cs/groups/internet/documents/document/bl82/mtqw/~edisp/tcxtu_win_614014x.zip?_ga=2.95374741.800005762.1609132621-1301842396.1608820702' was redirected through an insecure connection. This file should be served over HTTPS. This download has been blocked. See https://blog.chromium.org/2020/02/protecting-users-from-insecure.html for more details.
we tried below meta data in our static theme also.
but we had not get any success.
Then we tried to right Content-Security-Policy in our httpd.conf file of http server of our websphere portal.
Header always set Content-Security-Policy "upgrade-insecure-requests;"
Header set Content-Security-Policy "default-src https://tgcs04.toshibacommerce.com; child-src 'none'; object-src 'none'"
Header set Content-Security-Policy "default-src 'none'; img-src 'self'; script-src 'self' http://tgcs04.toshibacommerce.com; style-src 'self'"
But not get any success, and finally we realised by checking logs the request of http://tgcs04.toshibacommerce.com is not going to the http server.
we already have SSL certified website also.
We can't move to https .
so anyone can help us in this solution.
Mixed Content: The site at 'https://tgcs551.commerce.toshiba.com/' was loaded over a secure connection, but...
Just curious how do you loads https://tgcs551.commerce.toshiba.com via https: with invalid cert:
If you are unable to change http://tgcs04.toshibacommerce.com/cs/... to the https: in the HTML code, the Header always set Content-Security-Policy "upgrade-insecure-requests;" should help. But I do not see any Content-Security-Policy in the responce header:
Of course, CSP header should be publushed on the download page(I do not know it Url). but none of https://tgcs04.toshibacommerce.com/cs/, http://tgcs04.toshibacommerce.com/cs/groups/internet/, etc do not have CSP header.
Also weird thing: http://tgcs04.toshibacommerce.com/ redirects to httpS://tgcs04.toshibacommerce.com/, http://tgcs04.toshibacommerce.com/cs/groups/ redirects to https: too. But http://tgcs04.toshibacommerce.com/cs/groups/internet/... already does not have redirect.
Also all the Urls above redirects to login page, but direct download http://tgcs04.toshibacommerce.com/cs/groups/internet/documents/document/bl82/mtqw/~edisp/tcxtu_win_614014x.zip is possible without auth. Was is intended so?
Fix the SSL certs (may be it's better to generate wildcard cert *.toshibacommerce.com) and make to be published CSP header.
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.
Im using Bootstrap and AngularFire for my Web project. Everything ok but when I host it on Firebase.com. The layout has changed
Errors:
Mixed Content: The page at 'https://......firebaseapp.com/' was loaded over HTTPS, but requested an insecure stylesheet 'http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'. This request has been blocked; the content must be served over HTTPS.
Mixed Content: The page at 'https://......firebaseapp.com/' was loaded over HTTPS, but requested an insecure script 'http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'. This request has been blocked; the content must be served over HTTPS.
What happens with Bootstrap? Thanks in advance!
Firebase uses HTTPS to serve content. As you can see from the error, you are referring the content to be loaded over HTTP. Though this should not be happening, but it could be one of recent features of Chrome where they block, non-secure requests over a secure channel.
In order to solve it, you should change the URLs in your code to point at HTTPS versions of Bootstrap CDN.
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js
Further Read: https://support.google.com/chrome/answer/1342714?hl=en
I was having the same issue:
you just need to make the http to https
in the bootstrap link inside the code.
That will resolve the issue.
I have one angular js application which is running on nodejs. I want to load an external site, the external site is also my application which is running on different IP, with-in a div while loading the template url. So in template url I mentioned one HTML file. Inside that HTML file I had written like this.
<iframe src="myexternalurl"></iframe>
But in error console it is coming like:
Refused to display 'myexternalurl' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.
Change the x-frame-options header to ALLOW-FROM {your app domain}
Apparently on your other application's host/server/app the header x-frame-options set to SAMEORIGIN you need to disable that header or correct it according to the x-frame-options possible values: https://developer.mozilla.org/en-US/docs/Web/HTTP/X-Frame-Options
You can simply add following line to .htaccess in your external site (If its your application)
Header always unset X-Frame-Options
If you want to allow some specific site. refer the below link
https://developer.mozilla.org/en-US/docs/Web/HTTP/X-Frame-Options