Chrome extension cant run a fetch request because it violets CSP

Question

I am working on a chrome extension and it does work locally but it gives the following error when launched as a chrome extension:

Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' https://apis.google.com". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.

my manifest file is:

{
  "manifest_version": 2,
  "name": "Fake News Launcher",
  "description": "Check the integrity of news!",
  "version": "1.1.0",
  "icons": {
    "128": "icon_128.png"
  },
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "index.html"
  },
  "permissions": [
    "activeTab"
  ]
}

I tried adding "content_security_policy":"script-src 'self' https://apis.google.com; object-src 'self'" but that did not fix the issue

the function that causes the error is

async function onTestChange() {
  let key = window.event.keyCode;
  let string = $(".fact-input").val();
  //! If the user has pressed enter
  if (key === 13) {
    try {
      const res = await fetch("http://127.0.0.1:5000/create/", {
        method: "POST",
        body: JSON.stringify({
          string,
        }),
        headers: {
          "Content-Type": "application/json",
        },
      });
      const data = await res.json();
      loadingbar(parseInput(data));
    } catch (err) {
      console.log(err);
    }
  }
}

Instead of trying to enable inline execution why don't you just move your code into a .js file? — Nadia Chibrikova, Dec 05 '20 at 19:48
@NadiaChibrikova it is inside a .js file that's the problem, on fetch API call it gives this error. — Turqay Umudzade, Dec 05 '20 at 19:54
It asks you to use unsafe-inline, which suggests there is some in-line code. Can you provide an example of your code? — Nadia Chibrikova, Dec 05 '20 at 19:56
Is this function in the background script? Where is called from? — Nadia Chibrikova, Dec 05 '20 at 20:24

score 0 · Answer 1 · answered Dec 08 '20 at 05:32

Refused to execute inline event handler because...

it means you use inline event handlers in the tags like: <tag onclick='some_js_code'>, <select onchange='js_funct()', <body onload='some_handler()'> etc.
All these requires 'unsafe-inline' in script-src (there is not any workaround using 'unsafe-hashes' and 'hash-value' tokens with cross browser support for now).

Best way to avoid this error and not to use 'unsafe-inline' is to hang event handlers via addEventListener().

Since you do use jQuery it's very easy.

PS: You did not shown full CSP, but the fetch("http://127.0.0.1:5000/create/" requires connect-src 'self' http://127.0.0.1:5000 in Dev and connect-src 'self' in Prod.

Chrome extension cant run a fetch request because it violets CSP

1 Answers1