Skip to content

Instantly share code, notes, and snippets.

@amad-person
Last active August 12, 2023 17:38
Show Gist options
  • Save amad-person/f0ef85a2123a2e1fcf8052dcf09eef90 to your computer and use it in GitHub Desktop.
Save amad-person/f0ef85a2123a2e1fcf8052dcf09eef90 to your computer and use it in GitHub Desktop.
Bypass CSP restrictions in create-react-app Chrome extensions

While building a React Chrome extension using the create-react-app utility (v2.x), I came across the following error on loading my unpacked extension:

Refused to execute inline script because it violates the following Content Security Policy directive: “script-src ‘self’
blob: filesystem: chrome-extension-resource:”. Either the ‘unsafe-inline’ keyword, a hash (‘sha256-
GgRxrVOKNdB4LrRsVPDSbzvfdV4UqglmviH9GoBJ5jk=’), or a nonce (‘nonce-…’) is required to enable inline execution.

Basically, this error arises as Chrome (or almost any modern browser) will not allow inline scripts to get executed. This CSP restriction resulted in the above error as the build script in create-react-app bundles the .js files in <script> tags in the <body> of index.html.

To work around this, an update to create-react-app was pushed in v2.0.5. This version includes a configuration option to disable inline scripts in the form of an environment variable, whose value you can set prior to making the production build of your application.

The steps are given below:

  1. Create a .env.production file for storing environment variables that will be used in the production environment.
  2. Add INLINE_RUNTIME_CHUNK=false to your .env.production file.
  3. Now, build your extension. Load the unpacked extension from the 'build' directory that will be created.

Note: This is only applicable to react-scripts version 2.0.5 and greater. To check the version of your application's react-scripts, see your package.json file.

@Manoj-nathwani
Copy link

Thanks so much! This worked 🏆

@0xSiris
Copy link

0xSiris commented Jan 21, 2021

Worked. Thanks!

@eelectronn
Copy link

This is perfect! Thank you so much.

@uginroot
Copy link

Worked. Thanks!

@bl4ckck
Copy link

bl4ckck commented Jul 12, 2021

THANKSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS

@Ari24-cb24
Copy link

Oh that helped a lot!

@phatnguyenuit
Copy link

Wow, this helps me a lot.
Thank you!

@LogeshRavi
Copy link

It's working , thank you

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment