0

So I am doing a chrome extension with react and when I compile it down to static js it will create inline script and that I am fully aware off therefore I have added

"content_security_policy": "script-src 'self' 'sha256-5As4+3YpY62+l38PsxCEkjB1R4YtyktBtRScTJ3fyLUQ='; object-src 'self'"

but chrome still throws this error

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' 'sha256-5As4+3YpY62+l38PsxCEkjB1R4YtyktBtRScTJ3fyLUQ='". Either the 'unsafe-inline' keyword, a hash ('sha256-5As4+3YpY62+l38PsxCEkjB1R4YtyktBtRScTJ3fyLU='), or a nonce ('nonce-...') is required to enable inline execution.

Am I missing something?

Here's the github repo if you wanna check the code https://github.com/Hugo-Persson/NewTabExtension

Screenshot of the error chrome throws

Hugo Persson
  • 33
  • 1
  • 6

2 Answers2

1

Found solution: Just add .env file to the root of your React project with text

INLINE_RUNTIME_CHUNK=false
0

https://developer.chrome.com/extensions/contentSecurityPolicy.html#JSExecution

You cannot have inline scripts in your extension HTML (Reference - Chrome showing error as: Refused to execute inline script because of Content-Security-Policy).

You must use something like:

<script src="index.js"></script>

Referencing: https://github.com/phonegap/phonegap-app-desktop/issues/801

A user had an issue with his <meta> tags specifically 'unsafe-inline'; media-src *

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">

I would ensure you are not violating what it literally says you are in violation of by checking meta and script tags.

Austin Efnor
  • 166
  • 1
  • 2
  • 16