9

We have a nodeJS/angular 4 website which is displaying an iframe from a third party (powerBI Emebdded). We are trying to get develop a feature allowing the end user to take a screenshot of the page including the content of the iframe.

We tried the iframe2image library: https://github.com/twolfson/iframe2image

But we are facing the issue of the same origin policy:

ERROR DOMException: Blocked a frame with origin http://localhost:4200
from accessing a cross-origin frame

As we have no access to the iframe (it's a third party content generated by PowerBI iframe with a dedicated library). We can not bypass the policy by setting the window.document.domain in the iframe to the same domain.

Do you have a solution to suggest us?

Eugene Mihaylin
  • 1,208
  • 1
  • 10
  • 26
romain-nio
  • 1,121
  • 9
  • 24
  • If in any way applicable you could render on your server using e.g. Puppeteer. – seasick Oct 18 '18 at 17:01
  • Hi, thanks ! Very good idea but it's possible to apply some actions on the page (that cannot be catch on our side) so the screenshot will not be the same as the screen of the user! – romain-nio Oct 22 '18 at 07:26
  • warp your iframe with a div and try capture it with [html2canvas](https://html2canvas.hertzen.com/) didnt try it but worth a try – Amit Wagner Oct 22 '18 at 07:46
  • 1
    Javascript from your website is not allowed to access contents of IFrame, even the source codes. This is a security feature and there is no way around it, no matter which plugin you use. If it was possible to access source code of 3rd party IFrame, lot of websites could abuse it and violating users privacy. As a simple example, facebook comment plugin's IFrame contain your profile photo and name. What if a website can access source code inside Facebook comment IFrame using Javascript and know who you are, even before you login or signup to that website? That would be creepy. – Armin Nikdel Oct 22 '18 at 10:06
  • 1
    To circumvent the cross origin policy is not trivial. One way is to configure a reverse proxy with the same origin as your server to sit between the external page and your iframe. The iframe's content will then appear to have the same origin as its parent. Most web servers (NGINX, Apache, Node, etc) have reverse proxy capabilities. – jla Oct 22 '18 at 10:51
  • Apparently you can't create an `iframe` from a different origin. [Here is a post I found useful about that.](https://stackoverflow.com/questions/25098021/securityerror-blocked-a-frame-with-origin-from-accessing-a-cross-origin-frame) – Jean-Marc Zimmer Oct 22 '18 at 07:31

2 Answers2

3

I think this is absolutely not possible, because there is no way to access the elements of the iframe's document. But access to this elements is necessary because all libraries which are rendering html to any form of image need to resolve the Elements inside the document to get the visuals out of it.

Sandro Schaurer
  • 396
  • 2
  • 12
3

In Firefox, you can use the .getScreenshot method of the iframe element to get a screenshot of it's contents. See the documentation:

https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/getScreenshot

This only works in Firefox, and only in chrome code, not on the web page itself.

Erik A
  • 28,352
  • 10
  • 37
  • 55
Eugene Mihaylin
  • 1,208
  • 1
  • 10
  • 26