Iframe Bridge for Mobile Safari

Target SDK Version: 3.2+

Removed in SDK Version: 5.0.0

If integrating iProov Liveness into an iframed document, you must use Iframe Bridge to support Safari on iOS versions prior to iOS 15.

These affected versions don't support the device sensors we need, even if you grant permission using the iframe feature policy. Here is briefly how we work around that:

1. Iframe Bridge will open the SDK in a new tab
2. The user will perform their Liveness transaction within that tab.
3. When complete, the tab will automatically and seamlessly close, and the host page can continue as normal.

Integration

Step 1: Bind and respond to the iframe_bridge event

The following properties are exposed in event.detail:

Option	Type	Required	Description
sdk	string[]	Optional	Array of chunk(s) containing your production Web SDK's iProovMe.js file. Falls back to JsDelivr.
title	string	Required	The new tab's document title, in a language of your choice
lang	string	Required	BCP47 compliant language string
bodyTemplate	string	Optional	The document body HTML which must contain an element with the ID of iproov-container
criticalCSS	string	Optional	Any critical CSS to display while loading the new page
css	string[]	Optional	Array of any secondary CSS files that you wish to load
js	string[]	Optional	Array of any secondary JavaScript files that you wish to load

See the example:

const iframeBridgeYield = (event) => {
  Object.assign(event.detail, {
    lang: "en",
    title: "iProov - iFrame Bridge",
    bodyTemplate: `
<main role="main">
<section class="text-center mt-4">
<div id="iproov-container" class="mx-auto w-75"></div>
</section>
</main>
`,
    criticalCSS: "body { margin: 0; padding: 0; background: hotpink; }",
    css: Array.from(document.querySelectorAll("link[rel=stylesheet]")).map((link) => link.href),
    js: [],
  })
}

iProovComponent.addEventListener("iframe_bridge", iframeBridgeYield)

Step 2: Optionally, specify the iframe_bridge_button and iframe_bridge_prompt slots.

These slots are displayed if the Web SDK detects it's been instantiated on a webpage inside an iframe on iOS. Note that the SDK does not check the version as we don't know when any bugfix to enable Liveness sensors will be released.

Here is the default markup (label codes internationalised):

<slot name="iframe_bridge_title">
  <h3 class="iproov-lang-heading">iframe_bridge_title</h3>
</slot>
<slot name="iframe_bridge_button">
  <button role="button" type="button" tabindex="1" class="iproov-lang-heading">iframe_bridge_button</button>
</slot>

Step 3: Continue as normal.

Users using iProov Liveness on affected devices will complete Liveness in the new Iframe Bridge tab. When capture is complete, the Iframe Bridge tab seamlessly closes. The host window and Web SDK will receive progress updates as normal.

Event Handling in Iframe Bridge

A selection of key events are transmitted back to the host frame using postMessage.

These events will close the Iframe Bridge tab and run their callback in the host frame:

• streamed
• cancelled
• error
• no_camera
• unsupported

These events will run their callback in both the Iframe Bridge and host frame:

• connected
• progress

In all above cases, the events may dispatch in both contexts. Keep this in mind for analytics and tracking.

Support Checker

IProovSupport.check returns a flags object. The presence of requires_iframe_bridge in flags will indicate that Iframe Bridge will be used if a user proceeds. No further tests are made on the host window if this is detected.