Easy way to iframe a url / page preview *as guest* from within admin?

[Chris Bennett]

Edit: Belated memory that iframe sandbox exists, so there is a simple way to provide page preview as guest.

<iframe sandbox="allow-same-origin" src="...">

Prevents get/set of cookies and scripts by default, so simple workaround.
Drawback is that little things like your js dark mode etc won't be active either, but for simple preview needs bit easier than the other things I unsuccessfully tried.

Page preview as guest from within admin... is there an easy strategy?
If any wise heads have any ideas for how I can "log out" only from the iframed link or if there is a query I can pass with the iframe url, I would be very grateful.
Can access the iframed url via js to change things, like successfully getting rid of scrollbars etc, but before I delve further along that route was wondering if there is an easier way.

Making a little mobile preview for favicon generator/webmanifest thing I'm working on.
Not really important (or necessary) - pretty much editor bling to provide instant feedback in a non-new, mid-range android.

Working pretty well, with lots of irrelevant silliness like swapping colors of mobile top icons based on contrast.
Frivolous but kinda fun.

Homescreen / clickable app icon and short_name based on generated favicons and values.
Click homescreen icon to start screen with theme color, app start icon and long name.

Figured I'd throw in iframe of the site to round things out preview-wise.
No problems there, but session remains as admin, so not really a "guest preview" with front-end editing styling, Tracy and various admin stuff.

Edited May 26, 2021 by Chris Bennett
Remembered iframe sandbox exists

[horst]

You need to request the page with a new session. Maybe you can embed a special page, (not the regular front end page), where you fetch the page via WireHttp?

Or, a bit dirty, you name the iframe with a unique id that you check and pick up in the front page via JS and if it is detected, hide all elements you don't want to show there.

[Chris Bennett]

Many thanks Horst, confirmed my thinking.

After happily and messily playing around, a tiny voice deep in my memory whispered "sandbox" ...sheesh.
Been a while since I played around with sandboxed iframes, but the little voice from the past was right.

Simple addition of sandbox to the iframe automatically prevents get/set of cookies.

So I could get it doing what I wanted by adding:

<iframe sandbox="allow-same-origin" src="...">

Apologies for not remembering sooner, I will be busily head-desking over in the corner now ?

[bernhard]

this tool looks interesting! what are you building here? a pw module? or an online service?

[Chris Bennett]

1 hour ago, bernhard said:

this tool looks interesting! what are you building here? a pw module? or an online service?

Thanks Bernard!
The mobile preview bit is from the first pw module I am preparing to release into the wild, very shortly, FaviconMagic.
Been using it for many months now, but wanted to make it shinier and stress test it before offering it up.

Was complicated a little by the background admin styling, which is from another module I plan to release into the wild shortly ...have been using and tweaking it for around 2 years now, since we discussed admin theme tweaking strategies.

Just tweaking FaviconMagic now, adding features and trying to break it so I can make it better.
Planning to throw it up on Github soon - probably within the week - depending on how much stuff I keep adding ?

FaviconMagic is kinda like realfavicongenerator, but I am aiming to take that up a notch (or two) for the processwire community.
I have learned much and the processwire community have always been very gracious with their time and advice.

Adds support for svg favicons (cutting out unnecessary downloads), autogenerates a maskable favicon, generates webmanifest and browserconfig etc.
Basically a shortcut to full PWA requirements, minus the service Worker stuff. You can generate new favicons and play around with a whole heap of stuff without leaving pw admin.

Also uses "smarter" options. For example, short_name is apple app name, unless you choose to over-ride it.
Theme color is similar, you don't need to cut and paste the same stuff multiple times, but advanced config is always available if you desire it. 

Apart from a one-off include in the head of the target doc, there is no copy/paste of markup. Always up to date with your latest tweaks.
No unzipping either. Generation of all png variations from svg resizing for crispy goodness.

More than happy to give you a yell when the beta is up on Github if you'd like, I would love to hear what you think.
 

[bernhard]

Nice!

I've done a similar thing (but very basic and only PNG) lately. The webmanifest is generated on page save and simply exposed via url hook ? Looking forward to seeing what you came up with.

37 minutes ago, Chris Bennett said:

Was complicated a little by the background admin styling, which is from another module I plan to release into the wild shortly ...have been using and tweaking it for around 2 years now, since we discussed admin theme tweaking strategies.

That will get a lot easier with the next dev release of PW ?