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?
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.
In Firefox, you can use the
.getScreenshot method of the iframe element to get a screenshot of it's contents. See the documentation:
This only works in Firefox, and only in chrome code, not on the web page itself.
©2020 All rights reserved.