I want to get Content from a website with an iframe and I'm using basysmith`s answer here(https://stackoverflow.com/a/3127056/8177490) to get the content so that I can serve the iframe from my domain.
I want to display only a certain div, let's call it "table-wrap" from the page and have everything else in the iframe hidden.
I've tried almost every answer on this topic but nothing seems to work.
When I am using this
var iframeDoc = document.getElementById('iframeid').contentWindow;
jQuery(iframeDoc).find('body > not:#table-wrap').hide();
jQuery(iframeDoc).find('#table-wrap').appendTo('body');
in the console.
I am still getting an error, although it is served from my Script on my Domain:
VM4380:66 Uncaught DOMException: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "https://mydomain.de" from accessing a cross-origin frame.
at HTMLIFrameElement.contentDocumentDesc.get [as contentDocument] (<anonymous>:66:14)
at contents (https://mydomain.de/wp-includes/js/jquery/jquery.js?ver=1.12.4:2:26888)
at Function.map (https://mydomain.de/wp-includes/js/jquery/jquery.js?ver=1.12.4:2:3613)
at a.fn.init.n.fn.(anonymous function) [as contents] (https://mydomain.de/wp-includes/js/jquery/jquery.js?ver=1.12.4:2:27001)
at <anonymous>:1:18
I've tried also different ways with iframe.onload and
jQuery("#iframeID").ready(function () {
jQuery('#iframeid > :not(#table-wrap)').hide();
jQuery('#table-wrap').appendTo('body');
});
But nothing seems to work.
Does anybody have an idea for this how I can get this to work?
Would appreciate anything.
Is the location where you are pulling jQuery from (https://mydomain.de) the same as both the outer page and also in the inner iFrame page?
Because the task of actually accessing the iFrame content falls to jQuery in your example, you'll want to verify that all domains (including the jQuery script itself) match to avoid cross domain errors.
Depending on what you're trying to do, window.postMessage may be a better solution anyway as it bypasses a lot domain and security problems (assuming you own both the outer and inner pages), or even just a direct ajax request between the page and your server (thus avoiding the iFrame altogether).
Related
I am experimenting with making a website where I have two iframes with other webpages side by side, and would only like to show a certain part of these websites.
Trying to edit the innerHTML of these websites throws errors regarding cross-page security problems.
How can I run Javascript inside these iFrames in a safe manner? If this is not possible, is there a good atlernative for iFrames where I can have to websites side-by-side?
It's not important for me to be able to edit both iFrames, only one of them need to be editable.
An iframe is just a 'hole' in your page that displays another web page inside of it. The contents of the iframe are not in any shape or form part of your parent page.
If your iframe is loaded from the same domain as your parent, then you can access the DOM of the document in the iframe from the parent.
Considering the iframe is from the same domain, Try using the below code and see if it works. The below code will add CSS changes to the iframe. If this works for you, then you can run javascript as well.
<script>
var iframe = document.getElementById("frame1");
$('iframe').load( function() {
$('iframe').contents().find("head")
.append($("<style type='text/css'> .lt{display:none;} </style>"));
});
</script>
If you are getting "permission denied type errors.", I think what you are doing is subject to the same-origin policy. This should be the reason why you are getting permission denied type errors.
Here you can check the possible solutions.
Unable to access iframe content (same-origin policy)
I'm trying to automate interactions with a website that I don't control. Notably for this discussion, the page from the site contains several iframes. For example, consider the source of the imaginary (but comparable) page https://www.chicken.com/a/b/hamburger.aspx to look something like:
<html>
...
<iframe id="iframe_a" src="meatloaf.aspx"></iframe>
<iframe id="iframe_b" src="stuffing.aspx"></iframe>
...
</html>
Notably, the 'src' attributes of the iframes are relative, so they are to be loaded from the original domain (www.chicken.com/a/b/ in this case) and there doesn't seem to be any 'Same Origin' issues, since I can login to the site and interact with it just fine. However, this all changes when I try to interact with the iframes using the Chrome dev console. For instance, this is what happens when I try to get the contents of one of the iframes using jQuery:
$('#iframe_a').contents()
jquery-1.11.3.min.js:2 Uncaught DOMException: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "https://www.chicken.com" from accessing a cross-origin frame.(…)
My (wrong) intuition is that since the sources of these iframes is the same domain as is the original page, that javascript interactions in the console should be under the auspices of that original domain, and everything should be fine. But clearly I'm not understanding the nuances of Same Origin. Can someone enlighten me about how it works in this case? And perhaps suggest a way to manipulate the contents of this iframe from a running browser?
Problem: I'm trying to catch errors in iframe loading using Javascript. The solution needs to be able to pass in an error statement with a url to another function, since I need to be able to retrieve the url of the page on which the error occurs (not the original iframe 'src' attribute).
Refused to display '...' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.
I know that most people would immediately think this is impossible for browser "sameorigin" security policies, but I'm pretty sure there's some (hackety) workaround.
Not sure if this will help, but Google Chrome displays the error message in the console.
Can we catch all errors issued by the page, or overwrite the default error handler for a specific site?
Note: The page in the iframe is not on the same origin as its parent.
HI, i got a simple html page, localy with an iframe. the iframe includes a generated page which got a javascript function. i know want to call that function. of course, im getting "permission denied". so since im new to js and all that stuff i dont know if it's actually possible to do that. give me some hints for searching or a nice solution.
i do cal lthe func like: parent.myiframe.myfunc();
I guess the page in the iframe resides on another server / domain. Modern browser do not allow "cross site scripting", see: http://de.wikipedia.org/wiki/Cross-Site_Scripting
If possible, move the site in the iframe to the same server. An alternative (workaround) would be to proxy the page on the local server, so that that for the client it seems to be loaded from the same domain.
Edit: This is also called a "Same Origin Policy". You can only call java script functions in a document that is:
from the same domain (www.mydomain.com)
from the same subdomain (mail.mydomain.com <- no go!)
both use the same port (p.Ex.
accessing a http://... document from
a http*s*:// document won't work).
There might be another workaround if you have access to the iframe's source:
Change the iframe domain to the same as the outer frame's, by applying:
document.domain = "domain.com";
in the iframe source (see http://ajaxian.com/archives/how-to-make-xmlhttprequest-calls-to-another-server-in-your-domain for more information).
Also there is a Draft for "Cross-Origin Resource Sharing" (http://www.w3.org/TR/cors/) that is already partially implemented in several browser, see: http://www.webdavsystem.com/ajax/programming/cross_origin_requests
I've read several of the questions on this but am still a little confused.
For example: OK, I can't post examples because of hyperlink limitations
Here is my exact situation.
I have a site at mydomain.com
One of the pages has an iframe to another page at sub.mydomain.com
I am trying to prepare an onload script that if the page is not in an iframe or the parent domain of the page containing the iframe is not mydomain.com then redirect to mydomain.com.
After the initial permission issues I realised the problem with sub domains counting as separate domains.
One of the posts above says that "could each use either foo.mydomain.com or just mydomain.com"
So I tried (for testing):
onload="document.domain='mydomain.com';alert(parent.location.href);"
This produced the error (http replaced with lar
Error: Permission denied for <http://sub.mydomain.net> (document.domain=<http://mydomain.net>) to get property Location.href from <http://mydomain.net> (document.domain has not been set).
Source File: http://sub.mydomain.net/?pageID=1&framed=1
Line: 1
Removing the alert produces no errors.
Maybe I am going about this the wrong way since I do not need to interact with the parent just read its domain if there is one.
A nice simple top.domain. For read only there must be a way so that people can prevent their own pages being used within other people's sites.
You can't (easily) do this because of security restrictions.
This answer from #2771397 might point you in the right direction.
OK, while looking at the error console I still had open when I got home a wee lightbulb lit up. I am pretty new to javascript (can you tell ;) but I thought "If it has try/catch"...
well here is a hack at least to get the name of the top domain and an example of how I will use it in my site to show content only if the page is a frame in the correct domain.
Firstly the header will have the following partially PHP generated function:
function getParentDomain()
{
try
{
var wibble=top.location.href;
}
catch(err)
{
if (err.message.indexOf('http://mydomain.com')!=-1)
{
createCookie('IAmAWomble','value')
}
}
}
Basically the value will be something based on the PHP session I think. This will be executed at page load.
If the page is not within the proper site or if javascript is not enabled then the cookie will not be created.
PHP will then attempt to read the correct value from the cookie and show the content or an error message as appropriate.
I do see a slight flaw in this for first visit since page load will run after PHP has generated the content but I'm sure I can work around this somehow. I thought I'd post because this is at least what I was initially asking for and that is a way to read the URL of a parent site if it is in a different domain to the site in the frame.
IIUC you want to use the window.parent attribute: “A reference to the parent of the current window or subframe.”
Assumably, window.parent.document.location.host contains the container page URL domain name.