Auvral

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-index values, 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-src allows the SDK host.
  • frame-src allows the verify host.
  • If you send Permissions-Policy, it delegates camera to the verify host.
  • allowedOrigins in POST /v1/sessions contains your page's exact origin: scheme, host and port, no path. This is what onResult depends on.
  • AuvralVerification.version in the console shows the version you expect.

On this page