I am working on a webpage which integrates the JAVASCRIPT HERE MAPS SDK which works fine so far. For security reasons, we now introduced CSP to the website. Ever since that, HERE maps don't work properly on Safari browser anymore. The map canvas as such is loaded but remains gray with no map details nor working controls. According to the browser console/inspector, several blobs can't be loaded due to CSP violations.
I have not been fiddling around for hours to get the right CSP settings inside my HTML META tag but I just won't get it working on Safari browser. For debugging reasons, I even tried a very unsafe solutions which pretty much "allows everything" just to get it working, but even with this code, the blobs remain blocked:
<meta http-equiv="Content-Security-Policy"
content="default-src * data: gap: content: mediastream: blob: filesystem: about: ws: wss: 'unsafe-eval' 'wasm-unsafe-eval' 'unsafe-inline';
child-src 'self' data: mediastream: blob: filesystem: about: ws: wss: 'unsafe-eval' 'wasm-unsafe-eval' 'unsafe-inline';
worker-src 'self' data: gap: content: mediastream: blob: filesystem: about: ws: wss: 'unsafe-eval' 'wasm-unsafe-eval' 'unsafe-inline';
script-src * data: blob: 'unsafe-inline' 'unsafe-eval';
connect-src * data: blob: 'unsafe-inline';
object-src * data: blob: filesystem: 'unsafe-inline' 'unsafe-eval' ;
img-src * data: blob: 'unsafe-inline';
frame-src * data: blob: ;
style-src * data: blob: 'unsafe-inline';
font-src * data: blob: 'unsafe-inline';
frame-ancestors * data: blob: 'unsafe-inline';">
Anyone else experiencing this or might have a clue, what I might be missing?
Providing an error message would be very useful. But the most likely cause is that there is some default CSP set on your site. Introducing another policy in a meta tag doesn't change anything as content needs to pass all policies present. You should identify how the original policy is set and modify that one instead.