Inline script because it violates the following Content Security Policy directive: "script-src 'self'"

Question

I use react-create-app to build my chrome-extension. When I use npm run build in react-create-app I have 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-5='), or a nonce ('nonce-...') is required to enable inline execution.

Error in index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
      integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
      crossorigin="anonymous"
    />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

manifest.json

{
  "manifest_version": 2,
  "name": "IC Project chrome extension",
  "description": "This extension is a starting point to create a real Chrome extension",
  "version": "0.0.1",
  "browser_action": {
    "default_popup": "index.html",
    "default_title": "Open the popup"
  },
  "icons": {
    "16": "assets/icon-128.png",
    "48": "assets/icon-128.png",
    "128": "assets/icon-128.png"
  },
  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
}

You tagged this [tag:react-create-app], but were you really using [tag:create-react-app]? We are looking to retag questions incorrectly tagged with [tag:react-create-app], see [What is the difference between `[create-react-app]` and `[react-create-app]`? Should the latter be aliased to the former?](https://meta.stackoverflow.com/q/419264/3744182) for details. Thanks! — dbc, Jul 18 '22 at 15:55

score 14 · Answer 1 · answered May 23 '20 at 17:05

After a couple of hours full of frustration I've found a working solution. There is a difference in running scripts between Mac and a PC. A lot of answers I found had it inline with a "set" and without. With "&&" and without... Neither one was working for me.

TLDR: use the "cross-env" npm package like this:

cross-env INLINE_RUNTIME_CHUNK=false react-scripts build

This works on a PC and probably on Mac as well. Of course you need to npm install --save-dev cross-env it before.

This worked after installing as a dependency, not a dev dependency since I was running my app in production. Thanks! — Lucas L., Aug 04 '20 at 08:11

score 9 · Answer 2 · answered Apr 27 '20 at 04:13

For those still having problem with the INLINE_RUNTIME_CHUNK not recognized as a command, you need to add set to the build script.

"build": "set INLINE_RUNTIME_CHUNK=false&&react-scripts build"

This way the INLINE_RUNTIME_CHUNK value will be set on building rather than looking for it on the environment variables.

score 5 · Answer 3 · answered Oct 12 '19 at 21:11

5

In package.json, update the "build" script to be:

"build": "INLINE_RUNTIME_CHUNK=false react-scripts build"

answered Oct 12 '19 at 21:11

Anthony

6,422
2
17
34

1

I have error: `'INLINE_RUNTIME_CHUNK' is not recognized as an internal or external command, operable program or batch file.` – Umbro Oct 12 '19 at 22:22
hmm you could try just setting that Environment Variable in your shell and removing it from the build script again. Or adding the .env file and adding it there per https://create-react-app.dev/docs/advanced-configuration and https://create-react-app.dev/docs/adding-custom-environment-variables#adding-development-environment-variables-in-env – Anthony Oct 12 '19 at 22:29

Inline script because it violates the following Content Security Policy directive: "script-src 'self'"

3 Answers3

Linked