Browser requirements
The CSP and Permissions-Policy headers that silently break an embedded verification, and how to fix them.
Read this before debugging an embedded flow that will not start. Most reports come down to a header on your own page, and browsers report these failures badly, often as nothing at all.
Throughout, use sdk.dev.auvral.com and verify.dev.auvral.com in sandbox.
Content-Security-Policy
If your page sends a Content-Security-Policy, it must allow both the SDK script and the
verification overlay:
Content-Security-Policy:
script-src 'self' https://sdk.auvral.com;
frame-src 'self' https://verify.auvral.com;Missing script-src: AuvralVerification is not defined. The script tag is in your
HTML but the global never appears.
Missing frame-src: init() runs without complaint, the overlay appears, and it is
blank. onResult never fires.
Both log a CSP violation in the console. Filter for Content-Security-Policy if your
console is noisy.
Permissions-Policy
This is the one that costs people an afternoon.
If your page sends Permissions-Policy: camera=(), the camera is disabled for the page
and for everything it embeds. A page cannot grant a permission it does not itself
hold, so the overlay loads, your user reaches the camera step, and the camera never turns
on.
Delegate the permission explicitly:
Permissions-Policy: camera=(self "https://verify.auvral.com")Symptom: the flow renders, the camera step appears, and the camera fails, usually a
NotAllowedError, often with no permission prompt at all. Because your user is never
asked, this reads as "the camera is broken" rather than "permission was denied".
If you send no Permissions-Policy header, there is nothing to fix.
HTTPS
Cameras only work in a secure context, so your page must be served over HTTPS.
localhost counts as secure, so local development works without certificates. A LAN
address such as http://192.168.1.20:3000 does not, which is exactly the setup people
reach for when testing on a phone. Use a tunnel (ngrok, cloudflared) or a local
certificate for that.
Your own page
The overlay covers the viewport at a very high z-index. Two things to check:
- Fixed elements of your own at extreme
z-indexvalues, a support widget or a cookie banner, can end up on top of it. - Scroll-locking your page does for its own modals may fight the overlay. The SDK does not lock scrolling itself.
Quick checklist
Before reporting an integration problem, confirm:
- The page is on HTTPS, or
localhost. -
script-srcallows the SDK host. -
frame-srcallows the verify host. - If you send
Permissions-Policy, it delegatescamerato the verify host. -
allowedOriginsinPOST /v1/sessionscontains your page's exact origin: scheme, host and port, no path. This is whatonResultdepends on. -
AuvralVerification.versionin the console shows the version you expect.