Mapkit JS: What are the recommended CSP settings?

Question

Created Jan ’21

Replies 2

Boosts 0

Views 1k

Participants 1

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!

Answered by KDP_NZ in 656278022

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.

Boost

Answer 1

KDP_NZ OP

Jan ’21

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?

0

Answer 2

KDP_NZ OP

Jan ’21

Accepted Answer

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.

0