HelloSign: How to Solve SameOrigin Error?

Question

I’m seeking to get a HelloSign embedded template working in my web app. I have a created a HelloSign app using the domain name “my_domain_name.app”. I have tried to access that app by running the following code on the client:

HelloSign.init("[client id]");
HelloSign.open({
    url: "https://app.hellosign.com/s/dkqicy67",
    debug: true,
    allowCancel: true,
    container: document.getElementById('hellosign-iframe'),
    messageListener: function(eventData) {
        console.log(eventData)
    }
});

I have my web app running on the specified domain (my_domain_name.app). But I am getting an error message:

Refused to display 'https://app.hellosign.com/sign/lsjeuhdjggauewkyhh' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

How can I correct this?

Answer 1

I'm a HelloSign API Support engineer so happy to help here. I see a couple of things with the code that could be causing this issue.

Where are you pulling the sign_url from? Are you using the Get Embedded Sign URL endpoint (https://app.hellosign.com/api/reference#get_embedded_sign_url) in conjunction with the signature_id? (Note that this is different than the signature_request_id; the signature_id is unique to each signer on the request, whereas signature_request_id is unique to the entire signature request.)

Also, I noticed you do not have a "test_mode" flag on the front-end code, which is another major reason you'd see this error since HelloSign would only allow for the iFrame to pop up on your site only if the app is approved already.

I know this is a little late but I would also recommend upgrading to HelloSign Embedded v2 since this code is our Embedded V1: https://github.com/hellosign/hellosign-embedded/wiki/Migration-Guide-(v1-to-v2)