Suppress onbeforeunload in remote iframe - javascript

I have a page that embeds an iframe from a different domain (for credit card payment). The page loaded in the iframe registers an onbeforeunload handler. That means whenever I try to navigate away from the parent page or hit reload, it asks the user for confirmation. Ok so far.
However, there are supposed to be interactions on the parent page that shall work without invoking the onbeforeunload handler being called in the iframe. Here's a simplified example:
<iframe src="https://paymentprovider.com/payment"></iframe>
Abort payment (fire onbeforeunload)
I don't have a credit card (suppress onbeforeunload)
I cannot use the iframe sandbox because Javascript is required for the iframe to work. I also tried setting the sandbox attribute of the iframe dynamically but that doesn't seem to work reliably.
The only way I was able to suppress the confirmation box is to remove the iframe in the onclick handler of the links:
iframe = document.getElementById("payment_iframe");
iframe.parentNode.removeChild(iframe)
Do you see any problem with that hack? Is this even supposed to work? Do you know of any better way to accomplish the same?
Thanks

Nope, that's a pretty good and solid solution, provided javascript is required for it to work in the first place.
(The one edge case you will miss are geeks that have turned off javascript for your page, but not the payment provider, but by the sound of it, they will only get this annoying superflous one extra question, which they were kind of asking for anyway, on some level.)

Related

How can I delay a new tab from loading with a userscript?

I use a userscript to modify the client-side code of a website. This code is adding an anchor tag to the page. Its target is _blank. The thing is that if I click this link too frequently, the site errors. A simple refresh on the new tab fixes the problem.
When I click on the link and it instantly opens a new tab. But I don't want that new tab to render until I visit it, or with some sort of time delay. Is there a way of achieving this?
I am using Firefox, so Firefox-only solutions are fine. I found this, but I don't see a way of using it to prevent the tab from rendering in the first place. When I Google for this, I see results about add-ons that can solve the problem. But, the links to them always 404. Ideally, the solution would only affect the tabs created by this script instead of the way all tabs work, but if the only way to do it is to affect the way all tabs work, I'd accept that as a solution.
The Tampermonkey documentation says there is a GM_openInTab function. It has a parameter called loadInBackground, but it only decides if the new tab is focused when you click the link.
If there is a way of making this new tab render some HTML of my choosing, I think that would be a neat solution. i.e., I'd write some HTML that, on focus, goes to the actual website's page. If this is an option, I'd need to know how to open a tab to HTML of my choosing in grease monkey.
(Just realization of idea you told in your question yourself)
You can place simple page that waits for focus and then redirects to what you pass in URL parameter somewhere and open in background tabs. Like:
load-url-from-search-on-focus.html?http://example.com:
<!doctype html>
<body
onload="document.title=u=location.search.slice(1)"
onfocus="u?document.location.replace(u):document.write('?search missing')">
Try it.
(data:uri could have been used instead of hosted page, if there weren't those pesky security precautions blocking rendering of top-level datauri navigations :|)

Web extension - alternative to notification with button

I have a web extension that lets any website access the clipboard. On request I will ask the user if it is okay to give access to the clipboard.
I do this in two ways
I create a notification
The problem: firefox doesn't allow buttons, so in the message I say "Click here to allow website x access". I added an eventlistener to the notification that sends a message back to the content script and it proceeds from there. It's okay but not really the best solution (I want buttons)
As a fallback I have a simple confirm box.
The problem: it doesn't really look good.
Now my other idea is to create a custom confirm box. That means create some html, css and javascript and append it to the DOM. This although is potentionally dangerous as websites can just trigger a "click" on the "allow access"-button then.
So I am basically looking for a nice and safe way to get confirmation from the user.
So what next? iframes? Is it possible to include an html page from the addon with access to a content script in an iframe?
Or is there some other way I can implement this maybe web extensions already offer something like this?
Completely overlooked the click event argument. There is a event.isTrusted property which is false when the event was triggered. (maybe not available in all browsers). But this pretty much solves the issue.

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.

Automatically perform javascript function on pageload of external website

So I want to have a link to a site x (which I am not the developer of) that automatically performs some javascript function after it is clicked. EG.
javascript:window.location="http://www.google.com"; alert("Hello");
This performs the alert function before loading the page which is not desired.
Does anyone else know how this can be achieved?
Thanks.
If you load it in an iframe, I guess you could somehow wait for a certain element to be present and then execute your code.
You cannot do that.
Doing this, poses a security threat (XSS), and therefore disallowed by almost all the browsers!!
Worst scenarios to think of, if you had this control:
The Script to capture the username/pass of the user and mail it to you by further calling an Url.
Could play a role in unwarranted tracking/spamming.
EDIT:
This can be done only if user interaction in involved.
For eg:
You can ask user to drag a link to his bookmark toolbar, and the link should contain:
Test Click
And then to whatever page the user goes, whenever he clicks the bookmark button (link), an alert happens (or whatever script you may put.)
If the link is changing the "current" windows location, you cant execute your scripts after the external page has started loading.
You can't.
A walk around way is to put the site in to an iframe in your page. Then alert your message in its onload event. And of course your url on address bar will not change.

Javascript Launch Popup and Fill a text field

I am struggling with this, hope something can shed some light.
On click of a button, I want to open a popup window, and transfer data from parent window to a text field in the popup. And, ensure popup is fully loaded before data is filled.
I tried using document.ReadyState=="complete", but it fires before the popup is fully loaded. I also tried to check the popup.body in a setTimeOut method, but to no avail.
Can you please help ?
PS: Popup window is a form from another domain !.
You won't be able to do this unless you control both domains due to XSS restrictions, but if you do control the content on both domains it's fairly simple with a bit of JS in the page you have opened in a frame.
Using window.opener in the frame will allow you to call any functions defined in the main window, this along with the seconds pages onload event is all you need to trigger a function when it loads.
If the content of the second page is not under your control the best thing you can do is an AJAX request which you will then need to be inserted into your page, this is a little nasty but will work.

Categories