Embedded Adobe XD Prototype will not load without 3rd party cookies enabled

Forum|Forum|5 years ago
October 21, 2020
3 replies
1233 views

So I have a prototype embedded (iframe) in a website and it will not load unless 3rd party cookies are enabled. The error it gives is "There was a problem displaying this prototype." which is not very helpful. I have looked everywhere for a solution but I cannot locate one.

Chrome - It will load because 3rd party cookies are enabled by default

Brave - It will not load because it blocks 3rd party cookies by default

Edge - It will not load because it blocks 3rd party cookies by default

Is there a way to disable these 3rd party cookies or is there a different work around?

This topic has been closed for replies.

C

chelsea5FACAuthor

Participant

I have been trying to embed a prototype into a website using the embed code (iframe), but most browsers are blocking the cross site resources in my prototype by default. Since the domain of the prototype and my domain are different, the prototype's cross site resources are blocked.

I assume there is a workaround for this, or something that I am missing, as many people are using embedded XD prototypes in their websites without issues.

I already followed the steps on this page, but this issue has nothing to do with my browsers, it is a web design issue.

Thank you.

Dan Rodney

Community Expert

I just tested an embed and it's working fine in all browsers. With an iframe the resources are not actually being loaded into your page, they are kept within the iframe (like a window in a window), so you should not be getting cross site errors. Have you set more restrictive browser settings maybe? Normal browser settings should not be blocked the embed.

What kind of website are you putting this on? Is it WordPress, custom HTML/CSS, etc.?

— Adobe Certified Expert & Instructor at Noble Desktop | Web Developer, Designer, InDesign Scriptor

C

chelsea5FACAuthor

Participant

"With an iframe the resources are not actually being loaded into your page"

Are you sure about that? When I check the inspector the browser is certainly pulling cross site resources and cookies from adobe through the iframe. When third party cookies/resources are enabled in all of the browsers, everything works fine. However, the default setting on browsers like Edge and Brave is to block 3rd party resources. Chrome is the only browser (that I use) that currently allows third party resources by default. Therefore with the default settings, the resources are blocked, and the prototype is not visible on Edge and Brave. I don't want to make every visitor to the site turn on 3rd party resources/cookies just to view the prototype, I just want it to display even if the visitor is using default settings.

With Edge in particular I get the following errors in the inspector regarding these resources (when 3rd party resources are blocked by default):

In Brave these are the errors I get when 3rd party resources are blocked:

Like I said, these errors go away and the prototype works as intended when the 3rd party resources are permitted.

I am looking for a solution that does not involve making visitors change their browser settings to view the prototype.

"What kind of website are you putting this on? Is it WordPress, custom HTML/CSS, etc.?"

It's a custom HTML/CSS website, nothing fancy.

C

chelsea5FACAuthor

Participant

I should also mention that the direct prototype link works flawlessly when it is not embedded (iframe) into a website, it works on all browsers. It only encounters an error when embedded, which results in 3rd party cookies that are blocked by most browsers.