iFrame Breakout / onbeforeunload

@Master00Mar 04.2012

I am trying to load a 3rd party website inside an iframe. However, the website has a “frame buster” script that causes it to break out of the iframe and take over the entire page resulting in the user leaving my site.

I found that using the following script will ask the user to confirm whether or not they want to leave my site.

window.onbeforeunload = function() { return false; }

If they select “Cancel” then the user stays on my site and the website will load itself in the iframe as it was intended. However, if the user says OK, then the breakout is successful and they are taken away from my site.

Is there any way to add a function that has the same effect of the “cancel” button on the onbeforeunload box?

If you press cancel everything works as it is intended so I am hoping someone might have a solution to this problem. Any ideas would be greatly appreciated.

to post a comment

JavaScript

11 Comments(s) _↴

@Master00authorMar 04.2012 — #What I'd actually like to do is to use the onbeforeunload but to simply specify my own page is the user clicks "OK".

This script [I]almost[/I] works. It detects if an iframe is trying to breakout and sends the user to a specified page instead.

[CODE]<script language="javascript" type="text/javascript">
 var prevent_bust = 0
 window.onbeforeunload = function() { prevent_bust++}
 setInterval(function() {
 if (prevent_bust > 0) {
 prevent_bust -= 2
 window.top.location = 'http://www.mywebsite.com/index.php'
 }
 }, 1)
 </script>[/CODE]

Is it possible to alter this script so that it alerts the person prior to going to the specified page?

The desired outcome would be if the user selects "OK" it will take them to "http://www.mywebsite.com/index.php" and if they click "Cancel" they will just remain on the current page.

I tried the following but whenever I try and add return to the code it prompts once then goes to the iframe "breakout" page then prompts again and then goes to the specified URL. I only want one prompt and to have it go directly to the custom URL.

Any ideas on how to get this to work?

[CODE]<script language="javascript" type="text/javascript">
 var prevent_bust = 0
 window.onbeforeunload = function() { prevent_bust++; return "Do you want to leave?";}
 setInterval(function() {
 if (prevent_bust > 0) {
 prevent_bust -= 2
 window.top.location = 'http://www.mywebsite.com/index.php'
 }
 }, 1)
 </script>[/CODE]

@Master00authorMar 04.2012 — #Here is a demo of the problem.

It currently prompts you once then loads the "breakout" frame then prompts again and then loads the "custom URL".

How do I get it to only prompt once and bypass the "breakout" page?

[U]DEMO[/U]

http://goo.gl/0uZx3

@Angry_Black_ManMar 04.2012 — #It ... sends the user to a specified page instead.[/QUOTE]

this isn't happening to me. can you describe how to recreate this event?

when i click "stay on page" it stay at "/demo/". if i leave, i go to the break page and ultimately, the next page.

at no point to i find a way to "go to the specified page"??

@Master00authorMar 04.2012 — #this isn't happening to me. can you describe how to recreate this event?

when i click "stay on page" it stay at "/demo/". if i leave, i go to the break page and ultimately, the next page.

at no point to i find a way to "go to the specified page"??[/QUOTE]

Let me try and clarify.

My goal is to prompt the user when the iframe attempts to break-out. If the user clicks "Cancel" then they remain at the /demo/ directory (the ideal scenario).

If the user clicks "OK" I want to be able to send them directly to a custom URL (and not to the breakout page).

Currently, if you goto the demo you get a prompt. If you click "OK" it takes you to the black "breakout page" where you get prompted again. If you click "OK" again then you finally get taken to the custom URL.

I only want there to be one prompt which takes the user directly to the custom URL so that they are never taken to the breakout page. I can't figure out how to prevent the user from being sent to the breakout page prior to being sent to the custom URL.

@Angry_Black_ManMar 04.2012 — #before i give you an answer, what browser are you testing in?

@Master00authorMar 04.2012 — #Im using Firefox

@Angry_Black_ManMar 04.2012 — #try your page in internet explorer. are you able to get to "mywebsite.com"?

@Master00authorMar 04.2012 — #In IE I still get prompted twice but it never actually loads the breakout page.

I don't understand why it's prompting twice. Nor, do I understand why the breakout page loads in FF.

Any ideas on a fix?

@Angry_Black_ManMar 05.2012 — #okay, here's what's going on...

1. you set a "control variable"

2. you set tell the window what to do if it gets unloaded.

3. then you tell setInterval to happen. the "if" inside of setInterval is not yet evaluated because the you've only just declared the set interval. even if the time was set to 0, the anonymous function would not yet be evaluated.

4. the rest of the HTML is written to the DOM.

5. setInterval starts being called over and over and over and over

6. in the meantime, eventually the "breakout page" is loaded. by design, it tries to redirect the webpage

7. this triggers onbeforeunload

8. for right now, setInterval is halted. it is no longer being called over and over and over because the onbeforeunload has to be evaluated

9. while evaluating your onbeforeunload, your "control variable" is increased by one.

10. after the increase, your "return" causes the [COLOR="Red"]first[/COLOR] "stay" or "leave" prompt.

11. the script is waiting for a response from the user. the script will not continue until a response from the "stay" or "leave" prompt is received

so naturally, the person has to make a choice. either:

A) they click "stay". if so:

A1. execution of the script continues. the "prevent_bust" IF statement is evaluated

A2. since your control variable has been increased, your IF statement will evaluate to TRUE

A3. because of this, your control variable will be decreased

A4. now that we're in the if statement, your script tells the browser to change the url to "mywebsite.com".

A5. this fires onbeforeunload again because of the "mywebsite.com" redirection.

A6. the person then gets ANOTHER prompt to "stay" or "leave". this is your [COLOR="Red"]second[/COLOR] prompt. "stay" leaves them on the "demo" page with "setInterval" running over and over and over forever, evaluating at FALSE every time because you set the control variable to "-1". clicking "leave" would send them to "mywebsite.com"

? they click "leave". if so:

B1. the user is redirected to the "breakout page"

B2. your scripts from the "demo" page may finish, and if you injected any further prompts, they might temporarily fire, but...

B3. as soon as the "breakout page" is loaded, bye bye. it takes precedent and control. there's nothing else you can do.

here's the code that got me this far:

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
 &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
 &lt;head&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt;
 &lt;title&gt;&lt;/title&gt;
 
 &lt;/head&gt;
 &lt;body&gt;
 &lt;script language="javascript" type="text/javascript"&gt;
 var index = 0
 var prevent_bust = 0
 window.onbeforeunload = function() { prevent_bust++; return "frame is trying to redirect. okay to allow redirection to breakout page.";}
 setInterval(function() {
 if (prevent_bust &gt; 0) {
 prevent_bust -= 2
 if(confirm("because of the frame break and the way this code is designed to catch the frame break attempt, you HAVE TO ANSWER THIS QUESTION!!!!!nnn click okay to get redirected to mywebsite.comnnclick cancel to finish script and stay on the current page"))
 {
 window.onbeforeunload = function() {}
 window.top.location = 'http://www.mywebsite.com/index.php'
 }
 else
 alert("nothing else will now happen except that setInterval will run over and over and over. this if statement will never be touched again because prevent_bust =" + prevent_bust)
 }
 }, 1)
 &lt;/script&gt;
 
 &lt;iframe src="http://www.24sevenphotography.com/demo/break.html" style="border:0px #FFFFFF none;" name="myiFrame" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="1px" width="1px"&gt;&lt;/iframe&gt;
 
 
 
 &lt;/body&gt;
 &lt;/html&gt;

@Angry_Black_ManMar 05.2012 — #the code i provided eliminates one of the prompts if the user chooses to stay on the website, and they get a prompt to either go to the mywebsite.com site or to stay put.

@Master00authorMar 05.2012 — #Thanks for the explanation.

I did some testing with your code and here's what I found.

[B]Firefox.[/B]) Nothing changes, still get 2 prompts, only the message in the prompt is different

[B]Chrome.[/B]) The user never gets to "mywebsite.com" as they get stuck on the "breakout page"

[B]IE.[/B]) I still get 2 prompts but eventually end up at "mywebsite.com"

The script below works [I]exactly[/I] how I want it to [U]when there is not prompt[/U]. When I add a prompt everything goes haywire.

I just simply want to add a single prompt before the person gets sent [U]directly[/U] to "mywebsite.com" and if they choose to stay then they get no additional prompts and just remain where they are.

http://goo.gl/2azLZ - DEMO

[CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <title>Untitled Document</title>
 <script language="javascript" type="text/javascript">
 var prevent_bust = 0
 window.onbeforeunload = function() { prevent_bust++ }
 setInterval(function() {
 if (prevent_bust > 0) {
 prevent_bust -= 2
 window.top.location = 'http://www.mywebsite.com/index.php'
 }
 }, 1)
 </script>
 
 </head>
 
 <body>
 <iframe src="break.html" style="border:0px #FFFFFF none;" name="myiFrame" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="1px" width="1px"></iframe>
 
 </body>
 </html>
 [/CODE]

Also in #JavaScript _↴

Countdown help !enable certain options only if others are picked Java script error Expected ')'

Success!

Help @Master00 spread the word by sharing this article on Twitter...

Tweet This

iFrame Breakout / onbeforeunload

11 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

iFrame Breakout / onbeforeunload

11 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

11 Comments(s) _↴

Also in #JavaScript _↴