Widget Content Security Policy (CSP)

Content Security Policy (CSP) is a security feature that helps prevent cross-site scripting (XSS) attacks and other code injection threats. It works by telling the browser which resources (scripts, styles, fonts, etc.) are allowed to load on your page.

CSP is delivered via an HTTP header or a <meta> tag. If your site uses CSP, external resources that aren't explicitly allowed will be blocked by the browser — including the Mapster widget.

If you don't have a CSP configured, the widget will work out of the box with no extra setup needed.

Required CSP Directives

To use the Mapster widget with CSP, add the following domains to your policy:

Full CSP Header Example

Here's a complete Content-Security-Policy header that allows the Mapster widget alongside your own resources:

Content-Security-Policy:
  default-src 'self';
  script-src 'self' https://www.mapster.io https://cdn.jsdelivr.net;
  style-src 'self' 'unsafe-inline';
  connect-src 'self' https://www.mapster.io;
  font-src 'self' https://www.mapster.io;
  img-src 'self' data: blob:;

Using a Nonce

If your CSP uses nonce-based authentication instead of domain allowlisting for scripts, you can add a nonce to the Mapster widget script tag.

A nonce is a random, single-use value generated per request that authenticates specific scripts. This is more restrictive than allowlisting a domain and is considered a best practice for strict CSP policies.

1. Set the CSP header with your nonce

Content-Security-Policy:
  default-src 'self';
  script-src 'nonce-YOUR_RANDOM_NONCE' https://cdn.jsdelivr.net 'self';
  style-src 'unsafe-inline';
  connect-src https://www.mapster.io 'self';
  font-src https://www.mapster.io 'self';
  img-src 'self' data: blob:;

2. Add the nonce to the widget script tag

<script
  nonce="YOUR_RANDOM_NONCE"
  defer
  src="https://www.mapster.io/widget.js"
  widget-id="YOUR_WIDGET_ID"
></script>

What Each Domain Is Used For

API Endpoints

The widget makes requests to the following www.mapster.io endpoints. These are covered by the connect-src directive.

Framework Examples

Next.js

const cspHeader = `
  default-src 'self';
  script-src 'self' https://www.mapster.io https://cdn.jsdelivr.net;
  style-src 'self' 'unsafe-inline';
  connect-src 'self' https://www.mapster.io;
  font-src 'self' https://www.mapster.io;
  img-src 'self' data: blob:;
`;

module.exports = {
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          {
            key: 'Content-Security-Policy',
            value: cspHeader.replace(/\n/g, ''),
          },
        ],
      },
    ];
  },
};

Nginx

add_header Content-Security-Policy "
  default-src 'self';
  script-src 'self' https://www.mapster.io https://cdn.jsdelivr.net;
  style-src 'self' 'unsafe-inline';
  connect-src 'self' https://www.mapster.io;
  font-src 'self' https://www.mapster.io;
  img-src 'self' data: blob:;
" always;

Meta Tag

If you can't set HTTP headers, you can use a meta tag instead. Note that some directives like frame-ancestors are not supported via meta tags.

<meta
  http-equiv="Content-Security-Policy"
  content="
    default-src 'self';
    script-src 'self' https://www.mapster.io https://cdn.jsdelivr.net;
    style-src 'self' 'unsafe-inline';
    connect-src 'self' https://www.mapster.io;
    font-src 'self' https://www.mapster.io;
    img-src 'self' data: blob:;
  "
/>

Troubleshooting

If the widget isn't loading on your site, open the browser console (F12 → Console tab) and look for CSP violation errors. They look like:

Refused to load the script 'https://www.mapster.io/widget.js'
because it violates the following Content Security Policy
directive: "script-src 'self'".