Content Security Policy, CORS & Subresource Integrity

The Mapsted Maps JavaScript API loads a script from the Mapsted prod origin and renders the map inside an iframe from the Mapsted map origin. If your site sends a Content Security Policy (CSP) — most enterprise sites do — you must allow those origins, or the map will fail to load with a console CSP violation.

The origins involved

Purpose	Origin	Loaded as
API script (maps.js)	https://mapi.mapsted.com	<script src>
Map application (iframe)	https://maps.mapsted.com	<iframe> + postMessage

There is a single prod origin for the script (mapi.mapsted.com); it serves every version directly. The map itself is embedded from maps.mapsted.com.

CSP directives to add

Add the Mapsted origins to your existing policy (merge with your own values — don't drop directives you already rely on):

Content-Security-Policy:
  script-src  'self' https://mapi.mapsted.com;
  frame-src   'self' https://maps.mapsted.com;
  connect-src 'self' https://mapi.mapsted.com https://maps.mapsted.com;
  img-src     'self' data: https://maps.mapsted.com;
  style-src   'self' 'unsafe-inline';

• script-src — allows the maps.js bootstrap from mapi.mapsted.com.
• frame-src (a.k.a. child-src) — allows the map iframe from maps.mapsted.com.
• connect-src — allows the API's postMessage/fetch traffic to the map and version origins. It also covers the preconnect/dns-prefetch hint the SDK adds for the map origin at init() (a performance optimization that warms the connection before the iframe loads). The map still works without the map origin in connect-src — you would just see a CSP report for the hint.
• img-src — map tiles and marker imagery.
• style-src — the embedded map injects inline styles.

If you pin a nonce/hash-based script-src, remember the API is loaded as an external <script src>, so the origin allowlist (not a nonce) is what applies.

frame-ancestors — a note for embedders

frame-ancestors controls which parent pages may embed the map iframe. This directive is set by the map application response (maps.mapsted.com), not by your page — you cannot relax it from the embedding side. Mapsted serves the map with a frame-ancestors policy that permits customer origins so the map can be embedded on your domain.

If the map iframe is blocked on your domain with a frame-ancestors violation, that is a Mapsted-side policy issue, not a change you can make in your own CSP. Contact Mapsted support with your embedding origin. (Internal cross-reference: maps-web issue #468.)

CORS

The API talks to the map primarily via postMessage (not CORS-gated). Any fetch() the API makes to mapi.mapsted.com / maps.mapsted.com is to Mapsted origins that return the appropriate Access-Control-Allow-Origin for third-party embedders. You do not need to proxy Mapsted requests through your own backend. If you self-host any part of the integration behind your own domain, ensure your proxy forwards the Origin header unchanged.

Subresource Integrity (SRI)

The CDN maps.js is versioned by URL (/v4.0.1/maps.js), which pins you to an exact, immutable build:

<script src="https://mapi.mapsted.com/v4.0.1/maps.js?id=YOUR_PROPERTY_ID"></script>

Because the bundle is personalized per property (the ?id= is substituted server-side into the returned JavaScript), a static SRI integrity hash over the response body is not applicable — the bytes differ per property. Pin the version in the URL instead (as above) rather than loading an unversioned "latest" path, so a customer never silently receives a different build. Subscribe to the changelog to adopt new versions deliberately.

Quick verification

After adding the directives, load your page and check the browser console for Refused to load … because it violates the following Content Security Policy messages. Zero CSP violations + a visible map = correctly configured.