Configure Content Security Policy

Content Security Policies (CSPs) reduce the risk of Cross Site Scripting (XSS) and data-injection attacks by declaring which sources the browser is allowed to load resources from. This article describes the CSP directives required to run HERE Maps API for JavaScript.

CSPs should be delivered via the server's Content-Security-Policy response header. Alternatively, in fully client-side environments, you can use an HTML <meta> element, although it does not support all CSP features.

Required directives

worker-src

The API spawns web workers using blob URLs for worker scripts (tile decoding, clustering, etc.):

worker-src blob:;

script-src-elem

All API script files must be allowed. When loading from the same origin (bundled or self-hosted):

script-src-elem 'self';

When loading directly from the HERE CDN:

script-src-elem https://js.api.here.com;

style-src

The HERE Maps UI module (H.ui) injects inline styles at runtime, so 'unsafe-inline' is required. When loading the stylesheet from the same origin:

style-src 'self' 'unsafe-inline';

When loading mapsjs-ui.css directly from the HERE CDN:

style-src 'self' https://js.api.here.com 'unsafe-inline';

connect-src

Network requests are made to the following HERE endpoints:

Minimum directive:

connect-src https://js.api.here.com
            https://*.hereapi.com
            https://interactive.data.api.platform.here.com;

If your page and the API are co-located on the same origin, also add 'self'.

img-src

Marker icons are loaded as images. Inline icons are encoded as data URIs:

img-src data: https://js.api.here.com;

Add 'self' if you serve custom marker images from the same origin.

script-src (WebAssembly)

The API uses WebAssembly (WASM) modules (for example, for geometry decoding in the HARP renderer). To allow WASM execution, add 'wasm-unsafe-eval' to script-src:

script-src 'wasm-unsafe-eval';

This is more targeted than 'unsafe-eval' and restricts evaluation to WebAssembly only, without enabling arbitrary JavaScript eval().

Minimal policy example

The following policy covers bundled (self-hosted) API usage:

default-src 'none';
script-src-elem 'self';
script-src 'wasm-unsafe-eval';
style-src 'self' 'unsafe-inline';
connect-src 'self'
            https://js.api.here.com
            https://*.hereapi.com
            https://interactive.data.api.platform.here.com;
img-src 'self' data: https://js.api.here.com;
worker-src blob:;

CDN-loaded API

When loading API modules directly from https://js.api.here.com, adjust the script and style sources accordingly:

default-src 'none';
script-src 'wasm-unsafe-eval' https://js.api.here.com;
style-src https://js.api.here.com 'unsafe-inline';
connect-src https://js.api.here.com
            https://*.hereapi.com
            https://interactive.data.api.platform.here.com;
img-src blob: data: https://js.api.here.com;
worker-src blob: https://js.api.here.com;

Region-specific setup

South Korea

For South Korea-specific map and REST traffic, add https://*.heremaps.kr to connect-src:

connect-src https://js.api.here.com
            https://*.hereapi.com
            https://*.heremaps.kr
            https://interactive.data.api.platform.here.com;

If your policy includes 'self', keep it and append https://*.heremaps.kr to the same connect-src directive.

Additional security recommendations

• Set default-src 'none' as a baseline to deny everything not explicitly permitted.
• Use frame-ancestors 'self' to prevent your map page from being embedded in third-party frames (clickjacking protection).
• Avoid 'unsafe-eval' — the API does not require it.
• Scope connect-src as tightly as your feature set allows. If you do not use Interactive Map Layers, omit https://interactive.data.api.platform.here.com.