Better alternatives to iframes for embedding documents
Why you should avoid iframes and what to use instead.
Table of contents
Most developers, when creating their integration with Docusign, will want to embed the signing experience into their application so that the user doesn’t need to navigate to Docusign to sign an envelope. This helps keep the application simple for the signer and gives them a more user-friendly experience. The signing experience can be displayed in different ways for the end user, and one that I see sometimes is developers using an iframe. The allure of using an iframe is understandable: it seems to be a simple and straightforward way to display the signing experience. However, using iframes can also lead to a web-page-within-web-page like user experience which can feel unintuitive. Additionally, some features such as Identity Verification are not compatible with iframes.
What can go wrong?
Using iframes to embed the Docusign signing experience can lead to a number of issues:
Feature limitations: Docusign offers certain features you may be interested in using, such as Identity Verification, that are not compatible with iframes. Further to this, the OAuth security standard prohibits the use of iframes as outlined in RFC 6819 § 4.4.1.9.
Iframe support changes: Iframe support from the browser vendors is constantly changing, and new security-related restrictions are being introduced on them all the time. Due to the ever-changing landscape surrounding iframes, a workflow you built yesterday may not work tomorrow because of new changes to iframes and how they operate.
Troubleshooting problems: Any time additional layers of complexity are added to a workflow, it increases the difficulty in finding the root cause of the problem, as there are multiple layers to peel back to find the root cause of the issue. In those instances during customer support sessions when I needed to assist in finding the root cause of the issue when using an iframe, I’ve always needed to decouple signing experience from the iframe to troubleshoot the issue, and most of the time the issue was indeed coming from the iframe itself.
Security concerns: There are a lot of causes for concern when using an iframe from the perspective of security as well: for instance, iframes allow for clickjacking; the user cannot see the Docusign URL to know that the destination is correct; and your site becomes vulnerable to cross-site attacks.
Better alternatives
Instead of using an iframe for the sending and signing experience for your users, you should use Docusign JS with focused view to seamlessly embed an agreement within your application, or redirect the browser to the URL and maintain state. By using either of these two methods, you’re mitigating the chances that your application will break due to unexpected changes that you cannot control, and you’re giving your users a more secure and trustworthy experience. Our React code example shows how you can perform both of these methods while using the OAuth authentication flow.
Additional resources
Jonathan Sammons is a Docusign Developer Support Engineer based in the Dublin, Ireland office who has a passion for new technologies. He’s been with Docusign for over 8 years in various support roles.
Related posts