Take screenshot of a page containing an iframe - javascript

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:
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.

Related

Responsive Iframe height cross-domain without having control of source page

I'm developing a responsive website that will have some iframes, in the iframes I'll load content from other domain which I can't edit it.
So, it is possible somehow, to get the content height? From another domain and without access to source page.
You can't access any content inside an iframe when loading a page from another domain.
It's possible to do cross domain AJAX requests with CORS or JSONP but then you need to have access to the embedded websites. Possibly you could try YQL to get the content. Mirroring on your own server would do the job. Otherwise you will hit SOP.

Same Origin Policy and Facebook

Now I know there are a lot of resources about same origin policy, but I just want a straight up answer for my specific query as I am really struggling to understand.
I am using Facebook plugins on my website, these create iframes that are only visible in the DOM when I use chromes inspect element etc.
Is there a way that I can access these iFrames properties/attributes at all, or is it a resounding "NO CHANCE!". I am spending far too much time on this and I just need to get a final verdict.
Thanks!
Javascript doesn't see the iframe content. Chrome inspector just loads 2 different websites in the same time, yours and the plugins one, so you can play with both of them.
Just curious, how would you like to change it?
In general, JavaScript cannot access iframe content from outside of the iframe, unless the page domain and the iframe domain share the same protocol and host and port. In your case, this could possibly be done using a proxy server to load the iframe content from your domain.
http://en.wikipedia.org/wiki/Same_origin_policy

Understanding Cross-Domain issue in Iframes

This question might seem silly but I need to understand this for clarity.
According to my understanding, cross-domain problem is when the domain of the webpage which contains the IFRAME is different from the domain of the web-page opened in IFRAME.
Going by that logic, nothing should open in IFRAME ever.
When I embed a web-page "bottom:10700" in the IFRAME of my web-page "top:9700", it gives error.I am not able to see the contents in IFRAME. Error is Access denied in accessing property 'constructor'
I am getting the error while accessing the contructor (_1.contructor)
isc.A.Function=function isc_isA_Function(_1){
if(_1==null) return false;
if(isc.Browser.isIE&&typeof _1==this.$a7) return true;
var _2=_1.constructor;
if(_2&&_2.$k!=null){
if(_2.$k!=1)return false;
if(_2===Function)return true
}
This script is run when home page of bottom is opened in an iframe contained in top.
Is there any way, I can make this work. I mean can I set both the domains to be same. I don't have access to remote site's script.
Is resizing the frame after redering it once a cross-domain scenario. If not, then certainly remote site is trying to access the IFRAME element..How can I debug this??
Cross-domain issues are about the communication between iframes. You can always embed any iframe but, if domains differ, iframes cannot interact with each other e.g. execute JS, modify DOM etc.
HTML5 provides a sandbox property that re-enables particular features of the cross-domain iframe interaction. Be careful, it can be dangerous.
It is normal behavior for a page xyz.com to load in an iframe hosted on abc.com. However, you cannot change anything or access its content via code from parent abc.com.
Hope this helped.

Catch Cross Site Scripting Error in iFrame

I have a web page which houses an iframe. Inside the iframe is a website. The website comes from a dynamic url variable so practically any website can be housed inside of the iframe. Some domains of the websites to be housed in the iframe may be forwarding domains. I want to be able to detect, through javascript, that this domain is a forwarding domain. However that is not possible because of cross site scripting securities.
What i have noticed in the chrome console is that when i try to access information from the the website housed inside the iframe, there is an actual error message displayed by chrome. However i have not been able to obtain that error message in my javascript. As you can see by the image, i have the domain that i pointed the iframe to, and then the actual domain of the website in the iframe, noted by chromes error message.
Does anyone have any idea how i can get that error message? I have tried using try catch(err) but that does not seem to work. Or, better yet, any idea how to get the details of the site inside of the iframe from javascript? The only detail i need is its URL.
Thanks in advance!
(source: farfromthere.org)
You can't access what the current location of the iframe is, or whether it has redirected, for security reasons. The only exception is if you are checking whether the iframe contains a page that is in the same origin as yours; in that case, you will be able to access the iframe.

Running a bookmarklet on an iFrame that is coming from a different domain

Is there any way to run a bookmarklet on an iFrame which is from a different domain?
For example, I have a page loaded from http://example.com, which has an iFrame whose source is set to http://example2.com. When I run the bookmarklet, it is always run on http://example.com, since that is the main page. I want to run it on the other iFrame though.
When I attempt to interact with the iFrame (e.g. by changing its source attribute to javascript:alert('test')), Chrome shows the following error:
Unsafe JavaScript attempt to access frame with URL http://example.com from frame with URL http://example2.com. Domains, protocols and ports must match.
I tried dragging and dropping the bookmarklet into the frame, but it says:
Failed to load resource
Is there any way for me to interact with an iFrame using a bookmarklet in Chrome?
There is a way to do cross-domain message-passing (not arbitrary code execution) using window.postMessage, yet all a frame A can do to frame B (when they are not of the same origin) is passing it a message hoping that B has a callback function listening for this message.
So here if you control exemple2.com (what's in the frame that don't get the bookmarklet), you can make the bookmarklet pass a message to the iframe and handle it in the iframe.
Else I don't think you have a solution here, except very complicated ones (like proxying).
Other links:
In-depth article about same origin policy and its implementations in browsers
A cross-browser, backward compatible postMessage attempt (as jQuery plugin)
iFrames have alot of security on them as do ajax calls.
Any attempt to use these in a cross-domain manner will result in a security error.
Imagine you were able to interact with other iFrames on different domains. You would be able to make an iFrame (like facebook login's page) that had width and height of 100% and add a function to execute on a submit event which would email you the username and pass before submitting.
So you're gonna have a lot of trouble accomplishing what you're trying to do. You basically can't mess with a page that you don't own. You can use firebug to edit it with the html tab though.
Hope that helps
One option if you are not in control of the page or the iframe is to load the iframe into a new window. The src attribute of the iframe is available to read by the parent JS, which can then open a new tab or window. The user can then click on the bookmarklet a second time to load it into this new page.

Categories