Mapkit JS: What are the recommended CSP settings?

Question

I'm running Mapkit JS within a Cordova app. It loads the map, but tiles load intermittently and I get a lot of CSP errors in the console.

Can anyone please recommend to me, what are the best CSP settings for using Mapkit JS?

Currently I have image-src, connect-src and style-src pointing to https://*.apple-mapkit.com, as well as default-src.

The main CSP errors I'm getting are for https://gsp10-ssl.ls.apple.com ...Is this a site I should add? Or is it dynamically generated and can change often?

Thanks!

MapKit JS

841

Posted by

KDP_NZ

Reply

Add a Comment

Answer 1

Solved the issue... Some of the CSP settings that Chrome accepted were not so gracefully accepted on Safari, which broke the map.

This final setting worked, and made the map work well on iOS, macOS Safari and macOS Chrome:

Code Block <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: 
          gap: https://*.apple-mapkit.com https://*.ls.apple.com blob:;
          style-src 'self' 'unsafe-inline';
          img-src 'self' https://*.apple-mapkit.com;">

I understand that allowing blob: as a safe URL is quite risky from a security standpoint, so when I perform a security audit before release I will have to take a second look at these settings. In the meantime, for development, it gets me to the functionality I want.

Posted by

KDP_NZ

Add a Comment

Answer 2

I've had success with these CSP settings, and I'm receiving no more errors in the console:

Code Block <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: 
          gap: https://*.apple-mapkit.com https://*.ls.apple.com;
          style-src 'self' 'unsafe-inline';
          worker-src blob:;
          img-src 'self' https://*.apple-mapkit.com;">

The maps load and performs as expected when tested in Chrome, but it fails on MacOS Safari, in the iOS Simulator and on a device (iPhone SE 2nd Gen). All I see is a blank, untiled map which does not allow dragging. However, if I double-tap to zoom in, the tiles then appear and the map is responsive.

Is there any type of --webkit CSS helper that needs to be added to allow proper Mapkit JS performance on Webkit?

Posted by

KDP_NZ

Add a Comment

Answer 3

Solved the issue... Some of the CSP settings that Chrome accepted were not so gracefully accepted on Safari, which broke the map.

This final setting worked, and made the map work well on iOS, macOS Safari and macOS Chrome:

Code Block <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: 
          gap: https://*.apple-mapkit.com https://*.ls.apple.com blob:;
          style-src 'self' 'unsafe-inline';
          img-src 'self' https://*.apple-mapkit.com;">

I understand that allowing blob: as a safe URL is quite risky from a security standpoint, so when I perform a security audit before release I will have to take a second look at these settings. In the meantime, for development, it gets me to the functionality I want.

Posted by

KDP_NZ

Add a Comment

Mapkit JS: What are the recommended CSP settings?

Accepted Reply

Replies