
Simulating Website Thumbnails Using Iframes - futhey
https://medium.com/@jamesfuthey/simulating-the-creation-of-website-thumbnail-screenshots-using-iframes-7145269891db#.982oc3hc3
======
jstsch
This is so totally messed up. Having an entire DOM with all the associated
scripts running live, just for a thumbnail. What if you want to show a dozen
of them? What if the user wants to save the image to their machine?

We solve this by taking server side screen shots (currently using slimerjs).
We used HTML2Canvas in the past, but it wasn't reliable enough.

It would be great if there was a built-in browser method though, to just get a
bitmap of the screen in Javascript. I've heard about security considerations
in the past — a prompt for access would not be a problem in our case.

~~~
daenz
> This is so totally messed up. Having an entire DOM with all the associated
> scripts running live, just for a thumbnail.

Agreed. And suppose the "thumbnailed" website had a thumbnail of the parent
linking site...

~~~
stanmancan
Just tested this out, IE and Firefox will only load each page twice, it won't
re-load the original page. Chrome goes a bit deeper, it will load each page
twice, but then stops.

------
daguava
This demonstrates some cool CSS properties, but please never do this in
production.

The resource overhead of just one "thumbnail" will be insane, and your mobile
users will hate you.

This "thumbnail" can then do anything a website can, like alert dialogs and
location requests.

------
niutech
This is madness! Loading the whole page just to show an thumbnail? Don't do
this ever. Better use the free [http://web-capture.net/](http://web-
capture.net/) or [http://pagepeeker.com/](http://pagepeeker.com/)

~~~
SchizoDuckie
Or just use what chrome itself uses:

[http://chromeutils.appspot.com/t/?url={](http://chromeutils.appspot.com/t/?url={){::site.url}}

[http://chromeutils.appspot.com/t/?url=news.ycombinator.com](http://chromeutils.appspot.com/t/?url=news.ycombinator.com)

~~~
lobster_johnson
That returns a blank image for many of the URLs I tried. Is it queueing up for
rendering, or is it not rendering unpopular sites?

------
yid
The interesting thing here is that you can set the iframe size to a regular
desktop-like size, and then use CSS3 transforms to scale the rendered page
down to thumbnail size.

------
rossta
I believe a caveat with this technique is that it won't work for sites that
send the X-Frame-Options header as SAMEORIGIN in supporting browsers.

~~~
tomhallett
Agreed. Another caveat: this technique won't work if the website has iframe
busting javascript code.

The iframe will reset the source of the top level page and will cripple your
app.

If you control the domains you are embedding this won't be a problem, but if
you don't - then it's a risk to be aware of.

~~~
leonkenneth
If your target browsers support it, you can use the `sandbox` attribute and
avoid supplying the `allow-top-navigation` flag to prevent this behaviour.

Granted, this won't prevent other framebusting techniques such as checking the
parent before rendering.

------
janoelze
… and expose the user to 5000 and a half third party tracking scripts in the
process. please don't.

------
vortico
So basically you think the cost of generating a thumbnail of a website (likely
less than 1/100 of a cent) is too expensive, so you make the client do it and
destroy usability in the process by making the page slow to a crawl. Remember,
usability has a value, since you wouldn't make the website in the first place
if people couldn't use it.

------
jensvdh
While this is an interesting approach I would not recommend this for anything
other than desktop websites, where bandwidth and performance are less of an
issue, simply because you are loading every single "Thumbnail" as a full
webpage inside those iframes. Downloading all the associated scripts,
stylesheets and other resources.

