内容安全策略指令"script-src 'self‘不安全-eval’“
内容安全策略指令"script-src 'self‘不安全-eval’“
提问于 2018-02-16 05:50:06
我正在尝试编写一个Chrome扩展，使用ipinfo.io和mesowest.utah.edu API服务从最近的站点返回天气观测。扩展部分的期望输出是使用IP地址地理定位从最近的气象站观测到的当前气温和风速。
在检查扩展的弹出后，jQuery执行的发送请求中出现了CSP协议错误。执行此请求的脚本是我的JavaScript，它使用.get()方法从API服务(api.mesowest.net)获得观察。
在http://jsfiddle.net/zK5FN/3467/，中可以看到原始HTML和JavaScript的工作小提琴，但不会产生错误，就像打包并作为Chrome扩展运行时那样：
我的manifest.json是：
{
"manifest_version": 2,
"name": "Sensible Weather",
"description": "This extension will return simple weather obs for a site",
"version": "2.1",
"browser_action": {
"default_icon": "day16.png",
"default_popup": "popup.html",
"default_title": "Weather at your location"
},
"icons": { "16": "day16.png",
"48": "day48.png",
"128": "day128.png"
},
"content_scripts": [
{
"matches": ["https://*.ipinfo.io/", "https://*.api.mesowest.net/"],
"js": ["jquery-3.3.1.min.js", "./popupObs.js"]
}
],
"content_security_policy": "script-src https://ipinfo.io/json/ https://*.api.mesowest.net/ https://synopticlabs.org/api/mesonet/ https://*.github.com/ https://rawgit.com/fairlycasual/willChromeExtension.github.io/master/popupObsAsync.js 'unsafe-eval'; connect-src https://*.api.mesowest.net/ https://ipinfo.io/json/ https://*rawgit.com/ 'unsafe-inline'; object-src https://ipinfo.io/json/ https://*.api.mesowest.net/",
"permissions": [
"activeTab",
"https://*.api.mesowest.net/"
]
}我的JavaScript：
async function getObs() {
var info = await fetch(`https://ipinfo.io/json/`)
.then(resp => resp.json());
var obs = await fetch(`https://api.mesowest.net/v2/stations/nearesttime?&radius=${info.loc},100&limit=1&units=ENGLISH&token=804c1eb09a394255beef8e84b68123bf&vars=air_temp,wind_speed/`)
.then(resp => resp.json());
console.log(obs);
var tempOut;
var windOut;
var stnName = obs.STATION[0].NAME;
var stnDist = obs.STATION[0].DISTANCE;
console.log(stnName);
console.log(stnDist);
// Populate variables with obs to display
if (obs.STATION[0].OBSERVATIONS.air_temp_value_1 !== undefined) {
tempOut = obs.STATION[0].OBSERVATIONS.air_temp_value_1.value;
} else {tempOut = 'temp undefined';}
console.log(tempOut);
if (obs.STATION[0].OBSERVATIONS.wind_speed_value_1 !== undefined) {
windOut = obs.STATION[0].OBSERVATIONS.wind_speed_value_1.value + ' MPH';
} else {windOut = 'no wind data at site';}
console.log(windOut);
var outArr = ['Air temperature is ' +tempOut+' degrees F, wind speed: ' + windOut + '. Observations from the ' + stnName + ' site located ' + stnDist + ' miles from you.'];
console.log(outArr);
document.getElementById('obs').innerHTML=outArr;
}
getObs()我的HTML：
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Security-Policy" content="style-src 'unsafe-inline'; script-src https://*.api.mesowest.org/ https://ipinfo.io/json/ https://*.github.com/ https://rawgit.com/fairlycasual/willChromeExtension.github.io/master/popupObsAsync.js 'unsafe-inline' 'unsafe-eval'; connect-src https://*.api.mesowest.net/ https://ipinfo.io/json/ https://rawgit.com/fairlycasual/willChromeExtension.github.io/master/popupObsAsync.js https://*.github.com/ 'unsafe-inline';">
<script src="../jquery-3.3.1.min.js"></script>
<script type="text/javscript" src="https://ipinfo.io/json/"></script>
<h3>Nearest weather observations by IP geolocation using <a href="http://ipinfo.io">ipinfo.io</a></h3>
</head>
<body>
<div id="mesowest">
<p id="obs">Observations courtesy of the MesoWest API service.
</p>
</div>
<script type="text/javascript" src="https://rawgit.com/fairlycasual/willChromeExtension.github.io/master/popupObsAsync.js"> </script>
</body>
</html>我收到的错误是：
popupObsAsync.js:4 Refused to connect to 'https://api.mesowest.net/v2/stations/nearesttime?&radius=47.9790,-122.2020,100&limit=1&units=ENGLISH&token=804c1eb09a394255beef8e84b68123bf&vars=air_temp,wind_speed' because it violates the following Content Security Policy directive: "connect-src https://*.api.mesowest.net/ https://ipinfo.io/json/ https://*rawgit.com/ 'unsafe-inline'".
getObs @ popupObsAsync.js:4
popupObsAsync.js:4 Refused to connect to 'https://api.mesowest.net/v2/stations/nearesttime?&radius=47.9790,-122.2020,100&limit=1&units=ENGLISH&token=804c1eb09a394255beef8e84b68123bf&vars=air_temp,wind_speed' because it violates the following Content Security Policy directive: "connect-src https://*.api.mesowest.net/ https://ipinfo.io/json/ https://rawgit.com/fairlycasual/willChromeExtension.github.io/master/popupObsAsync.js https://*.github.com/ 'unsafe-inline'".
getObs @ popupObsAsync.js:4
popupObsAsync.js:4 Refused to connect to 'https://api.mesowest.net/v2/stations/nearesttime?&radius=47.9790,-122.2020,100&limit=1&units=ENGLISH&token=804c1eb09a394255beef8e84b68123bf&vars=air_temp,wind_speed' because it violates the document's Content Security Policy.
getObs @ popupObsAsync.js:4
popupObsAsync.js:4 Uncaught (in promise) TypeError: Failed to fetch
at getObs (popupObsAsync.js:4)
at <anonymous>我经历了许多不同的错误，最终得到的只是API调用返回的一个错误，尽管它在其他编译器中运行良好。现在它从同一行中抛出了四个错误。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-02-21 03:32:58
您不需要使用JSONP。
async function getObs() {
const info = await fetch(`https://ipinfo.io/json`)
.then(resp => resp.json());
const obs = await fetch(`http://api.mesowest.net/v2/stations/nearesttime?&radius=${info.loc},100&limit=1&units=ENGLISH&token=804c1eb09a394255beef8e84b68123bf&vars=air_temp,wind_speed`)
.then(resp => resp.json());
console.log(obs);
}但是，如果您确实希望保持CSP，那么很可能您正在设置允许来源的https://api.mesowest.net，但是您的代码正在调用http://api.mesowest.net，，这是错误所指示的。(即使你试图允许http，Chrome也会在扩展中不允许这样做。)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48820818
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号