Question

我尝试编写chrome扩展程序，使用ipinfo.io和mesowest.utah.edu API服务从最近的站点返回天气观测值。扩展的期望输出是使用IP地理定位从最近的气象站观测的当前空气温度和风速。

在检查扩展的弹出窗口后，我在jquery执行的发送请求中出现了CSP协议错误。执行此请求的脚本是我的javascript，它使用.get（）方法从API服务（api.mesowest.net）获取观察结果。

原始html和js的工作小提琴可以在http://jsfiddle.net/zK5FN/3467/看到，但不会像打包时那样产生错误并作为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/"
  ]
}

我的JS：

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调用返回的，尽管它在其他编译器中运行良好。现在它从同一行给我4个错误。任何见解都非常感谢。再次感谢！

Answer 1

您不需要使用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，那么您最有可能设置了allow-origin https ：// api.mesowest.net，但您的代码是如错误所示，调用 http ：//api.mesowest.net。（即使您尝试允许 http ，Chrome也会在扩展程序中禁止此操作。）

内容安全政策指令＆＃34; script-src＆＃39; self＆＃39; ＆＃39;不安全-EVAL＆＃39;＆＃34;

1 个答案: