Question

sameorigin set when using Docusing JS for embedding

  • 26 April 2024
  • 3 replies
  • 162 views

Badge +1

Hi,

I am updating an embedded signing flow that uses a iFrame element on a page to use the Docusign JS method defined here (https://developers.docusign.com/docs/esign-rest-api/esign101/concepts/embedding/#docusign-js). I get the recipient URL and pass it to the following code: 

 

var iframurl = "{{iframeUrl}}";

window.DocuSign.loadDocuSign('xxxx').then((docusign) => {
const signing = docusign.signing({
url: iframurl,
displayFormat: 'focused',
style: {

/** High-level variables that mirror our existing branding APIs. Reusing the branding name here for familiarity. */
branding: {
primaryButton: {
/** Background color of primary button */
backgroundColor: '#333',
/** Text color of primary button */
color: '#fff',
}
},

/** High-level components we allow specific overrides for */
signingNavigationButton: {
finishText: 'Custom Button Text',
/** 'bottom-left'|'bottom-center'|'bottom-right', default: bottom-right */
position: 'bottom-left'
}
}
});

/** Event handlers **/
signing.on('ready', (event) => {
console.log('UI is rendered');
});
signing.on('sessionEnd', (event) => {
/** The event here denotes what caused the sessionEnd to trigger, such as signing_complete, ttl_expired etc../ */
console.log('sessionend', event);
});

signing.mount('#agreement');
}).catch((ex) => {
// Any configuration or API limits will be caught here
console.log(ex);
});

“xxx” is set property just hidden for my post. “iframurl” is the envelope URL that I used to set on the iFrame elements src. When I use the DocuSign JS method, a new iFrame is created under a div with id “agreement”. “The src is then set to a different URL that the envelope. The issue is that the browser throws this exception: Refused to display 'https://demo.docusign.net/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.” This indicates that the URL set by the DocuSign JS has a sameorigin header set, so it can’t be embedded, which defeats the purpose. Does anyone know what is happening here or can help? Appreciate it!


3 replies

Userlevel 2
Badge +7

The issue you're encountering with embedding a DocuSign URL in an iFrame is due to the 'X-Frame-Options' HTTP header set to 'sameorigin' by DocuSign. This security measure prevents the page from being displayed in a frame on any domain except the same domain as the one the page is on. To resolve this, you might need to adjust your implementation approach. DocuSign provides methods to embed signing ceremonies or sending consoles via iframes, but you need to ensure that you're using the correct URL format provided by specific DocuSign API methods, such as CreateRecipientViewAsync

For further details, you might want to review DocuSign's guidelines on embedding here.

 

 

Badge +1

Thank you for the response, Justin. 

 

I have had embedding the DocuSign in an iFrame working for some time now, but I have to create the iFrame element and set the source. I am obtaining the URL for the document from a call to the createRecipientView REST API. the According to this DocuSign blog, I should be able to use DocuSign JS and focused view to avoid the pitfalls of using an iFrame. I followed the DocusSign embedding documenation and passed the receipient URL to the DocuSign JS loadDocuSign method. The method created an iFrame for me, set the src, and set it as a child under a div I specified, but when the src loads I get the “sameorigin” issue. I am beginning to think this is a bug.

Badge

Any update ? I’ve got this error when displaying the generated URL using the focused view. But it works fine on iframe,,

 

Refused to frame 'https://127.0.0.1:8000/' because it violates the following Content Security Policy directive: "frame-src 'self' https://docucdn-a.akamaihd.net/ https://apps-d.docusign.com https://demo.docusign.net https://account-d.docusign.com https://proof-d.docusign.net https://identity-d.docusign.net https://azure-demo.docusign.com https://content.googleapis.com https://docs.google.com https://players.brightcove.net https://www.youtube.com https://accounts.google.com https://docusign.sjv.io https://apps.usw2.pure.cloud https://docusign.co1.qualtrics.com/ https://sawmill-stage.docusigntest.com https://docusign.okta.com https://demo.forms.docusign.com".

Reply