Allow to iframe launch.playcanvas.com

Suggestions & Feedback
#1

Building a product for a customer that is going to be iframe’d into an React app. The React app is going to communicate with the iframe using postMessage.

As the PlayCanvas is reliant on the communication and the fact that launch.playcanvas.com is not allowing to be iframe’d we have a quite cumbersome workflow since we have to build the PlayCanvas app first, then launch the new build and copy the id of it in URL to the React app that reloads and the spins up the PlayCanvas.

For dev purpose is would be really really nice if we could iframe launch.playcanvas.com in the React App as it would speed up our iteration time significantly.

#2

Hi @martin_hgw,

It’s quite doable right now, though due to browser security concerns you need to use a browser extension. I use this workflow quite often when doing dev on a website that uses a Playcanvas app in an iframe.

You need to add an extension to your browser that enables cross domain iframes (ignore x-frame-options).

On the Firefox browser that would be enough I think. On Chrome after v80 there were additional restrictions added for same site cookies. You will have to disable that check otherwise the playcanvas launch iframe page can’t use your credentials and it will fail to load.

image
image745×153 11.4 KB

1 Like
#3

Thank you @Leonidas! You saved my day🏅

Can’t make it work in Chrome (Canary) but works in Firefox and that’s all I needed🙏

1 Like
#4

Happy it works for you, it’s a powerful setup. Chrome is getting harder and harder to work with in this kind of scenario, agreed.

#5

Old topic, but is there a way around this restriction for a device that does not have a customizable browser? I’m messing around with a Google Nest Hub device at the moment, and I currently need to do a full build and deploy in order to see changes on device. It would be awesome if I could start launch.playcanvas.com both already authed and in an iframe. Maybe something like an auth token option available somewhere, and hitting something like https://launch.playcanvas.com/588727?debug=true&auth=jsaeIEnm3892nJs on the device

#6

Not that I know of unfortunately.

You might be able to set up some sort of proxy service that can do something like this where the proxy is already authorised? It’s not something I’ve tried or researched before.

#7

Hey @Leonidas @yaustar,

Just picking this up again late 2022 and wondering if you are still able to launch a playcanvas debug instance in an iframe?

I’ve been attempting to do this from my local dev environment (i.e localhost). Using the “Ignore X-frames” extension allows me to load the playcanvas login page in the iframe, but when trying to login I just get a 403.

I’ve tried allow cookies between sites, but that doesn’t seems to work and it seems #same-site-by-default-cookies is no longer an available flag (I’ve tried Brave, Chrome and Mozilla). Is there a workaround for this that can be done in browser?

Would be super useful to have this as I need to test moving state between the playcanvas instance and my main page as I’m writing majority of the UI with react whilst wrapping the playcanvas scene for 3D.

Thanks!

#8

Hi @tonetechnician,

I think it’s not working currently due to a same domain policy on the login cookie.

Indeed it’s super useful, I agree. @yaustar do you think the server admin may be able to take a look at this? I think if the login cookie policy can be updated it can work again.

1 Like
#9

Thanks @Leonidas for the response and confirmation.

If this is at all possible it would be epic! Would seriously speed up dev flow for these sorts of applications.

Look forward to hearing back from @yaustar

#10

We have a feature request here that I am looking to raise the priority of: Allow iframing the launch tab on localhost · Issue #668 · playcanvas/editor · GitHub

For the exact reason you’ve mentioned here:

Not sure how long it will take or if it’s possible due to security review/concerns

2 Likes