Question

I’ve been working on a Frame busting buster (what’s in a name, hehe), which kept my users on my page and open a new window with the target URL. I’m using a Lightbox script to display iframes, this is what I’m doing:

1) Added an event for all .lightbox clicks, f.e:

$('.lightbox').live("click", function(e) { 
  e.preventDefault(); 
  $('#redirectURL').val($(this).attr('href')); 
  $(this).lightbox(); 
}

2) Added a frame busting buster:

<script 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://server-which-responds-with-204.com'  
      }  
    }, 1)  
</script>

3) Modified the frame busting buster code to fit my needs, which are:

• detect if an iframe wants to change the window.top.location
• if so, prevent this from happening using the 204 server respond
• open a new page: window.open( $('#redirectURL', '_blank' );
• close lightbox: $('.jquery-lightbox-button-close').click();

So far, this is what I’ve come up with:

var prevent_bust = 0  
window.onbeforeunload = function() { prevent_bust++ }  
setInterval(function() {  
  if (prevent_bust > 0) {  
    prevent_bust -= 2;
    redirectURL = $('#redirectURL').val();
    if(redirectURL != "") {
        window.top.location = 'http://www.****.com/ajax/nocontent.php';
        window.open(redirectURL, "_blank");
        $('.jquery-lightbox-button-close').click();
        $('#redirectURL').val('');
    } else {
        window.top.location = 'http://www.****.com/ajax/nocontent.php';
    }
  }  
}, 1); 

// EDIT: Before I forget, 'nocontent.php' is a file that returns a 204 header

For Firefox it acts as I programmed it, if there’s a change detected in the window.top.location it opens a new frame/page and prevents the iframe from reloading the top location and to round it up, it closes the jQuery lightbox.

Safari/Chrome act similar, they open a new browser screen (not sure if theres an option to say target="_newtab" or something?). Only bad thing is they do not really display a message of the popup is blocked, but I can work around that by displaying a popup balloon on my website with a link to the page.

Internet Explorer is, what a shocker, the only black sheep left.. IE does not open a new popup, nor blocks the window.top.location reset by the iFrame and simply continues refreshing the complete page to the ‘#targetURL’. It does the same with the default busting code.. so it’s not because of some of my edits.

Anyone who is able to spot a mistake in my code?

Also, I would need a little modification that sees if the request has been made by an iframe or by the user itself, because now there is really NO option for a user to leave my page by changing the address in the toolbar or by clicking a link, which is not really needed LOL.

Thanks in advance.

Answer 1

PENDO, I tried to simulate the whole process you described, ligthbox-jquery, javascript their own codes and controls opening pages via lightbox. I could not simulate at all, and as time is running out I’m sending a suggestion to broaden the range of possibilities and solutions.
I suggest replacing the redirect page:

 ...
  redirectUrl = $ ('# redirectUrl'). val ();
 ...
 window.top.location = 'http://www .****. with / ajax / nocontent.php';
 window.open (redirectUrl, "_blank");

Replaced with a DIV container that simulates a page, using ajax calls and taking the content and overwritten the contents of the DIV.

 ...
 $.post(redirectoURL /* or desired URL */, function(data) {
     $('DIV.simulateContent').html(data);
 });
 ...

or

 ...
 $('DIV.simulateContent').load(redirectoURL);
 ...

This approach also avoids the problem of preventing the user from even leaving your page using the address bar (as you yourself mentioned).

Sorry, let me give you a complete solution, but time prevented me.

PENDO, a little more work on alternatives to the problem, I found a customizable jQuery lightbox plugin for working with custom windows yet (iframe, html, inline ajax etc.). Maybe it will help. The following link:

 http://jacklmoore.com/colorbox/