Chrome Extension: Refused to execute inline script, but no inline scripts present?

Question

I'm trying to build a very basic chrome extension with reactjs. However, I'm getting the following error:

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

I don't understand where this is coming from, considering that I don't seem to have any inline scripts.

newtab.html:

<!DOCTYPE html>
<html>
  <head>
    <title>New Tab</title>
    <script src="react.js"></script>
    <script src="react-dom.js"></script>
    <script src="babel.js"></script>
    <script type="text/jsx" src="test.jsx"></script>
  </head>
  <body>
    <div id='root'></div>
  </body>
</html>

test.jsx:

import React from "react";
import ReactDOM from "react-dom";

class Hello extends React.PureComponent {
  render() {
    return (
      <div>
        <h1>Hello!</h1>
      </div>
    );
  }
}

const element = <Hello />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

manifest.json:

{
  "manifest_version": 2,

  "name": "SuperBasicReact",
  "description": "Just trying to make this work",
  "version": "0.1",

  "chrome_url_overrides": {
    "newtab": "newtab.html"
  },

  "browser_action": {
    "default_title": "SuperBasicReact"
  },

  "permissions": [
    "http://*/*",
    "https://*/*"
  ],

  "content_scripts": [{
    "matches": ["http://*/", "https://*/"],
    "js": ["test.jsx", "babel.js"]
  }],

  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'; default-src 'self'"


}

I'm using chrome version 65.0.3325.162.

Any and all help will be appreciated.

edit:

I have seen "Refused to execute inline script" in ReactJS Chrome Extension even though there are no inline scripts, however, I don't actually see a solution present at that link.

Have you tried to change unsafe-eval by unsafe-inline like suggested by the error message ? — Striped
@Striped unfortunately I then receive the following notice: Ignored insecure CSP value "'unsafe-inline'" in directive 'script-src'. As far as I am aware, chrome ignores the unsafe-inline flag. — Ben
Oh... well I hope someone else has been familiar with this and can help you. Sorry. — Striped
Possible duplicate of "Refused to execute inline script" in ReactJS Chrome Extension even though there are no inline scripts — rsanchez

Moti Korets Moti Korets · Accepted Answer · 2018-03-22T06:12:06

The problem comes from the way Babel in browser script works. Because of CSP limitations on extensions, you will have to transpile the jsx code with Babel locally and only add the transpiled (js) file in your html.

You can run Babel from the command line. Please see the relevant guide here. For later development, consider using a tool such as Browserify with the babelify plugin. See usage examples here.

Chrome Extension: Refused to execute inline script, but no inline scripts present?

3 Answers