I am using iframes to serve content that I want people to be able to embed on their own sites. I am also embedding these iframes on my own site (mysite.com in the code below).
I am using the following javascript function
function addLogo() {
if (window.top.location.host != "mysite.com") {
$("#logo").html('<img src="...mysite.com/logo.png" border="0">');
}
}
to check where the iframe is embedded. If the iframe is embedded anywhere other than the my site, jquery is used to add a small logo / back-link to the frame.
The main site is hosted on a shared server and the embedded html and js files are in an Amazon S3 bucket. Having the js file check on the location of the parent window is causing security errors in both Firefox and Chrome
Firefox:
Error: Permission denied to access property 'host'
Chrome:
Uncaught SecurityError: Blocked a frame with origin
"...amazon.s3Bucket" from accessing a frame with origin
"...mysite.com". Protocols, domains, and ports must match.
Is there a way to use js to conditionally add the logo based on top.host without causing these errors or creating security problems?
I am hoping to stick with js so that I can serve the iframe content (html and js) from Amazon S3
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've got a local dev site running on http://mysite.local/
(it's a Django admin site with Grappelli installed, if that's any relevance).
The admin site opens a popup window for some operations (i.e. via showRelatedObjectLookupPopup())
Due to previous similar issues with same-origin-policy (in production, the admin site loads some URLs from a CDN domain, which can trigger it) we have a "normaliser" JS function that explicitly sets:
document.domain = "mysite.local";
Both in the parent and in the popup, on page load.
The popup contains a link with an onclick handler that triggers a JS function in the parent:
onclick="opener.dismissRelatedLookupPopup(window, '422'); return false;"
Clicking this link in Chrome or FF results in a similar browser error:
Permission denied to access property "dismissRelatedLookupPopup" on
cross-origin object
or
Blocked a frame with origin "http://mysite.local" from accessing a
cross-origin frame.
Both the popup and the opener URLs share the same protocol, domain and port.
This is only an issue on the local domain. On dev/uat/production sites, (i.e. dev.mysite.com), all of which have their domain set to the superdomain "mysite.com" by the above "normaliser" function, the popup can successfully call the JS function in the parent.
What's stopping it on the local domain? What have I missed?
It seems that switching the local domain, as per the original suggestion from #charlietfl, has indeed fixed the issue. It now runs locally as local.mysite.com instead of mysite.local, and the same-origin error has gone. I'm still unclear on what was triggering the error (was it because the the domain had only two parts as opposed to three? Was it something specific to domains ending in ".local"?) but in the unlikely event that anyone else trips up on this, that's what fixed it for me.
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?
I have a page with button and IFRAME. Inside IFRAME, I am loading a PDF file dynamically which is coming from different domain.
when I try to print file using the button action I am getting the following error.
Uncaught SecurityError: Blocked a frame with origin "http://localhost:8080" from accessing a frame with origin "http://www.cplusplus.com". Protocols, domains, and ports must match.
If I load the pdf file from my local system I am to print it .
I used the below code to print the iframe Pdf
var iframe = document.querySelector("#unofficialtranscript");
iframe.focus();
iframe.contentWindow.print();
Any idea how I can print the file which is loaded into the iframe which is on another domain .
I think you would need to have a look at the same origin policy.Javascript only calls a window or an iframe only if the policy is accepted.
You may need to use Postmessage API instead.
Please have a look here.
If both the parent DOM and child DOM (i.e., iframe) are from same domain then it will work fine.
If not, then use libraries like Porthole for cross-communication between different domains.
Demo site: http://sandbox.ternarylabs.com/porthole/
Note: You should have access to both the domains being used in your code.
I'm trying to get an IFrame inner HTML using below code.
<iframe src="http://www.msn.com"
width="100%" height="100%" marginwidth="0"
scrolling="no" frameborder="0" id="divInfo"
onreadystatechange="MyFunction(this);"></iframe>
JavaScript code is
function MyFunction(frameObj)
{
if (frameObj.readyState == "complete")
{
alert(frameObj.document.body.innerHTML);
}
}
But the alert shows me the html of current document. How can i get the inner HTML of iframe when the frmae ready state is complete.
If i use alert(frameObj.contentWindow.document.body.innerHTML); it gives me Access is denied error.
Thanks in advance.
Access is denied error is caused by the same origin policy.
Since your page is hosted on http://www.example.com/ (For example), if you try to access details on http://www.msn.com/, the browser won't let you since they are from 2 different domains.
However, if you are trying to access data from the same domain - Hosting page: http://www.example.com/index.html, IFrame's page: http://www.example.com/iframe.html, then you should be able to get the content.
For more information on the Same Origin Policy, here's a link: http://en.wikipedia.org/wiki/Same_origin_policy
BTW, you may want to use frameObject.contentDocument instead
<script type="text/javascript">
function documentIsReady(frameObject) {
alert(frameObject.contentDocument.body.innerHTML);
}
</script>
... and you can also use the onload instead of onreadystatechange...
<iframe src="iframe.html" onload="documentIsReady(this);"></iframe>
You can't read the contents of an <iframe> that has content from a different domain than that of the parent page.
You can only do that if it adheres to the same origin policy (meaning the iframe is at the same server as the parent document).
Anyway, this was answered here :)
As has been said previously, you cannot get the contents of an <iframe> if its source is not from the same origin.
This also applies to most other ways of getting external content, such as using ajax to load source code from another page. ie: $('#div').load('http://www.google.com');
To load external content, the content must comply with the same origin policy.
This means that the content must be on the same protocol and host.
Wikipedia Article Linked Above:
httpː//www.example.com/dir/page2.html --> Success Same protocol and host
httpː//www.example.com/dir2/other.html --> Success Same protocol and host
httpː//username:password#www.example.com/dir2/other.html --> Success Same protocol and host
httpː//www.example.com:81/dir/other.html --> Failure Same protocol and host but different port
https://www.example.com/dir/other.html --> Failure Different protocol
http://en.example.com/dir/other.html --> Failure Different host
http://example.com/dir/other.html --> Failure Different host (exact match required)
http://v2.www.example.com/dir/other.html --> Failure Different host (exact match required)
Simply put, it must be on the same website. So while example.com/hello.html can load content from example.com/goodbye.html, it could not load content from google.com/content.html
Also, it must be on the same domain. Sub domains are considered to VOID the same domain policy so while weebly.com/hello.html can load content from weebly.com/goodbye.html, it could not load content from user1.weebly.com/content.html
There are of course workarounds, as usual, but that's another story all together. Actually, this is quite relevant to the question. So here is a wonderful questions 'thread' on all the ways to bypass it.