No clean javascript way of taking image screenshots of an iframe on page?

2,461 views
Skip to first unread message

Romain Stievenard

unread,
Aug 20, 2020, 3:39:28 PM8/20/20
to Chromium HTML5
Hi everyone,
I'm currently developing an ad reporting feature on our websites that bundles the ad campaign metadata with the user report (test it at france24.com). 

With programmatic ads and safeframes/cross site protections you cannot access most of the time the rendered html code from the parent page that generates the report.
I'm looking to replace this non working html extract with an image screenshot of just the ad iframe. So that it can more easily be found using reverse image search in Google Ad Manager. I'm pretty surprised that there are no standard way to get an image screenshot in JS these days...

I found the great html2canvas (https://html2canvas.hertzen.com/) library but it does not seem to work with cross site iframes. Same goes with iframe2image (https://github.com/twolfson/iframe2image).

I saw that you can request the user screen video and make an image out of it using MediaDevices.getUserMedia() but it waves 2 problems: 
  1. you loose references to the current page offsets so you cannot get "only" the ad screenshot
  2. the user chooses which screen/window he/she shares, which means it might not be your page, and you won't get any details about the context
  3. Most of users may discard the request as it is very invasive
Do you know any way I could get a screenshot in a lightweight way using widely compatible JS?

Regards,
Romain Stievenard

PhistucK

unread,
Aug 21, 2020, 5:56:57 PM8/21/20
to Romain Stievenard, Chromium HTML5
You cannot take a screenshot of a cross origin iFrame without its cooperation (except using screen sharing, like you mentioned).
Cooperation means, for example, posting a message to the iFrame, asking it to take a screenshot of its content (using the same means you have, html2canvas or similar) and post the screenshot back to you (say, as a data URL string).

This is intentional, as if there were a (legal) way, it would be a privacy and a security issue.
(Illegal ways mean basically exploiting a security hole that may or may not be fixed/patched at anytime and stop working)

PhistucK


--
You received this message because you are subscribed to the Google Groups "Chromium HTML5" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-html...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-html5/64339c03-1dc9-45aa-93c2-58cb9690d467n%40chromium.org.
Reply all
Reply to author
Forward
0 new messages