• 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

  • Quitar el menú de WooComerce en la administración de WordPress para ciertos usuariosQuitar el menú de WooComerce en la administración de WordPress para ciertos usuarios
  • Eliminar automáticamente las imágenes al borrar una entradaEliminar automáticamente las imágenes al borrar una entrada
  • Ocultar precios de productos a usuarios visitantesOcultar precios de productos a visitantes en WooCommerce
  • Deshabilitar Información de Usuarios de la REST API de WordPressDeshabilitar Información de Usuarios de la REST API de WordPress
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (4 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

Cambiar comillas («») en WordPress

Modificar elementos en página de producto de WooCommerce

Agregar campos adicionales de usuario en la página de pedido de WooCommerce

Extraer un sitio desde un multisite

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