JavaScript FrameBuster Snippet

By  on  

Oftentimes you want to make sure your site isn't being IFRAME'd.  Sometimes it's for security reasons, other times it's so your site's content isn't being skimmed else, and other times it's...oh, who cares, you just want to do it.  Here's a short way to escape frames:

if (top.location != self.location) {
    top.location = self.location.href;
}

Uglify this and you get 63 characters of gold.  Simple, effective.

Recent Features

Incredible Demos

  • By
    Elegant Overflow with CSS Ellipsis

    Overflow with text is always a big issue, especially in a programmatic environment. There's always only so much space but variable content to add into that space. I was recently working on a table for displaying user information and noticed that longer strings were...

  • By
    Introducing MooTools ElementSpy

    One part of MooTools I love is the ease of implementing events within classes. Just add Events to your Implements array and you can fire events anywhere you want -- these events are extremely helpful. ScrollSpy and many other popular MooTools plugins would...

Discussion

  1. Sorry bit of a jacascript noob here – this sounds great but how would one implement it? Where does it go?

    Again apologies for what must sound a simple question.

    • Eric

      Just toss it at the top of your javascript file :). Really anywhere in your JS this would work.

    • Just don’t put it inside a function unless that your intention. For example if for some reason you want to give your users a chance to make sure the page isn’t iframed by clicking a button then you put that code in a function say unIFrameMe() and then call that function when onclick the button.

      In general, you’ll want this code to be outside of a function, so it is run when the js is loaded.

      EMILIO!

  2. Thanks for the answers re the javascript.

    htaccess solutions might be better as they are not so easily bypassed:

    To blocks all sites (including your own) from iframing your pages:

    Header append X-FRAME-OPTIONS "DENY"
    

    or to block any external site from iframing your pages:

    Header append X-FRAME-OPTIONS "SAMEORIGIN"
    
  3. You can also only block some of your urls with the x-frame-options header. Here’s an apache solution

    Header always append X-Frame-Options SAMEORIGIN # Block any site from applying an iframe.

  4. Apparently I didn’t use `pre` tags.

    Header always append X-Frame-Options SAMEORIGIN # Block any site from applying an iframe.
    

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!