javascript 由于内容安全策略，谷歌地图 api 脚本确实加载
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13228825/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
google maps api script does load due to content security policy
提问by Om3ga
I am making a google chrome extension where I want to use google maps. The problem is that when I run my script then it gives me this error
我正在制作一个 google chrome 扩展，我想在其中使用谷歌地图。问题是当我运行我的脚本时，它给了我这个错误
Refused to load script from 'https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXXXXX&sensor=false' because of Content-Security-Policy.
Here is my manifest file
这是我的清单文件
{
"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'"
}
}
And I am adding my scripts like this
我正在像这样添加我的脚本
<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>
Why am I getting that error again and again? Please help...
为什么我一次又一次地收到该错误？请帮忙...
Update one
更新一
I added these two permissions to manifest file but still not working
我将这两个权限添加到清单文件但仍然无法正常工作
"https://maps.google.com/*",
"https://maps.googleapis.com/*",
Update two
更新二
I also used this sort of content_security_policy
我也用过这种 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"
But above doesnt work for me either
但以上对我也不起作用
回答by Syed Ghulam Akbar
I think the problem here is that you have not correctly set the content security policy for Google Maps URL. You should change your "content_security_policy" in manifest file to something like this:
我认为这里的问题是您没有正确设置 Google Maps URL 的内容安全策略。您应该将清单文件中的“content_security_policy”更改为如下所示：
"content_security_policy": "script-src 'self' https://maps.googleapis.com https://maps.gstatic.com; object-src 'self'"
This simply means that you are allowing to run script from the self/current page, and from the "https://maps.googleapis.com".
这只是意味着您允许从自身/当前页面和“https://maps.googleapis.com”运行脚本。
Try this, and see if it helps.
试试这个，看看它是否有帮助。
回答by leccmo
I had a same issue and solved by replacing API URL from http to https version.
我遇到了同样的问题，并通过将 API URL 从 http 替换为 https 版本来解决。
In HTML From:
在 HTML 中：
<script type='text/javascript' src='http://maps.google.com/maps/api/js?v=3.3&sensor=false'></script>
To:
到：
<script type='text/javascript' src='https://maps-api-ssl.google.com/maps/api/js?v=3.3&sensor=false'></script>
Then added https://maps-api-ssl.google.comto CPS in manifest.json
然后在 manifest.json 中将https://maps-api-ssl.google.com添加到 CPS
I don't know if you still need this info. But I was googling and spend some time but couldn't find a direct answer, so I wrote here to hope if it helps anyone.
我不知道你是否还需要这些信息。但是我在谷歌上搜索并花了一些时间但找不到直接的答案，所以我写在这里希望它是否可以帮助任何人。
回答by Muhammad
Content Security Policy keeps you in safe from XSS attacks. But it means you need to whitelist external resources explicitly. You can make it by providing additional HTTP headers or by <meta>tag like:
内容安全策略使您免受 XSS 攻击。但这意味着您需要明确地将外部资源列入白名单。您可以通过提供额外的 HTTP 标头或通过以下<meta>标记来实现：
<meta http-equiv="Content-Security-Policy"
content="default-src 'self' data: gap: ws: ;
style-src 'self' https: *.googleapis.com;
script-src 'self' https: *.googleapis.com;
media-src 'none';
font-src *;
connect-src *;
img-src 'self' data: content: https: *.googleapis.com;">
