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
    An Interview with Eric Meyer

    Your early CSS books were instrumental in pushing my love for front end technologies. What was it about CSS that you fell in love with and drove you to write about it? At first blush, it was the simplicity of it as compared to the table-and-spacer...

  • By
    7 Essential JavaScript Functions

    I remember the early days of JavaScript where you needed a simple function for just about everything because the browser vendors implemented features differently, and not just edge features, basic features, like addEventListener and attachEvent.  Times have changed but there are still a few functions each developer should...

Incredible Demos

  • By
    Facebook Sliders With Mootools and CSS

    One of the great parts of being a developer that uses Facebook is that I can get some great ideas for progressive website enhancement. Facebook incorporates many advanced JavaScript and AJAX features: photo loads by left and right arrow, dropdown menus, modal windows, and...

  • By
    Form Element AJAX Spinner Attachment Using MooTools

    Many times you'll see a form dynamically change available values based on the value of a form field. For example, a "State" field will change based on which Country a user selects. What annoys me about these forms is that they'll often do an...

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!