Undefined Web Undefined Web - 5 months ago 16
HTML Question

Disallow iframes from displaying page

How can I disable people from using my page in an iframe. Is it possible using only HTML or must I use JavaScript/jQuery.

Answer

There are a couple different ways to approach this problem, which are explained in detail in the Busting Frame Busting paper which I highly recommend you read if you have a chance to.

The first two options are using HTTP Headers, which don't use any HTML, JavaScript/jQuery, but do require configuration on your web server.

  1. Use the X-FRAME-OPTIONS header.

    • X-FRAME-OPTIONS: deny - no rendering within a frame
    • X-FRAME-OPTIONS: sameorigin - no rendering if origin mismatch
  2. The Content-Security-Policy header allows you to use the frame-ancestors directive to specify which origins are allowed to embed the page into a frame or an iframe. The downstide to this is it does not provide a way to enforce side wide policy.

EDIT: frame-ancestors is actually part of Content Security Policy Level 2 for which the compatibility can be seen here

The suggested method is using the following snippet of code at the top of your page. It will hide your page's content if it is iframed and will reveal the content otherwise.

<style> html {display:none;} </style>
<script>
   if (self == top) {
       document.documentElement.style.display = 'block'; 
   } 
   else {
       top.location = self.location; 
   }
</script>