Content Security Policy for the UPCS Embed

If your site sends a Content-Security-Policy header, the browser may block the UPCS embed script or its iframe until you allow them. This page lists what to check. Policies vary a lot between sites, so treat the examples as a starting point and verify them in your own browser console.

What the embed loads

1. A script from https://api.upcs.io/api/embed/upcs-embed.js.
2. An iframe for the map. Its address is the embed_url returned when you create the session.
3. Requests from the embed itself happen inside the iframe, under the iframe's own policy.

Your own endpoint, such as /upcs-session, is same-origin and covered by connect-src 'self'.

Directives to adjust

Content-Security-Policy:
  default-src 'self';
  script-src  'self' https://api.upcs.io;
  frame-src   https://api.upcs.io;
  connect-src 'self';

• script-src must permit https://api.upcs.io for the embed script.
• frame-src (or child-src as a fallback) must permit the host of embed_url. Inspect an actual session response to confirm the host rather than assuming.
• If you load the script with a nonce-based policy, add the nonce to the script tag.

Nonces and inline code

Strict policies block inline <script> blocks, including the small snippet that calls UPCS.mount. Move the snippet into a file you serve from your own origin, or give it a per-request nonce.

<script nonce="{{ nonce }}" src="https://api.upcs.io/api/embed/upcs-embed.js"></script>
<script nonce="{{ nonce }}">/* UPCS.mount(...) */</script>

Test safely

Roll out changes with Content-Security-Policy-Report-Only first, check the console for violations, then enforce. Test with the map on desktop and mobile, and with your checkout flow.

Not the same as origins

CSP is about what your page may load. Allowed origins are about which sites may use your key's sessions. You need both to be correct. If the map fails to appear, work through handling onError and session_expired and the error codes reference.