• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Recursos / Evita que tu sitio sea cargado desde un iframe

Evita que tu sitio sea cargado desde un iframe

[ 24 noviembre 2021 ] [ Autor: Jhon Marreros Guzmán ][ Recursos - Intermedio] [ ]

seguridad

Suscríbete a DecodeCMS:  

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.

No fue 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.

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Mostrar contenido solo a usuarios que compraron un producto en WooCommerceMostrar contenido solo a usuarios que compraron un producto en WooCommerce
  • Optimizar la carga de Javascript en WordPress con Async y DeferOptimizar la carga de Javascript en WordPress con Async y Defer
  • Agregar Iconos Font Awesome en el menú de WordPressAgregar Iconos Font Awesome en el menú de WordPress
  • Deshabilitar métodos de pago en WooCommerce según el total de pedidoDeshabilitar métodos de pago en WooCommerce según el total de pedido
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (2 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. Caco

    31 enero, 2023

    OJO con el primer codigo “Header set X-Frame-Options DENY” si ocupan elementor se va a romper el plugin

    • Jhon Marreros Guzmán

      1 febrero, 2023

      Hola, Caco, gracias por el aporte.

  2. Carlos Alberto Acosta

    4 noviembre, 2023

    Hola, gracias por el aporte y tengo una pregunta, es posible que ese iframe solo se permita en un unico dominio, ej
    mi sitio es http://www.sitioorigen.com y quiero se permita iframe en unicamente http://www.sitioframe.com

    eso se puede?

    • Jhon Marreros Guzmán

      5 noviembre, 2023

      Hola, si, podrias hacerlo por javascript, agregando una condicional, por ejemplo:

      this.top.location !== this.location && this.top.location!=='https://tusitiopadre.com'
      

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Omnisend
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad SEO social woocommerce

Populares

Eliminar automáticamente las imágenes al borrar un producto de WooCommerce

Personalizar nube de etiquetas en WordPress

Cambiar desplegable por botones en las variaciones de productos de WooCommerce

Cómo eliminar todos los productos de WooCommerce

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados