Embedding an Invision Mockup

rp-7
#1

Has anyone used Invision for mockups, and tried to embed an Invision mockup in an inline frame?

Invision has a “live embed” feature for mockups where it just provides a live embed link that should update it in Axure every time the designer uploads a new mockup version in Invision. It’s a https://invisionapp.com… link.

When I place this link in an inline frame in Axure, it either doesn’t display, or it displays a error screen with an unhappy face. I’m able to place other images and sites in the inline frame with no problem. Was wondering if it’s an Invision issue, https:// issue, or something else…?

Thanks!
Amanda

#2

Hi Amanda,

Hmm, are you getting the error/broken iframe issue in all browsers? Which browsers have you tested on? If you’re testing on Chrome, would it be possible for you to check in the developer’s console for any errors? You can access that by viewing your prototype and then right-clicking the screen and choosing “Inspect Element” from the context menu. In the window that opens, check the “Console” and “Network” tabs for any errors. If you see anything about “mixed content errors”, then the error may be because your prototype is served with HTTP and the inline frame link is served with HTTPS. If that’s the case, you’ll want to try removing the “S” from the Invision link in your iframe target and see if that works.

If you see other errors or if that trick didn’t work, would you mind providing more details and perhaps a screenshot of the error? You could also email the information directly to support@axure.com for faster support so that one of our techs can assist you one on one. If you do email, refer to this link so that they know the original issue as well. Thanks!

#3

Thanks Alyssa!

I tried it in Firefox, and it displayed an error message about how it doesn’t have a valid security certificate. I tried it without HTTPS and just HTTP, and it didn’t show an error msg, but just a blank screen. I also tried to validate the security certificate (by opening the link in a new browser and confirming the security exception. it works on its own, but not in the inline frame in my prototype.

In Chrome, I get this error message:

ET https://invis.io/BZ25IO79X net::ERR_INSECURE_RESPONSE

Looks like it may be something to do with security?

I’ll shoot an email to the support team :slight_smile:

Thanks for your help!
Amanda

#4

Hello!

Amanda wrote in to the support desk about this and I thought I’d summarize our conversation here for anyone who is following along at home.

Some websites have code that prevents them from being opened in Inline Frames. I believe this is done as a security measure. Please refer to this site for more information:

“The X-Frame-Options HTTP response header can be used to indicate whether or not a browser should be allowed to render a page in a <frame>, <iframe> or <object> . Sites can use this to avoid clickjacking attacks, by ensuring that their content is not embedded into other sites.”

This is most likely what was going on in Amanda’s case because she said that other sites seemed to be working fine. So there may be something about the way InVision creates their share pages that prevents loading in Inline Frames.

Hope that is helpful.

Thanks!

Importing an Invision file in to Axure?
#5

https://support.invisionapp.com/hc/en-us/community/topics

Publishing and Sharing