I wrote a chrome extension which injects a toolbar on top of sites (say amazon.com) as an iframe at the top.
When the user click on the action button on the toolbar (inside iframe), it's basically a form submit action, with action pointing to my full site (on another domain).
It's working, however only inside the iframe. I'd like the whole page to redirect to my site, rather than the iframe.
Is there anyway to do that in extension?
If you are using an iframe :
Same Origin Policy prevents you from doing this.
Unless you can hack/XSS the other site's files to inject the JS, you will have a hard time.
Now if you legitimately need to communicate with the other page, and you either have control of the other page or can setup it to communicate with your server, you can use window.postMessage, JSONP or even Ajax with CORS (latter 2 will be harder to pass dynamic content though). But I believe it is not the case.
else :
you can directly inject the js script in to the page itself by that you can handle all operations in the main page same as running something on chrome console.
Related
I have a page with one button. When clicked, that button navigates to http://google.com/
$("#button").click(function(){
window.location="http://google.com";
});
I would like this navigation to work when this page is embedded within the iframe. I don't want to affect the outside host page, but rather only the contents of the iframe. What's a good cross-platform way to:
Detect if I'm contained in an iframe
If not, navigate like above.
If yes, navigate the iframe only?
(I'm going to try to implement the algorithm I just described, but regardless I think this question is interesting enough to be posted. If I succeed, I'll post my solution)
1) Detect if I'm contained in an iframe
if (window != window.top) {
// the page is inside an iframe
}
2) If not, navigate like above.
navigate like above
3) If yes, navigate the iframe only?
When you write window.location.href = 'http://www.google.com'; you are navigating the contents of the iframe, not that of the top page. If you want to navigate the top page, you can only do this if this top page is on the same domain as the iframe and you could use window.top.location.href.
UPDATE:
There is a security mechanism built in browsers which forbid you from redirecting to sites that set the X-Frame-Options: SAMEORIGIN response header when inside an iframe. That's the case with http://www.google.com. Simply navigate to this site and look at the response HTTP headers with FireBug or developer toolbar you are using and you will see this header. You cannot redirect to it and you will get the following error message:
Refused to display document because display forbidden by X-Frame-Options.
It's basically a security mechanism implemented by some sites whose authors didn't want you to embed them in an iframe.
There is an iframe on my site which is hosted on another domain. It can communicate to the main site via window.postMessage. I do have a button on that iframe which calls a JS method on the main domain, which then triggers a new window.
It all seems good but since the user click event is generated on the iframe domain and window is created on the main domain, browser thinks that this is an automated popup, and blocks.
Is there anything I can do to prevent browser from blocking the window?
since that is browser based you cannot overwrite browser settings. But you can use javascript "modals" which are very useful since they are not pop-ups but they don't have the functionality of an pop-up
I have a frameset on my server which hosts a top frame main menu which is on the same domain, and a bottom frame which the content is sometimes on the same domain and sometimes on a remote domain.
I would like to monitor the bottom frame to see if it changes, and if it does change, what URL it went to. Is there a way to do this using JavaScript?
If you have control over the content coming from your domain, you should be able to detect when the user is leaving your domain. You can catch normal link navigation by listening to click events, and add extra code to notify of navigation to any other ways the user may leave the page.
Once the frame is showing content from a remote domain, though, you won't be able to get any information out of it without co-operation from the content itself (which, even then, involves nasty cross-domain communication hacks). A frame pointing to a remote domain will not report any information about itself to your page, not even the current URL.
You should be able to bind to the load on the iframe and work with that.
I am using an iframe to embed content from another site. The button in the iframe opens an overlay with a form. The problem is when the button is clicked, the overlay does not open fully. The problem is not from the overlay but from the iframe and parent.
The site i am testing on is at www.sycotickets.com/form.php. you can check it and click on the button at the bottom to see the problem. I also learnt javascript can be used to embed. Can anyone please pint me in the right direction on both issues?
There are 2 possible answers when using AJAX to load page content from a different server
1) Both servers are in a similar domain (s1.example.com, s2.example.com) in which case, you can set the domain to simply be example.com which allows full functionality withing AJAX calls.
2) Servers are on completely different domain - The server which provides the content (currently for the IFrame) must provide the data using the JSONP protocol (note the P!) this means the resulting data is loaded into a script tag which then executes. The data itself contains a JS function call eg:
{data: '<pre>Some Html</pre>'}
is actually returned as:
function SomeFuncNameSpecifiedInTheRequest({data: '<pre>Some Html</pre>'});
Instead of doing an AJAX call, you dynamically add a script tag to the page, something like:
<script type="text/javascript" src="http:/www.example.com/GetMyData.php?WrapperFunction=SomeFuncNameSpecifiedInTheRequest">
You then implement SomeFuncNameSpecifiedInTheRequest on your page and process the results when it's called. JQuery implements this functionality for you automatically (at least the client-side bit.)
See here for more information on JSONP and here for more information on setting the domain
Nothing you can do really. If it's loading from an external site browsers prevent you as a developer from accessing other sites and modifying them to try and prevent XSS attacks. You could try to fake it by moving the iframe where you want it dynamically and overlaying the black on click on your end... but that seems pretty kludgy...
We have an application that reconstructs external web sites in an Iframe from within our domain so we can use tools that run in the browser to inspect the external website. This is an unavoidable requirement since we need to gather information about the external page using JavaScript. If the page were not reconstructed from within our domain, we would run into cross site scripting issues.
The problem is that the scripts on some pages redirect out of the iframe, which stops our tool from working.
My query is whether there is a way to allow the scripts to run within the iframe, but not to affect the page that contains the iFrame?
Hope that makes sense - thanks!
No I do not thinks so.
If the Iframe is loaded from the same domain any script will have full access to the page.
The redirect out of the page you refere to is the page protection from Hijacking where another site tries to use the page contents.
By ridirecting out of an iframe they avoid that.
You could try using a separate window (window.open) to load the reconstructed external sites instead of an iframe. As long as they are at the same domain, they'll still be able to communicate, but the child window won't be likely to mess with your main window.
Alternatively, your outer window can do nothing, and be at a different (sub)domain from your control window. Your control window is an iframe in your outer window, and the reconstructed external site is another iframe sharing the same domain as your control frame. Now if your 'external' iframe tries to do something with window.top (besides navigate) it will fail because of the cross-domain policy, but your control iframe will share the same domain as your 'external' iframe, so you can inspect and manipulate it.
If you use the second approach, frames will still be able to navigate the top window. You can prevent it by adding something like this in the top window:
window.onbeforeunload = function(){return '';};
Now you'll be prompted with a dialog box if anything tries to navigate the page, and you can abort navigation. This will probably fix your current approach by itself, but it may be best to have the top window at a separate domain in case the external site tries to do anything unexpected with it.