Browser security configuration for the Klarna web SDK

Allow Klarna in the Content-Security-Policy and Cross-Origin-Opener-Policy headers of the page that loads the Klarna web SDK.

4 min read

Overview

Use this page when a page that loads the Klarna web SDK sends browser security headers. If your checkout page sends neither Content-Security-Policy nor Cross-Origin-Opener-Policy, there's nothing to configure here.

A host missing from your policy breaks part of the checkout without an error the customer sees. The browser blocks the request, and part of the Klarna experience, such as the payment button or the pop-up, doesn't load. Check your policy in the test environment before you go live.

Your setup	What to configure
Your checkout page sends a `Content-Security-Policy` header	Content-Security-Policy
Your checkout page sends a `Cross-Origin-Opener-Policy` header	Cross-Origin-Opener-Policy

Content-Security-Policy

Allow Klarna's hosts. These directives extend your existing policy. If you use a default-src policy, make sure these hosts also appear in the corresponding directives.

MARKUP

1 2 3 4 5 6

script-src   'self' https://x.klarnacdn.net https://js.klarna.com https://js.playground.klarna.com;
style-src    'self' 'unsafe-inline' https://x.klarnacdn.net;
font-src     https://x.klarnacdn.net;
connect-src  'self' https://*.klarna.com https://*.klarnaevt.com https://x.klarnacdn.net;
frame-src    https://*.klarna.com https://x.klarnacdn.net;
img-src      'self' data: https://x.klarnacdn.net https://*.klarnaevt.com https://osm.klarnaservices.com;

Why each of the less obvious entries is needed:

Entry	What it allows
`'unsafe-inline'` in `style-src`	Klarna injects styles for the loading indicators, the overlay, and the scroll lock applied while the pop-up is open. The content varies per purchase, so it can't be covered by a static hash. This applies to styles only. Klarna doesn't require inline script.
`'unsafe-inline'` in `script-src`	Not required. Klarna's scripts load from the hosts above and don't need inline execution. If you use a nonce- or hash-based policy, apply your nonce to the Klarna script tag the same way you do for your own scripts. Klarna needs no exception.
`font-src` and `x.klarnacdn.net` in `style-src`	Klarna's own typeface, loaded through a stylesheet on the CDN.
`https://js.playground.klarna.com` in `script-src`	Where the Klarna web SDK loads its code from when you initialize it with a test (playground) client ID. Without it the SDK doesn't load in the test environment.
`data:` in `img-src`	The Klarna logo on the payment button is embedded directly in the stylesheet.
`https://osm.klarnaservices.com` in `img-src`	The Klarna badge images shown in Payment Presentation when the presentation content can't be loaded.
`https://*.klarnaevt.com` in `img-src`	A fallback used to deliver telemetry when the browser blocks the primary transport. Omitting it degrades silently.
`https://*.klarna.com` in `frame-src`	Covers `js.klarna.com`, which hosts the hidden frame the Klarna web SDK uses for its API calls, and the Klarna payment host that the full-screen fallback loads when the pop-up is blocked. Narrowing this to one host breaks one of them.

Info

Run the policy in report-only mode first and watch for securitypolicyviolation events. It shows you exactly which directives your integration needs before you enforce anything.

Cross-Origin-Opener-Policy

The Klarna Purchase Journey opens in a pop-up, and Cross-Origin-Opener-Policy controls the relationship between your page and that pop-up. Browsers only apply this header to the top-level page. Set it to same-origin-allow-popups, or don't send it. It gives your page the same isolation from documents you did not open that same-origin gives, and it is the value to use with Klarna. Send it as an HTTP response header. Browsers ignore Cross-Origin-Opener-Policy when it's set through a <meta> tag.

Warning

Avoid Cross-Origin-Opener-Policy: same-origin. It cuts the link between your page and the Klarna pop-up, and the Klarna web SDK relies on that link to follow the pop-up while the customer completes the purchase. same-origin-allow-popups gives your page the same isolation from documents you did not open, so use that instead.

Info

Many sites send same-origin without deciding to: several security middlewares set it by default, Helmet among them. Check what your checkout page actually returns before assuming it's required: curl -sI https://your-checkout.example.com/checkout | grep -i cross-origin-opener-policy.

Next steps

Payment Presentation for Hosted Checkout integration: initialize the Klarna web SDK in a top-level Hosted Checkout page.

Web Sdk

Payment Presentation for Hosted Checkout integration

Jump to section...