How do you use your JavaScript framework to prevent Clickjacking?

Question

I've been using a custom function for some time now to prevent clickjacking on certain sites. However, I've been surprised to find there's not a lot out there about how to do this 'idiomatically' using the various popular JavaScript frameworks.

Are there users of jQuery, Dojo, YUI, and/or ExtJS that have used their framework to implement clickjacking protection? I'd love to see examples!

Answer 1

Why use a library? You could just do:

var all = document.getElementsByTagName('iframe'), l = all.length;
while (l--) all[l].parentNode.removeChild(all[l]);

But if you really feel you need a library. In jquery this is pretty easy, just find all iframes and remove them.

$(document).ready( function() { $('iframe').remove(); });

Answer 2

It isn't so simple. The top frame could prevent the page to be unloaded. I would use the following code to work around it:

if (window.top !== window.self) {
    window.top.location.replace(window.self.location.href);
    alert('For security reasons, frames are not allowed.');
    setInterval(function(){document.body.innerHTML='';},1);
}

It uses alert() to give the browser time to load the new page. And it leaves no clickable elements if everything fails.

See the full problem description: frame-buster-buster-buster-code-needed