Embedded Sending Into an Iframe Refuse to display

[totomaze]

I am using docusign SDK and I implemented the embedded Signing without a problem but Embedded Sending inside of an Iframe does not work

Url return by createSenderView: https://demo.docusign.net/Member/StartInSession.aspx?StartConsole=1&t=xxx&DocuEnvelope=xxx&send=1

that redirect to https://account-d.docusign.com/oauth/auth?response_type=code&scope=all%20click.manage%20me_profile%20room_forms%20inproductcommunication_read%20data_explorer_signing_insights&client_id=xxx&redirect_uri=https%3A%2F%2Fappdemo.docusign.com%2Foauth%2Fcallback&state=%7B%22authTxnIdxxx This url is blocked in chrome based browsers (working in firefox and edge because they are not enforcing the websecurity yet,I can't rely on that)

and then redirect to https://appdemo.docusign.com/prepare/xxx/add-fields

please check https://www.tinywebgallery.com/blog/advanced-iframe/free-iframe-checker with the url : https://account-d.docusign.com Header X-Frame-Options found. The header is set to SAMEORIGIN. You are on a different domain and therefore this page can NOT be included.

Am I missing something ?

[LarryKlugerDS]

account-d.docusign.com is the IdP (identity provider) for the demo (developer) system.

It is only used if there is an authentication issue. It cannot be used in an iFrame since, according to OAuth security recommendations, OAuth authentication should not be done from within an iFrame.

What to do to debug:

• Take the URL from the createSenderView call and try it in a new chrome tab.
• You should NOT be asked to login, you should just see the envelope that you want to send
• If you do see a login: check that the user associated with your app's access token has permission to send the envelope.

My guess is that you're being asked to login which indicates some issue with either the access token vs the envelope, or the envelope is already sent. (The envelope should have status set to created (draft) status.)

When you're able to create a Sender View that doesn't require a login, then you'll be able to include it in an iFrame.

PS. using an iFrame for the Signing Ceremony (recipient view) is not recommended. Doing so will prevent the DocuSign identity verification feature from being used. If the iFrame is anything less than 100% of the screen, then signing on a mobile will not be the best experience for your signers.

[totomaze]

Hi, I never beeing asked to login using this url. I guess it s an autologin part of the sending process. Unless I am doing something wrong during the following call. I am using the JWT token with impersonation. final ViewUrl viewUrl = envelopesApi.createSenderView( credentials.getAccountId(), envelopeId, viewRequest ); Everything works fine in a new tab. I know Iframes are not recommended but we want to avoid opening a new tab as we did for the embedded signing.

I would also mentioned : https://demo.docusign.net/Member/StartInSession.aspx?StartConsole=1&t=xxx&DocuEnvelope=xxx&send=1 Header X-Frame-Options found. The header is set to SAMEORIGIN. You are on a different domain and therefore this page can NOT be included. does not allow the use of iframe either maybe that's why I get redirected to account-d.docusign.

This url should be allowed to be called from another domain in order to be inside in an Iframe.

Is there any special parameter to include in this call in order to be allowed to call this url inside an Iframe?

Thank you

[LarryKlugerDS]

I did a test just now:

1. In current chrome browser
2. JWT authentication
3. Created an envelope in create (draft) status
4. Called sender view to get sender URL (embedded sending)
5. Created a page with an iFrame and used the sender URL.

Result: it worked fine.

Looking at the Network tab of the inspector, I can see that there were two redirects before the final displayed page. None of the redirects was to account-d.docusign.com

One of the redirects does make a report about iFrame security:

[Report Only] Refused to frame 'https://appdemo.docusign.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self' .docusign.com .docusign.net .visual.force.com ndseqa.github.io .ehalalapplication.com .myrclhome.com .inconnet.com.br democrm.ptpfull.pwcstg.myshn.net bo-dev-tlk.lumesse.top .crm.dynamics.com .springcm.com *.wellsfargo.com".

but this is only a report.

I believe the problem is that your envelope (or your account), for some reason, is requiring the user to authenticate himself again.

I would also try opening after clearing cookies. Perhaps you have a current DS login session in the browser.

To eliminate account variables, you could create a new developer account and try that.

Re: iFrames If you want to try without an iFrame you could redirect your current browser tab to the sender view. Then have the sender view redirect back to your app when the envelope is sent. You can store state locally in the browser for when your app is restarted.

Here is the iFrame HTML I used:

<html>
<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="https://demo.docusign.net/Member/StartInSession.aspx?StartConsole=1&t=53571483-8d6d-400d-ae4e-fe7de39c889a&DocuEnvelope=cb2b5ab6-54c8-470e-87ec-e722d43e04f5&send=1" frameborder="0" style="overflow:hidden;height:100%;width:100%" height="100%" width="100%"></iframe>
</body>
</html>

[totomaze]

Thank you for your testing. I did try in a private mode and had still the same problem . I have another demo account for our UAT testing, I ll give it a try with this account tomorrow (Australia Time)

Any particular settings that may lead to my failing situation?

Does your url works inside the iframe test (https://www.tinywebgallery.com/blog/advanced-iframe/free-iframe-checker or https://iframetester.com/ ?

Yes I had to implement the url in a new Tab for now, but we would like to make sure it work into in a IFrame to be consistent with our embedded signing.

Precision about the authentication method, I am using (recommended by the docusign product expert ) : with

[LarryKlugerDS]

It worked fine in https://www.tinywebgallery.com/blog/advanced-iframe/free-iframe-checker

For this test, https://iframetester.com/, the DocuSign web app opened ok but was on the home page of the web app instead of showing the envelope. My guess is that the test tool stripped the query parameters at some point from the URL.

Regarding your app, if you provide the envelope ID of an envelope where the authentication window opened, that might be helpful.

Also, please provide the API log of your envelope create and envelope sender view API calls.

Re authentication: when the DocuSign user is present, it is better to use authorization code grant, not JWT grant. But using JWT grant is ok.

[totomaze]

Thanks, for all your testing.

Some of my tests were failing because another session of DocuSign was opened as you mentioned and also because I had an add blocker (Brave Shield, Brave browser based on chromium). I wasn't expecting this failures since the Embedded Siging was working fine even under this conditions. It looks like the embedded Sending is handled in a very different way than Embedded Signing.

Thank you so much for your help

[LarryKlugerDS]

Hi, am I'm right that you solved the issue? Good job. Yes, the sending web app is quite different from the signing app.

Also note that while the signing app can often be used within an iFrame, an iFrame for signing cannot be used if the Identity Verification feature is used.

[totomaze]

Yeah kind of, a least now I know why it s not working. I ll keep opening the url in a new tab for now. Opening a new tab can be block by chrome by default and using Sending into a Iframe doesn't work with add blocker.

Thank you

[LarryKlugerDS]

I've had good success in opening a new tab in chrome if the JS for opening the new tab is directly associated with a user's action.

Eg, when the user clicks, you could open the new tab with a please wait message and a countdown timer. Meanwhile create the envelope and get the sender view url, then update the new tab's location to be the sender view url

[LarryKlugerDS]

Please connect with me on LinkedIn: https://www.linkedin.com/in/larrykluger/

Thank you, Larry

[totomaze]

Hi, thanks for the tip about the new tab, I think I ll do something similar. :)