Question

我在html文件中使用React编写了javascript。我可以在本地网络浏览器中成功执行代码，但是当我将其上传到chrome exxtension上时，它报告如下错误：

拒绝执行内联脚本，因为它违反了以下内容安全策略指令：“ script-src'self'https://cdnjs.cloudflare.com'unsafe-eval'”。要启用内联执行，要么是一个关键字（unsafe-inline），要么是一个哈希（'sha256-lTIMNTuZotM + E9A4AGJeqMEUWkdv1blKxgUpdRd8jwk ='），或者是一个随机数（'nonce -...'）。

我试图在manifest.json文件中添加'unsafe-inline'关键字，但仍然是相同的错误。

我的manifest.json文件如下：

{
  "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"
}

我的copy.html文件是：

<!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': "tongxiong99@gmail.com"};
    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>

谁能解释我该怎么办？谢谢！

Answer 1

此示例基本上与我的示例有关，因此您必须根据此示例进行一些更改。

我想我找到了解决方法。如警告消息所示，由于内联脚本违反了内容安全策略（CSP），因此被阻止。

CSP在www / index.html中定义：

更改

* script-src *数据：https://ssl.gstatic.com'不安全评估'; *

在内容字符串中

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

为我修复了该问题。

更多info here.

chrome扩展程序拒绝执行内联脚本

1 个答案: