Question

我正在制作Google Chrome扩展程序，我想使用谷歌地图。问题是，当我运行我的脚本然后它给了我这个错误

Refused to load script from 'https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXXXXX&sensor=false' because of Content-Security-Policy.

这是我的清单文件

{
  "name": "Name",
  "version": "1.0",
  "manifest_version": 2,
  "background": { 
    "scripts": [
      "js/script.js"
    ] 
  },
  "description": "Desc",
  "browser_action": {
    "default_icon": "images/icon.png",
    "default_title": "Title",
    "default_popup": "html/popup.html"
  },
  "permissions": [ 
    "http://*/",
    "http://*.google.com/",
    "http://localhost/*"
  ],
  "content_security_policy": "script-src 'self' http://google.com; object-src 'self'"

}

我正在添加我的脚本

<script src="../js/libs/jquery.js"></script>
  <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXXX&sensor=false"></script>
  <script src="../js/plugins/easing.js"></script>
  <script src="../js/script.js"></script>

为什么我一次又一次地收到错误？请帮忙......

更新

我将这两个权限添加到清单文件但仍无法正常工作

"https://maps.google.com/*",
"https://maps.googleapis.com/*",

更新两个

我也使用了这种content_security_policy

"content_security_policy": "default-src 'none'; style-src 'self'; script-src 'self'; connect-src https://maps.googleapis.com; img-src https://maps.google.com"

但上面对我来说也不起作用

Answer 1

我认为此处的问题是您未正确设置Google地图网址的内容安全政策。您应该将清单文件中的“content_security_policy”更改为以下内容：

"content_security_policy": "script-src 'self' https://maps.googleapis.com https://maps.gstatic.com; object-src 'self'"

这只是意味着您允许从自我/当前页面以及“https://maps.googleapis.com”运行脚本。

试试这个，看看是否有帮助。

Answer 2

我遇到了同样的问题，并通过将API从http替换为https版本来解决。

在HTML中从：

<script type='text/javascript' src='http://maps.google.com/maps/api/js?v=3.3&sensor=false'></script>

要：

<script type='text/javascript' src='https://maps-api-ssl.google.com/maps/api/js?v=3.3&sensor=false'></script>

然后将https://maps-api-ssl.google.com添加到manifest.json

中的CPS

我不知道您是否仍需要此信息。但是我在Google上搜索并花了一些时间但却无法找到直接的答案，所以我写在这里是为了帮助任何人。

Answer 3

内容安全策略使您免受XSS攻击。但这意味着您需要whitelist external resources explicitly。您可以通过提供其他HTTP标头或使用export function sendUserJd(data, dispatch) { dispatch(setFlag()); history.push('/'); return { type: FETCHING_JOBDESCRIPTION_SUCCESS, data: data, } }标签来实现，例如：

<meta>

谷歌地图api脚本由于内容安全策略而加载

3 个答案: