Running webpack-dev-server for my react app is suddenly giving me an error re: default-src being set to 'none' in the CSP (Content Security Policy) header. CSPs are not enabled by Webpack by default per their docs, and there were no changes (to my knowledge) that would have enabled them. This project is using react 16.9.0 and webpack-dev-server 3.8.0
I've tried each suggested solution here, updating the webpack config to change the header to default-src self and using react-helmet to add meta tags. I did not use create-react-app for this project, and most of the other suggestions I've seen are specific to a project created with such with an HTML file entry point.
I need to identify where the CSP header is being enabled and either disable it or change the default-src. Any pointers would be greatly appreciated.
Related
I setup react project by create-react-app and I found that the subfolder of react won't able to autoload when I create a new file, eg
<!-- file: /public/subfolder/index.html -->
<p>subfolder content here</p>
anyone knows how? According to the official react doc, it looks like react doesn't allow this kind pattern? Anyone knows more content?
This is not actually a restriction from React itself. That was how Webpack has configured in create-react-app. Please look at the below code snippet of a typical Webpack config file in a React application. If we need more custom configuration, we have to manually configure Webpack and Babel as per our requirements.
Link for the documentation: The best webpack configurations for React applications
So the changes made before having this issue are upgrading to webpack 5 and changing AWS EC2 instances. So I checked Nginx config and webpack config files and didn't notice anything wrong. If open a new browser tab and enter the CSS file link, I am able to get the CSS file but occasionally need to fetch the 2nd or 3rd time to get the file. When the website loads, the CSS file seems not be able to loaded at the same time. In the HTMLWebpackPlugin, I have set the scriptLoading as 'blocking'. Any idea how to debug and fix this issue? Another questions, only webpack generated js and CSS file has load issue, the other files like flexbox.min.css has no issue to load.
Update: I downgraded to using webpack4 and this issue is gone. If anyone has an idea or knows any configuration regarding this, please please let me know.
Thanks
I have set up a new website using the Material UI Create React Template.
I added a Content Security Policy, built successfully and deployed, however the page doesn't display in the browser and I receive the following error:
Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-mB4hl8euSw00eXDUIRf8KeqpMfBXgg0FILGScPTo+n0='), or a nonce ('nonce-...') is required to enable inline execution.
I don't have any inline scripts.
When I add the specified hash to my Content Security Policy, the website works, but if I deploy again, the hash changes and I need to update my Content Security Policy with the new hash.
Where does the hash comes from and is it possible to avoid needing to update the hash manually each time during deployment?
Thanks for your help so far. I have found the answer to the issue so I'll share it in the hope that it helps someone else.
According to the Advanced Configuration section in the Create React App docs:
By default, Create React App will embed the runtime script into index.html during the production build.
This appears to be the source of the dynamically built scripts.
The documents go further to suggest that the INLINE_RUNTIME_CHUNK=false flag should be included in an .env file to avoid the embedding of scripts.
By including the INLINE_RUNTIME_CHUNK=false flag in an .env file, rebuilding and deploying, I was able to resolve the issue.
Googletagmanager adds inline scripts to your page. You will not be able to enforce a strict script-src (without unsafe-inline) with googletagmanager unless you set this up as follows: https://developers.google.com/tag-manager/web/csp
There could also be other dynamically built scripts that you will also need to handle.
For me the issue was script-src tag was supplied by my backend api that's service the react bundle. It's apparently included with the helmet middleware and I was using that.
Once I removed it, it started working.
I see a static folder in chrome dev tools for my site which has a js subfolder that shows all my react components. I was under the impression that only the minified/webpack output file would be delivered to chrome.
You can set devtool: 'none' or if you're using webpack 4, you can try using --production flag (which effectively does the same thing) to disable sourcemaps. The legible code that you see is due to sourcemaps - your actual code is not being served.
Is there a way I can turn my existing angular-cli into an angular project(with no cli)?
I want to do try something in my app, I get cros problem when i try to use form authentication even my server allow cors. so I don't want to use localhost 4200.
If you are using
Angular 1 : you can convert by adding all dependencies file paths in the index.html
Angular 2 : You should use transpiler(like babel ..) to convert your typescript code to javascript code and give those java script file paths in the index.html to work.(recommended to use angular-cli)
If you are facing CORS issue, for development workaround you can add CORS plugin to the chrome