I have a React App using creact-react-app and Material-UI.
I'm trying to enable CSP headers for my react web app inside AWS CloudFront.
I dont know why, but I keep getting these empty inline "data-emotion" style tags ..
I've set the .env as follows:
ESLINT_NO_DEV_ERRORS=true
INLINE_RUNTIME_CHUNK=false
IMAGE_INLINE_SIZE_LIMIT=0
Try setting the style-src directive as "style-src 'self' 'sha256-2NO5...' 'sha256-47DE...';" with the full hashes as provided in the error messages.
Related
I am trying to add an offline.html fallback page to my React app using the premade service-worker.js and serviceWorkerRegistration.js template files See HERE. Everything is working as it is, but the offline.html file that I placed in the src/offline.html location is not caching. When I open the network tab it is giving 404 error for the offline.html file.
I followed the official guide but had no luck.
It will be helpful if anyone can provide a proper guide.
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.
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.
I am using the INLINE_RUNTIME_CHUNK=false variable in my create-react-app build and it's setting a CSP directive at build time (building on Heroku) for img-src of 'self' data:. I need to modify this to host profile pics coming in from the IDP i'm using, so that img-src directive needs to be changed.
How can I change this as part of the build process? Or should I override the whole CSP string with a meta tag in index.html? Is there a way to configure this on the build step as part of the heroku-postinstall command?
Webpack has a feature of adding nonce to all scripts it loads.
To activate the feature set a __webpack_nonce__ variable needs to be included in your entry script.
Entry file in react app geneated by create react app by defaulty is index.js. So all I need to do is add in entry file:
// ...
__webpack_nonce__ = 'c29tZSBjb29sIHN0cmluZyB3aWxsIHBvcCB1cCAxMjM=';
// ...
And last thing is to enable webpack CSP.
Please note that CSPs are not enabled by default. A corresponding header Content-Security-Policy or meta tag needs to be sent with the document to instruct the browser to enable the CSP. Here's an example of what a CSP header including a CDN white-listed URL might look like: Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted.cdn.com;
However, I got error
'__webpack_nonce__' is not defined
I've tried to declare nonce. Still doesn't work.
webpack_nonce is specified in the entry file and not in the configuration.
So, what I am doing wrong? Maybe docs are missing some key info about that topic? How to enable CSP feature in webpack for React app?
If you are using create-react-app then it may be ESLint that is reporting the error.
Try disabling it for the line:
__webpack_nonce__ = 'c29tZSBjb29sIHN0cmluZyB3aWxsIHBvcCB1cCAxMjM='; // eslint-disable-line no-undef