CODEWITHSUNDEEP
javascripthtmlreactjsgoogle-chrome-extension
tong
tong

Reputation: 1211

chrome extension refused to excute inline script

I wrote javascript using React in the html file.I can succesfully excute in my local web browser, but when i upload it on chrome exxtension, it reports error like this:

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

I have tried to add 'unsafe-inline' keyword in the manifest.json file, but still same error.

my manifest.json file is like:

{
  "manifest_version": 2,

  "name": "Price Tracker",
  "description": "This extension will track the price of a page",
  "version": "1.0",

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "index.html"
  },
  "permissions": [
    "tabs",
    "activeTab",
    "identity",
    "identity.email",
    "http://34.204.12.200:5000/"
  ],
  "background": {
    "page": "index.html"
  },
  "content_security_policy": "script-src 'self' 'unsafe-inline' https://ajax.googleapis.com http://cdnjs.cloudflare.com; object-src 'self'", 

  "content_scripts": [
   {
     "matches": ["http://cdnjs.cloudflare.com/*"],
   }
 ],
  "options_page": "copy.html"
}

my copy.html file is:

<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<script type="text/babel">
class Display extends React.Component {
  constructor(props){
    super(props);
    this.state={
      urls: []
    }
  }

  componentDidMount(){
    console.log("test");
    var xhr = new XMLHttpRequest();

    var self = this; //why?
    xhr.open("POST", "http://34.204.12.200:5000/get_all_tracked", true);
    console.log("test1");
    // if (xhr.readyState != 4) {
    //   console.log("test2");
    //   return;
    // }
    xhr.onreadystatechange = function(e){
      console.log("test5");
      if(xhr.readyState===4 && xhr.status===200){
        console.log("test3");
        self.setState(
        {
          urls: JSON.parse(this.response)
        });

      }

    }
    // console.log("test3");
    // self.setState(
    // {
    //   urls: JSON.parse(this.response)
    // });
    console.log("test4");
    // xhr.open("POST", "http://34.204.12.200:5000/get_all_tracked", true);
    var params = {'email': "[email protected]"};
    xhr.send(JSON.stringify(params));
  }

  render() {
    if (this.state.urls === undefined || this.state.urls.length == 0) {
      return (<div>You are not tracking any pages.</div>);
    }

    return;
  }
}

ReactDOM.render(
  <Display />,
  document.getElementById('root')
);
</script>
</head>
<body>
<div id="root"></div>
</body>
</html>

Can anyone explain what i should do? Thanks!

Upvotes: 2

Views: 2891

Answers (1)

Ashish_KS
Ashish_KS

Reputation: 9

This example is basically related to mine so you have to make some changes according to it.

I think I found a fix for it. As the warning message suggests, inline-scripts are blocked because they violate the Content Security Policy (CSP).

The CSP is defined in www/index.html:

Changing

*script-src * data: https://ssl.gstatic.com 'unsafe-eval';*

in the content-string to

*script-src * data: https://ssl.gstatic.com 'unsafe-inline' 'unsafe-eval';*

fixed it for me.

More info here.

Upvotes: 1

Related Questions