Evita que tu sitio sea cargado desde un iframe

El uso de iframes permite cargar un sitio web dentro de otro, sin embargo puede ser que en algunos proyectos te interese bloquear esta funcionalidad. En este artículo veremos diferentes formas para evitar que tu sitio sea cargado desde un iframe.

 

Resultado Final

Al final lo que queremos obtener es algo similar a como se muestra en la siguiente imagen, en donde vemos que no es posible cargar el sitio en un iframe.

 

Usando .htaccess para evitar la carga desde un iframe

Puedes agregar el siguiente código en el archivo .htaccess de tu sitio para evitar la carga de tu sitio desde un iframe.

Header set X-Frame-Options DENY

Puedes ubicar el archivo .htaccess en la raíz de tu sitio web, para editar el archivo puedes hacerlo desde el Administrador de Archivos del panel de tu cuenta de hosting o con algún cliente FTP.

 

Usando PHP y Javascript para evitar la carga desde un iframe

Otra opción en WordPress para comprobar la carga de tu sitio en un iframe es a través de un Hook en PHP y código Javascript.

Una vez identificas que el sitio esta siendo cargado por un iframe, puedes programar diferente comportamiento, por ejemplo:

 

Opción de redirección

Si tu sitio es insertado en un iframe, entonces será redirigido al sitio que esta dentro del iframe.

add_action( 'wp_footer', 'dcms_avoid_iframe_loading' );
function dcms_avoid_iframe_loading(){
    ?>
  <script>
   if ( this.top.location !== this.location ){
        this.top.location = this.location;
   }
  </script>
  <?php
}

 

Opción remover elementos

En algunos navegadores la redirección puede darte problemas, por lo que otra opción es eliminar directamente el contenido cuando el sitio se muestra en un iframe.

add_action( 'wp_footer', 'dcms_avoid_iframe_loading' );
function dcms_avoid_iframe_loading(){
    ?>
  <script>
   if ( this.top.location !== this.location ){
       element = document.querySelector('body');
       element.parentNode.removeChild(element);
   }
  </script>
  <?php
}

 

Conclusión

Como has podido comprobar si quieres evitar que tu sitio se muestre como parte de otro sitio, tienes diferentes opciones, a través de código, para evitarlo.

 
¿Aún con dudas?, en el siguiente video se detallan los puntos anteriores.

Suscríbete a DecodeCMS:  

La entrada Evita que tu sitio sea cargado desde un iframe es un artículo reciente del sitio DecodeCMS.