Javascript/JQuery prevent navigation totally inside an iFrame - javascript

I have a same domain page loaded inside an iframe (using sandbox attribute). I use the following code to prevent clicks (and all other elements) from navigating away form the page:
$('#preview_frame').contents().find('body *').off('click').click(
function(event){
event.stopPropagation();
event.preventDefault();
}
);
However it seems that other Javascript on the page is redirecting the navigation via window.location.href or window.location.replace.
I cannot change the code of the pages inside the iframe as they are proxied from other sites.
I tried using the iframe unload event without success.
I need to disable the ability to navigate inside the iframe no matter what/how it is done. I am not talking about top parent navigation which can be disabled with the sandbox attribute, I am talking about the navigation INSIDE the iframe itself.
Is it possible to accomplish that?

Your code seems correct. Remove the sandbox attribute if the page inside iframe is from same domain. Hope it will solve the problem.
Sandbox attribute always treats contents as unique origin.

Related

Hijack top level redirection from within iframe to iframe redirection instead

I have an integration problem where, from within an iframe, an application I do not own executes a top level redirection on my page.
I would like to stop this redirection and make it happen in the iframe instead, possibly by changing the iframe property src.
Would you know a way to do that?
I have read about sandbox iframe property which prevents redirection but it is not quite what I need.
Thanks in advance.

jQuery cannot detect an injected script that updates the page

I'm trying to use jQuery to modify an element that's "injected" externally. I've tried delegation with on but it didn't work.
Here's the page, scroll down and you'll see an avatar named "Sebastian" with <div class="Avatar">.
If I go right click, Console and type: $('.Avatar'), the element is identified, but this is only because I first clicked on "Inspect element" for that element. jQuery somehow "updated" the source and now it identifies the element.
Now, try to refresh the page and type $('.Avatar') again, jQuery will not identify the element (although it's already loaded on the page).
You can take a look under "A working example" how this script is injected into the page.
My question is, is it possible (and if so, how) to modify this HTML (which seems to be inserted dynamically as the page is loaded)? It doesn't seem to be using any sort of iFrame nor anything, it just dynamically loads into the page, yet jQuery is unable to recognize it (unless you "tell it" to do so by clicking on "Inspect element" on the actual element).
P.S. I've tried using on, delegate, it doesn't work.
jQuery will not identify the element after page because it's in another iframe.
You said "It doesn't seem to be using any sort of iFrame nor anything", but in the end it's iframe.
The reason why you can find it when you go right click on element and then in developers tools you write $('.Avatar') is because once you inspect element (right click) inside developer tool iframe will change.
Furthermore, your parent iframe and iframe that have avatar element have same origin. Run document.domain inside parent and other iframe. Iframe with avatar have origin "app.talkjs.com" and parent iframe have origin"talkjs.com".
Subdomains may be same-origin.
There’s a small exclusion in the “Same Origin” policy.
If windows share the same second-level domain, for instance john.site.com, peter.site.com and site.com (so that their common second-level domain is site.com), they can be treated as coming from the “same origin”.
https://javascript.info/cross-window-communication
You should be able to catch onload iframe event and then search for .avatar.
iframe.onload = function() {
let newDoc = iframe.contentDocument;
console.log(newDoc.getElementsByClassName("avatar");
};

Auto-click button in div on-load

I have a page where I modded an app to prepopulate a number of fields. I would like to automatically have the 'submit' button be pressed/submitted when the page loads. I have tried things like:
<script type="text/javascript">
function autoclick() {
document.getElementById('buttonid').click();
}
</script>
with
<body onload="autoclick()">
But it does not work.
Any advice would be greatly appreciated!
Thanks
(It is the iframe on this site: http://abraxas.pw)
I see that your iframe is in the same domain and hence it will possible for you as the cross-domain security may not apply.
Give your iframe an id. And then:
document.getElementById('iframeName').contentWindow.document.getElementById("buttonid").click()
More info here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#Scripting
Make sure that the DOM is fully loaded before you fire your Javascript. Wrap this code into body load or iframe load.
Update:
If the iframe is in the same domain and is in your control, you don't need to do all this. Just fire the click from domloaded of jQuery, or place your code at the end (just before body ends). It will work.
Seeing your code, you have defined the function in the head and are calling it at body load. Place the function and the call at the end of the body.
You cannot do it in iframe for security reasons: http://pipwerks.com/2008/11/30/iframes-and-cross-domain-security-part-2/
Content coming from different domain in iframe can't be controlled in your page using javascript.
Browser treats iframe as a different window so you've no access over it. it's something like trying to access content of different window open in your browser from your own window(which is obviously not possible)

Is there a way to prevent an iframe from redirecting parent window, but in such a way that "top level" redirects still work inside the iframe itself?

So I've read about the HTML5 sandbox property and I understand that if I want to prevent an iframe redirect its parent window I can use the sandbox property leaving allow-top-navigation out. However when this is done, if the iframe was originally relying on top level redirection, what happens in its place is that it redirects to a blank page, effectively breaking navigation.
Can I prevent the iframe from tinkering its parent window while still allowing "top level" redirects, only letting these work within the context of the iframe instead of being top level?
Edit: For context, I'm working with a third party and its page has a form with a target _top. If the iframe is sandboxed, upon submitting the form users get a blank page, if it's not sandboxed the entire page is redirected. I'm looking for something that would allow to submit the form and show the result within the iframe itself.
With HTML5 the iframe sandbox attribute was added.
At the time of writing this works on Chrome, Safari, Firefox and recent versions of IE and Opera but does pretty much what you want:
Allows the iframe content to be treated as being from the same origin as the containing document
<iframe src="url" sandbox="allow-same-origin"></iframe>
Browser Compatibility
Some Useful links
w3schools for sandbox
developer.mozilla.org iframe
-
You can use the onbeforeunload property and determine if you wan to redirect or not.
Here is the docs page for it
Basically what I would try is this:
Make a function that adds the sandbox attribute with everything, just leaving out the allow-top-navigation, to the iframe
Bind a function to the onbeforeunload property of the iframe that calls the function that adds the sandbox attribute (be sure not to return anything because a dialog will pop-up)
This should work because the request is made in the iframe first, and then we can prevent it from carrying over to our top level window.
Another thing you should check is if you maybe left out the allow-formsoption, which can cause what you are describing.
Please let me know if any of this worked.

How to make javascript that'll click automatically inside iframe's link?

Is it possible ?
I've made on page with iframe, I want a script that'll click automatically inside in one iframe's link.
But I also want that script to detect half link, I mean the link which is in iframe changes everytime, but the first part of the link doesnt change, so the javascript should detect half link which doesnt change and redirect to it...
Why don't you write a "client" library and import it within iFrame. This library listen to a message from HTML5 postMessage call with certain attribute and react appropriately. Since you have access to the parent object through the event object (or window.parent), you can also send response back with the result. This way, it doesn't matter if it's cross-domain and as long as this library exists, you can communicate back-and-forth and even has the iFrame initiate if you write it properly.
I can't share the code with you since it's our proprietary library, but that's part of the idea.
If the content of your iframe is from a different domain, you can't. Allowing this would be a major security concern.
If your iframe content is in the same domain, then you can access the iframe content through its contentWindow property. You can then work with your iframe link the same way you would if the link was in the main page.

Categories