Cordova + Bing Maps + Content Security Policy

Question

I'm developing a Cordova application in VisualStudio 2015. I'm trying, in one of the pages, to add a BingMaps module to display a special location on a map. Therefore, I reference this in my index.html :

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

And in my controler, I use the following command :

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

When I launch the application, I have this error :

Refused to load the script 'ms-appx:///Bing.Maps.JavaScript//js/veapicore.js' because it violates the following Content Security Policy directive: "default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'". Note that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.

My Content-Security-Policy is the default line, inserted by 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 *">

I tried to change (and to remove) this line without any result.

If it helps, I'm debugging the application in Ripple

Take a look at [the Cordova Whitelist Guide](https://cordova.apache.org/docs/en/5.0.0/guide/appdev/whitelist/) I think it will give you some insight to your problem. — Tim, Feb 14 '16 at 14:03
I sincerely can(t get it to work. I understand that this line sets a strong security for my application, but the syntax lost me. — Michael Maurel, Feb 15 '16 at 17:57
BingMaps seems to need to connect to _http://ecn.dev.virtualearth.net_. Therefor, I completed the CSP with this : `script-src 'self' http://ecn.dev.virtualearth.net`, but I still get these two errors : **Refused to connect to 'http://ecn.dev.virtualearth.net/** and **Error: Failed to execute 'open' on 'XMLHttpRequest': Refused to connect to 'http://ecn.dev.virtualearth.net/** (which is basicaly the same) — Michael Maurel, Feb 15 '16 at 17:59
Are using angularJS? I see you said you tried to put it in your controller... If so it might be something to do with angular's built in security. Take a look at [This StackOverflow Link](http://stackoverflow.com/questions/20049261/sce-trustasresourceurl-globally) — Tim, Feb 16 '16 at 01:46
Tried it, doesn't change a thing... I change my CSP as follow : `` It seems to solve the first issue, but I've got another error : *XMLHttpRequest cannot load [...]. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4400' is therefore not allowed access.* I don't have any PHP to edit with a header(), how in hell should I set this domaine to work ? — Michael Maurel, Feb 16 '16 at 17:23

score 0 · Accepted Answer · answered Feb 17 '16 at 07:23

So I finaly gave up on Bing, and used GoogleMaps instead. And to be honest, it works like charm on the first try ! So much for using Microsoft tools...

Anyway...

First is to load the gogle API in the index.html :

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

Then, in the controller, add the GoogleMaps API in the container (and adding a pin to the center if needed :

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'
});

Then, setting a size to the container (contrary to BingMaps, Google doesn't resize the container.. So without a size, you won't be able to see anything)

Finaly, set the CSP to accept code from googleapi.com/* In this sample, Il opened the CSP to everything, which is not a good thing to do on a real app :

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

And voilà !

Google is love, Google is life :)

Cordova + Bing Maps + Content Security Policy

1 Answers1