My site loads an iframe with content from another domain. I want to give the users of my site the abillity to take a "screenshot". Ideally I want to capture a portion of the iframe and render the read pixels in a div or svg on my site.
But I'm not sure if Javascript is capable of doing something like this. Can Javascript read pixels of an iframe, div or any portion of the screen?
The browser won't let you do it, and here's an example why:
Let's say you run a domain called nefarious-site.com. On the homepage, there is an <iframe> whose src="https://popular-mail-site.com/". Because the mail site is very popular, and because there's a chance the user is logged into to popular-mail-site already, their email will load in the iframe.
When everything finishes loading, nefarious-site uses JavaScript to "screenshot" the iframe and send the image via XHR to the nefarious-site server. Boom. Nefarious-site has now stolen information about the user's mailbox without even needing to go through the trouble of cracking the user's password.
Granted, there are many cases where this wouldn't work -- if the user wasn't logged in or didn't have an account, nefarious-site would get a useless screenshot of a login form or error text. But sometimes it would work, and that's better than nothing.
So yeah, that's why the browser is very conservative about letting you do things like that.
(As an aside, it's probably in popular-mail-site's best interest to set an X-Frame-Options header to prevent the content from rendering in the <iframe> in the first place, but that's neither here nor there.)
