Using the Onfido Web SDK in an iframe

Start here

The <iframe> element in HTML represents a nested browsing context. It embeds the content of an external resource, typically another HTML document, within the current document. This essentially creates a sub-window within the parent document.

Permissions Overview

For security and privacy reasons, whenever a native or web app requires access to the device's hardware, such as camera or microphone, distinct permissions must be requested. Without these permissions you won't be able to enable the camera or microphone input streams. Desktop browsers handle permission with a clear message with a pop-up at the time the access is needed. As a developer, you can use the outcome of this permission in your code and proceed as expected or fallback to an alternative path.

The Onfido Web SDK uses the device's camera and in some cases microphone to capture photos and videos of documents and user biometrics for identity verification. When the SDK is used in a browser, a permission pop-up appears requesting permission from the end user to access the device's camera and/or microphone. In case the permissions are blocked or denied by the user, the SDK provides a screen that explains to the user why those permissions are required and how to enable them.

Managing Permissions

The <iframe> element supports the allow attribute, which specifies a Permissions-Policy for the embedded content. This policy defines a set of restrictions on features accessible to the iframe, such as the device's camera or microphone. These features are typically governed by the origin (source) of the embedded content.

Common iframe permission issues

If the Onfido Web SDK is embedded inside a cross-origin iframe, it may fail to access the camera and microphone. This is a known issue on recent Chrome versions where requests fail in a similar way as if a user denies a permission prompt. You may need to add the following allow attribute to your iframe:

1<iframe
2	src="..."
3	allow="camera *;microphone *;geolocation *;clipboard-read *;clipboard-write *"
4></iframe>

Note: clipboard-read and clipboard-write are used to enable the copy-and-past link option for the cross-device url when the user chooses to Continue on your phone and selects the optional Copy link option.