Javascript chrome扩展拒绝执行内联脚本
我在html文件中使用React编写javascript。我可以在本地web浏览器中成功执行，但当我将其上载到chrome exxtension时，它会报告如下错误： 拒绝执行内联脚本，因为它违反了以下内容安全策略指令：“script src‘self’‘safe eval’”。启用内联执行需要'unsafe inline'关键字、哈希（'sha256-lTIMNTuZotM+E9A4 AGJEQMEUWKDV1BLKXGUPDRD8JWK='）或nonce（'nonce-…'） 我尝试在manifest.json文件中添加“unsafe inline”关键字，但仍然出现相同的错误 我的manifest.json文件如下所示：Javascript chrome扩展拒绝执行内联脚本,javascript,html,reactjs,google-chrome-extension,Javascript,Html,Reactjs,Google Chrome Extension,我在html文件中使用React编写javascript。我可以在本地web浏览器中成功执行，但当我将其上载到chrome exxtension时，它会报告如下错误： 拒绝执行内联脚本，因为它违反了以下内容安全策略指令：“script src‘self’‘safe eval’”。启用内联执行需要'unsafe inline'关键字、哈希（'sha256-lTIMNTuZotM+E9A4 AGJEQMEUWKDV1BLKXGUPDRD8JWK='）或nonce（'nonce-…'） 我尝试在man
{
"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"
}
<!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>
类显示扩展了React.Component{
建造师（道具）{
超级（道具）；
这个州={
网址：[]
}
}
componentDidMount（）{
控制台日志（“测试”）；
var xhr=new XMLHttpRequest（）；
var self=this；//为什么？
xhr.open（“POST”http://34.204.12.200:5000/get_all_tracked“，对）；
console.log（“test1”）；
//如果（xhr.readyState！=4）{
//console.log（“test2”）；
//返回；
// }
xhr.onreadystatechange=函数（e）{
console.log（“test5”）；
if（xhr.readyState==4&&xhr.status==200）{
console.log（“test3”）；
自我状态(
{
URL:JSON.parse（this.response）
});
}
}
//console.log（“test3”）；
//自我状态(
// {
//URL:JSON.parse（this.response）
// });
console.log（“test4”）；
//xhr.open（“POST”http://34.204.12.200:5000/get_all_tracked“，对）；
变量参数={'email'：“tongxiong99@gmail.com"};
send（JSON.stringify（params））；
}
render（）{
if（this.state.url==未定义| | this.state.url.length==0）{
返回（您没有跟踪任何页面）；
}
返回；
}
}
ReactDOM.render(
,
document.getElementById（'root'））
);
谁能解释一下我该怎么做？谢谢 这个示例基本上与我的相关，因此您必须根据它进行一些更改 我想我找到了解决办法。正如警告消息所示，内联脚本被阻止，因为它们违反了内容安全策略（CSP） CSP在www/index.html中定义： 改变 *脚本src*数据：“不安全评估”* 在内容字符串中 *脚本src*数据：“不安全内联”“不安全评估”* 帮我修好了
更多信息不要使用内联脚本。使用一个单独的js文件并在脚本标记的src属性中指定它。我下载了一个react creat应用程序并解决了这个问题。无论如何谢谢你！