Cordova + Bing 地图 + 内容安全策略

Posted 2023-03-15

【中文标题】Cordova + Bing 地图 + 内容安全策略

【英文标题】：Cordova + Bing Maps + Content Security Policy

【发布时间】：2016-02-14 13:52:13

【问题描述】：

我正在 VisualStudio 2015 中开发一个 Cordova 应用程序。 我正在尝试在其中一个页面中添加 BingMaps 模块以在地图上显示特殊位置。因此，我在 index.html 中引用了这个：

<script type="text/javascript" src="ms-appx:///Bing.Maps.JavaScript//js/veapicore.js"></script>

在我的控制器中，我使用以下命令：

Microsoft.Maps.loadModule(
  'Microsoft.Maps.Map',
  
    callback: function () /*my code here*/
  
);

当我启动应用程序时，出现此错误：

拒绝加载脚本“ms-appx:///Bing.Maps.JavaScript//js/veapicore.js”，因为它违反了以下内容安全策略指令：“default-src 'self' data ：差距：https://ssl.gstatic.com'unsafe-eval'"。请注意，'script-src' 没有显式设置，因此 'default-src' 用作后备。

我的 Content-Security-Policy 是默认行，由 Cordova 插入：

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

我试图更改（并删除）这一行，但没有任何结果。

如果有帮助，我正在 Ripple

中调试应用程序

【问题讨论】：

看看the Cordova Whitelist Guide 我想它会让你对你的问题有所了解。

我真诚地不能（不能让它工作。我知道这条线为我的应用程序设置了强大的安全性，但语法让我迷失了。

BingMaps 似乎需要连接到 ecn.dev.virtualearth.net。因此，我用这个：script-src 'self' http://ecn.dev.virtualearth.net 完成了 CSP，但我仍然收到这两个错误：拒绝连接到 'ecn.dev.virtualearth.net 和 错误：无法在'上执行'打开' XMLHttpRequest': 拒绝连接到'ecn.dev.virtualearth.net（基本一样）

正在使用 angularJS 吗？我看到你说你试图把它放在你的控制器中......如果是这样，它可能与 Angular 的内置安全性有关。看看This *** Link

试过了，没有任何改变...我将 CSP 更改如下：<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'"> 它似乎解决了第一个问题，但我遇到了另一个错误：XMLHttpRequest无法加载 [...]。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，Origin 'localhost:4400' 不允许访问。 我没有任何 php 可以使用 header() 进行编辑，我到底应该如何设置这个域工作？

【参考方案1】：

所以我最终放弃了必应，转而使用 GoogleMaps。老实说，它在第一次尝试时就像魅力一样！这么多使用微软工具...

无论如何...

首先是在index.html中加载gogle API：

<script src="http://maps.googleapis.com/maps/api/js"></script>

然后，在控制器中，将 GoogleMaps API 添加到容器中（如果需要，还可以在中心添加一个图钉：

var tmpMap = new google.maps.Map(document.getElementById('myContainer'), 
    center: 
        lat: parseFloat($scope.lat),
        lng: parseFloat($scope.long)
    ,
    zoom: 12,
    mapTypeId: google.maps.MapTypeId.ROADMAP
);

var tmpMarker = new window.google.maps.Marker(
  position: tmpMap.getCenter(),
  map: tmpMap,
  title: 'My Title'
);

然后，设置容器的大小（与 BingMaps 不同，Google 不会调整容器的大小。因此，如果没有大小，您将看不到任何东西）

最后，将 CSP 设置为接受来自 googleapi.com/* 的代码 在这个示例中，Il 对所有内容都打开了 CSP，这在真正的应用程序上并不是一件好事：

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

瞧！

Google 就是爱，Google 就是生活 :)