Search
  1. Home
  2. Documentation
  3. OneSpan Sign
  4. Guides
  5. Feature Guides
  6. iFrame Best Practices

iFrame Best Practices

Last modified: 2024-04-19

iFrame Best Practices

iFrames can be used to integrate the Signer 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.

Code Sample

 body {
    margin: 0;            /* Reset default margin */
}
iframe {
    display: block;       /* iframes are inline by default */
    background: #000;
    border: none;         /* Reset default border */
    height: 100vh;        /* Viewport-relative units */
    width: 100vw;
}

Using Fixed Positioning

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

Code Sample

iframe {
    position: fixed;
    background: #000;
    border: none;
    top: 0; right: 0;
    bottom: 0; left: 0;
    width: 100%;
    height: 100%;
}

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.

Code Sample

html, body {
    height: 100%;
    margin: 0;         /* Reset default margin on the body element */
}
iframe {
    display: block;       /* iframes are inline by default */
    background: #000;
    border: none;         /* Reset default border */
    width: 100%;
    height: 100%;
}

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.

Code Sample

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" >

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.

Full Example

The following code illustrates the best practices described above.

Code Sample

<!DOCTYPE html>
<html>
<head>
  <title></title>
 
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" >
 
  <style>
    html, body {
      margin: 0;
      height: 100%;
    }
 
    body {
      position: relative;
      background: #EEE;
    }
 
    .frame_holder {
      position: absolute;
      top: 50px;
      bottom: 50px;
      left: 50px;
      right: 50px;
      background: #ffffff;
      overflow: hidden;
    }
 
    .my_frame {
      width: 100%;
      height: 100%;
      border: 1px solid #e0e0e0;
    }
  </style>
</head>
 
<body>
  <div class="frame_holder">
    <iframe
      class="my_frame"
      width="100%"
      height="100%"
      frameborder="0"
      scrolling="yes"
      allowTransparency="true"
      src="https://apps.esignlive.com/auth?target=https%3A%2F%2Fapps.esignlive.com%2Ftransaction%2FWghE2Df36wB1CGl6eODNkBn0HiA%3D%2Fsign&loginToken=YXY2R2pOV3pyRnhkcVlzdlNDYjlNZzVjRlZ6WTJVOFFIdFY1a3grSk5TdDZuWkNoZGZ4alFoOWVKcEhGN2VFbWR6RkpSZEN2cDZkMmNjdFlCdXJtS1dSbmFqVlVZbkpLTTJ0cFMzTlpXSGxWVW5OcmRGRkZXbEpQU1dwa1ZHd3hhVXBEZWt0cE1tdFpiV2xtYUV4d1ptNTVORFYxTWtWbVFuaE5PRFE1VjBsMXp5dUQyZmJ0YVZDZzdETjEzLzVBQ1pyalFsOTRBRmsxTWhncXZBN1gxQT09"></iframe>
  </div>
</body>
</html>

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

To show (or hide) a logo you can use the parameter showNseLogoInIframe, found within your packagesettings.

Was this information helpful?
X