View Hot-Reloading Preview in an iFrame?

I’m building a project in React and part of the project includes Play Canvas. We are displaying the Play Canvas content within an iFrame. There is a tight integration between the React UI and the PC instance in this portion via postMessage. For development purposes, we’d love it if we can view the launch preview of PC in the iFrame as opposed to having to build the project and use the build URL to view the updated PC instance in the React container. The reason for this is we want to be able to take advantage of all of the Hot Reloading goodness that PC provides in development. When we use the preview URL, first of all it tries to take us to a login page, but also in general it blocks the iFrame from framing it due to cross site domain issues, I believe. Is there a way to get a hot-reloading instance of play canvas into an iFrame to make development easier? If not, whats the easiest work flow to publish updates to a PC link that can quickly be reloaded in an iFrame? Thanks!

I’ve managed to get around this with some unsafe changes so please proceed with caution. I strongly recommend doing this with a separate install of Chrome (eg Chrome Beta):

I installed this extension to ignore X frame restrictions: https://chrome.google.com/webstore/detail/ignore-x-frame-headers/gleekbfjekiniecknbkamfmkohkpodhe

And disabled same site security cookies in chrome://flags

2 Likes

Thank you! That worked. This will definitely get me by and make development much easier. Any chance you know how we might accomplish the same thing on an iPad and/or Android tablet? We’re developing our web app to be mobile first, but of course we can emulate MOST of what it would look like and behave like via desktop Chrome. It’s always best to test right on the source early and often though, so although it’s a stretch, if you know the answer I’ll elevate you from hero to superhero in my mind :smiley:

Errrr… I don’t offhand :thinking: I wondering if a proxy like Charles, you might be able to get around the X frame restriction and the same site cookies.

Ah yes. Good ole Charles. Ok, I’ll see if I can think through that a bit. Thanks for the suggestion!

Hi yaustar,

I followed the instructions above and it was working for a month now until yesterday. The iFrame loads the login screen successfully but when I attempt to login, I am getting a 403 error from PlayCanvas for the POST login request.

Do you possibly have any idea what could be the issue? Or any workarounds?

We’ve had to increase site security over the last few months so not sure if there’s a workaround here due to the increased security.

@vaios @sumygin are you guys aware of releases that could have affected this? Or know of a workaround to be able iframe the launch tab?