javascript - React Refused to load the script bundle.js because it violates the following Content Security Policy directive scri

admin管理员组

文章数量:1287579

I have huge troubles getting CSP to work. Background is, I was creating a new web application based on react. The deployment should happens on Azure "Static Web Apps". Thus, the JavaScript app is built and placed in a folder "/build", which is served statically by Azure Cloud, without any server like node.js. I created some JSX-components to add functionality. However, I can't add for example tailwind libraries or stuff and it seems that the reason is the following. When I run "npm run build" followed by "npm run start" locally on my development PC, it creates a bundle.js file with all contents. As I understood this single file is my web app and I think packed with webpack (I am not sure about the magic happening in the background). Visiting the site in the browser, chrome console shows:

Refused to load the script 'http://localhost:3000/static/js/bundle.js' because it violates the following Content Security Policy directive: "script-src-elem 'none'".

And it really does not matter what I do, I can't fix it. I tried editing public/index.html, adding the meta-tag for CSP to allow everything from every source (for debugging only), still same message. Also "npm run start" seems to override my changes when it injects the path of the bundle.js file into public/index.html. I also tried helmet package but all helmet settings are completely ignored (!) when running "npm run start". Only when using "serve -s build", the helmet settings are not ignored and meta tags are "injected", but still same CSP error. It is so strange, I already wasted days and tried everything. I made a completely new project and the plain project also gives this CSP error. Seems like I can not influence it, like the CSP rules are set by the local server that runs when one types "npm run start". Pushing any changes to remote Azure, also has the same CSP error. I don't even know if bundling the app in a single file is the main behavior with react or if you have to do something when you deploy to a server that serves only static files. I am utterly frustrated. Sorry for posting no code, I don't know what I could post, just create a blank new react project with "npx create-react-app" and run "npm install && npm run build && npm run start" to see the problem yourself (in every browser the same).

本文标签：