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
    5 More HTML5 APIs You Didn’t Know Existed

    The HTML5 revolution has provided us some awesome JavaScript and HTML APIs.  Some are APIs we knew we've needed for years, others are cutting edge mobile and desktop helpers.  Regardless of API strength or purpose, anything to help us better do our job is a...

  • By
    Regular Expressions for the Rest of Us

    Sooner or later you'll run across a regular expression. With their cryptic syntax, confusing documentation and massive learning curve, most developers settle for copying and pasting them from StackOverflow and hoping they work. But what if you could decode regular expressions and harness their power? In...

Incredible Demos

  • By
    Implement the Google AJAX Search API

    Let's be honest...WordPress' search functionality isn't great. Let's be more honest...no search functionality is better than Google's. Luckily for us, Google provides an awesome method by which we can use their search for our own site: the Google AJAX Search API.

  • By
    Animated AJAX Record Deletion Using MooTools

    I'm a huge fan of WordPress' method of individual article deletion. You click the delete link, the menu item animates red, and the item disappears. Here's how to achieve that functionality with MooTools JavaScript. The PHP - Content & Header The following snippet goes at the...

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!