Content-Security-Policy

Most shops don't send a Content-Security-Policy, and can skip this page. If yours does, it has to let the script load, ask its one question, open the try-on's frame, and style its button.

What to allow

Directive	Add	What it is for
script-src	https://app.labbesne.com	The script, /sdk/v1.js
connect-src	https://app.labbesne.com	One small request that asks whether try-on can start for your key
frame-src	https://app.labbesne.com	The try-on, which opens in a frame
style-src	'unsafe-inline'	The button and the sheet carry their own styles, inside a shadow root

For example:

Content-Security-Policy:
  script-src 'self' https://app.labbesne.com;
  connect-src 'self' https://app.labbesne.com;
  frame-src https://app.labbesne.com;
  style-src 'self' 'unsafe-inline'

A directive you don't set falls back to default-src. If your policy has default-src 'self' and no connect-src, the request is blocked just as if connect-src forbade it.

What happens when one is missing

Missing	What you see
script-src	Nothing at all. The browser's console names the blocked script.
connect-src	No button. The console has a message from the script that names connect-src. open() ends in an error with unreachable.
frame-src	The button shows. A tap opens a loading sheet that never fills, and after 15 seconds your page gets an error with frame_timeout.
style-src	The button shows as a plain, unstyled browser button, and the try-on opens in a small box instead of over the page. The console names the blocked styles.

Nonces and hashes

• A nonce on the tag works. If your script-src uses nonces, put yours on the Labbesne tag like on any other script. The script loads no further scripts.
• A hash for the styles does not. The styles change when we update the script, so a style-src hash would break without warning. 'unsafe-inline' in style-src is what works today.
• Don't use integrity on the tag, for the same reason. See Versions.

The camera

The try-on's frame is allowed to ask for the camera. If your site sends a Permissions-Policy header that forbids the camera everywhere, the frame can't use it, and shoppers pick a photo from their device instead.

To let the frame use the camera:

Permissions-Policy: camera=(self "https://app.labbesne.com")

What Labbesne's side sends

You don't set these; they explain what you may see in the console.

• The try-on's frame names the sites that may show it. It answers with frame-ancestors set to your store's list of sites. On a site that isn't listed, the browser refuses the frame and says so in the console. See Sites and image hosts.
• The script is served to any site, with a short cache.