iFrame Best Practices

iFrames can be used to integrate OneSpan Sign's Classic User Experience or New User Experience into a third-party application.

The following sections describe some best practices for developers who are performing such an integration:

Cross-Origin Resource Sharing

To enhance performance and security, cross-origin communication is actively blocked by all "evergreen browsers" (i.e., browsers that are automatically upgraded to future versions).

This poses various obstacles to Cross-Origin Resource Sharing (CORS), but the following sections illustrate how some of those problems can be overcome:

Creating Session Cookies

To create a session cookie on OneSpan Sign, you may need to:

  1. Create the session by opening the iFrame URL in a new window.
  2. Refresh your page with the iFrame.

You are more likely to need the above procedure if the session is on a mobile device.

Redirecting Outside an iFrame

If you use OneSpan Sign inside an iFrame, and then redirect to another domain from within that iFrame, that domain must disable the X-Frame-Options header. If this isn't done, the page to which you redirect will be blank.

To redirect outside the iFrame, consider using our Event Notifer.

Making an iFrame's Dimensions Dynamic

For the OneSpan Sign product, it's desirable to make an iFrame's height and width dynamic — i.e., to ensure that its dimensions are adjusted automatically so it's always in full view, and its sides are always visible.

The following sections discuss three alternate ways of achieving a full view:

Using Viewport Units

To ensure a full view, you might want to use viewport units and an online calculator.

Using Fixed Positioning

The safest way to ensure a full view is to use fixed positioning.

Using Fixed Dimensions

To ensure a full view, you might want to use fixed dimensions by ensuring that the iFrame uses 100% of the screen.

Preventing Mobile Users from Scaling Content

The following code illustrates how to prevent the users of mobile devices from scaling an iFrame's contents. If you don't do this, your iFrame may stop being in full view.

Adding Momentum-Based Scrolling CSS for iOS Devices

Since you can't always control the dimensions of a iFrame, some content may not be accessible via scrolling. This is especially likely for iOS devices such as iPhones and iPads.

To optimize usability for iOS Devices:

  1. Create a wrapper HTML element for your iFrame (e.g., create a div).
  2. Enable momentum-based scrolling CSS on the wrapper, as illustrated by the following code:
  3. -webkit-overflow-scrolling: touch;

The above procedure ensures that if an iFrame's content is not scrollable, you can scroll the parent element.

Example that Incorporates the Above Tips

The following code illustrates the best practices described above.

The following sections illustrate two alternative ways of adapting the above code to access the OneSpan Sign service:

If you want to remove the logo and session bar from OneSpan Sign's Signing Ceremony, add iframe=true as a query argument in your target URL.

Was this information helpful?