Upon examination, I have identified a potential issue related to the new security protocols in Cordova applications. By default, Cordova restricts calls to external resources. The Bing Maps services operate through specific domains, typically with one or more subdomains.
- https://*.bing.com
- https://*.virtualearth.net
To enhance security, it is recommended to utilize HTTPS over HTTP. These domains can be whitelisted as per the documentation provided here:
For Windows 10 targeting, open the config.xml file within your Cordova project. After locating the line <access origin="*" /> near the top of the file, include the following two additional lines:
<access origin="*.bing.com" subdomains="true" />
<access origin="*.virtualearth.net" subdomains="true" />
If after building your project you encounter issues, verify that your app targets Windows 10 specifically. Check the preference property in the config.xml file to ensure the target version is set to 10.0 like so:
<preference name="windows-target-version" value="10.0" />
After deploying your app, testing on a Windows 10 device should yield positive results. Keep in mind there are known performance challenges with touch controls on Windows 10 phones at present, which our team is actively addressing.
Tip: If using Visual Studio and encountering deployment errors for a Windows Phone, confirm that the build configuration's target platform is set to Windows Phone (Universal).
Initially, troubleshooting revealed differing methods for whitelisting domains based on the target device. Subsequently, the process was adapted for Android devices as well. On Android, domain whitelisting involves configuring content security policy via a meta tag. By default, Cordova includes this meta tag:
<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 *">
Attempting to whitelist mentioned domains initially led to network trace blockages. Notably, Bing Maps necessitates only one URL specification for accessing map control code but utilizes a modular framework requiring dynamic loading of additional resources using inline script tags. Security settings concerning this behavior can be configured within the meta tag.
Consequently, updating the security meta tag to the following empowered the loading of JavaScript and CSS files from designated domains while allowing necessary additional resource retrieval:
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval' 'unsafe-inline' https://*.bing.com https://*.virtualearth.net; style-src 'self' 'unsafe-inline' https://*.bing.com https://*.virtualearth.net; media-src *" >
Combining these adjustments, below is a straightforward code sample for creating a full-screen map within a Cordova application:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval' 'unsafe-inline' https://*.bing.com https://*.virtualearth.net; style-src 'self' 'unsafe-inline' https://*.bing.com https://*.virtualearth.net; media-src *" >
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap' async defer></script>
<script>
var map;
function GetMap() {
map = new Microsoft.Maps.Map('#myMap', {
credentials: 'Your Bing Maps Key'
});
}
</script>
<style>
body, html{
padding:0;
margin:0;
}
</style>
</head>
<body>
<div id="myMap"></div>
</body>
</html>