phonegap + ionic 使用 Content-Security-Policy 加载 maps.googleapis.com,如何?

Posted

技术标签:

【中文标题】phonegap + ionic 使用 Content-Security-Policy 加载 maps.googleapis.com,如何?【英文标题】:phonegap + ionic using Content-Security-Policy to load maps.googleapis.com, how to? 【发布时间】:2015-07-11 07:36:14 【问题描述】:

我尝试了多种加载谷歌地图和firebaseio的方法,但均未成功: 这就是我现在拥有的:

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com;
  script-src 'self' https://maps.googleapis.com/* 'unsafe-inline' 'unsafe-eval';
  style-src 'self' 'unsafe-inline';">

我得到:

Refused to load the script 'https://maps.googleapis.com/maps/api/js?libraries=places' because it violates the following Content Security Policy directive: "script-src 'self' https://maps.googleapis.com/* 'unsafe-inline' 'unsafe-eval'".

Refused to load the script 'https://test.firebaseio.com/.lp?start=t&ser=79549912&cb=1&v=5' because it violates the following Content Security Policy directive: "script-src 'self' https://maps.googleapis.com/* 'unsafe-inline' 'unsafe-eval'".

任何想法我做错了什么?

【问题讨论】:

试过'https://maps.googleapis.com/*'而不是https://maps.googleapis.com/* @Sushant,不。我得到The source list for Content Security Policy directive 'script-src' contains an invalid source: ''https://maps.googleapis.com/*''. It will be ignored. fwiw scheme://host/* 不是有效的 CSP 模式。 https://maps.googleapis.com 是你想要完成的。 【参考方案1】:

这成功了:)

<meta http-equiv="Content-Security-Policy"
          content="default-src *;
               script-src 'self' 'unsafe-inline' 'unsafe-eval'
                           127.0.0.1:*
                           http://*.google.com
                           http://*.gstatic.com
                           http://*.googleapis.com
                           http://*.firebaseio.com
                           https://*.google.com
                           https://*.gstatic.com
                           https://*.googleapis.com
                           https://*.firebaseio.com
                           ;
               style-src  'self' 'unsafe-inline'
                          127.0.0.1
                           http://*.google.com
                           http://*.gstatic.com
                           http://*.googleapis.com
                           http://*.firebaseio.com
                           https://*.google.com
                           https://*.gstatic.com
                           https://*.googleapis.com
                           https://*.firebaseio.com
">

还有谷歌脚本&lt;script src="https://maps-api-ssl.google.com/maps/api/js?libraries=places"&gt;&lt;/script&gt;

【讨论】:

【参考方案2】:

用于没有任何限制的开发使用:

<meta http-equiv="Content-Security-Policy" 
      content="default-src * 'unsafe-eval' 'unsafe-inline'">

【讨论】:

您的解决方案用于开发,但不适用于生产。 XSS 不是开玩笑。

以上是关于phonegap + ionic 使用 Content-Security-Policy 加载 maps.googleapis.com,如何?的主要内容,如果未能解决你的问题,请参考以下文章

使用 phonegap-push-plugin 为 ionic3 应用程序“注册”

Ionic + Phonegap 构建应用程序:facebook 和 google 登录,使用本机应用程序

Angular/Ionic/Phonegap 应用程序与 Rails API Web 服务 Auth

iOS 的 Ionic/AngularJS/Phonegap 键盘问题

使用 ionic(cordova phonegap)的 facebook 应用程序邀请

如何从 ionic/cordova/phonegap 中的布局截取屏幕截图?