iFrame Best Practices
- 09 Oct 2024
- 3 Minutes to read
- DarkLight
- PDF
iFrame Best Practices
- Updated on 09 Oct 2024
- 3 Minutes to read
- DarkLight
- PDF
Article summary
Did you find this summary helpful?
Thank you for your feedback
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:
Create the session by opening the iFrame URL in a new window.
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:
Create a wrapper HTML element for your iFrame (e.g., create a div).
Enable momentum-based scrolling CSS on the wrapper, as illustrated by the following code:
-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 article helpful?