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

  • By
    LightFace:  Facebook Lightbox for MooTools

    One of the web components I've always loved has been Facebook's modal dialog.  This "lightbox" isn't like others:  no dark overlay, no obnoxious animating to size, and it doesn't try to do "too much."  With Facebook's dialog in mind, I've created LightFace:  a Facebook lightbox...

  • By
    Create a CSS Cube

    CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals.  Add animation and you've got something really neat.  Unfortunately each CSS cube tutorial I've read is a bit...

Incredible Demos

  • By
    Geolocation API

    One interesting aspect of web development is geolocation; where is your user viewing your website from? You can base your language locale on that data or show certain products in your store based on the user's location. Let's examine how you can...

  • By
    JavaScript Copy to Clipboard with Branding

    I published a post a year ago detailing how you can copy to the clipboard using JavaScript.  The post was very popular and why would it be?  Copying content from a webpage without needing to use the default browser functions is awesome.  One trend I've...

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!