Prevenir el clickjacking con Javascript

Prevenir el clickjacking consiste en evitar que nuestra página sea cargada dentro de otra mediante un frame o iframe, esto para prevenir el robo de contenido así como evitar el uso de nuestra página para forzar a los visitantes a realizar clicks maliciosos. Entonces el objetivo es evitar que nuestra página pueda ser cargada dentro de otra utilizando frames o iframes.

Que es Clickjacking?

El clickjacking consiste en cargar una página dentro de otra utilizando un iframe y sobre ella mostrar otra página oculta con transparencia, de forma tal que si hacemos click en un botón para buscar estaremos indirectamente haciendo click sobre otra página para propósitos maliciosos.

Prevenir Clickjacking – Primer Método

La idea básica para prevenir que nuestra página sea cargada dentro de otra con frames o iframes es verificar la propiedad location del frame actual es igual al del frame superior. Si no son iguales estas propiedades es síntoma que nuestra página se esta cargando dentro de otra por lo tanto redireccionamos al url de nuestra web.

  1. <script type="text/javascript">
  2. if (top.location != location) top.location = self.location;

El método anterior por lo general es suficiente en la mayoría de los casos, pero existen técnicas para saltarse esta verificación, por ejemplo utilizar iframes anidados o generar errores de Javascript con lo cual se detiene cualquier verificación con javascript adicional. En el artículo Busting frame busting: a study of clickjacking vulnerabilities at popular sites se explica las múltiples formas de evitar el Frame Busting.

Prevenir Clickjacking – Segundo Método

Una forma sencilla de prevenir el uso de nuestras páginas en otros sitios es primero ocultar todo el contenido de nuestra web utilizando estilos. Luego de ello verificamos si la propiedad location del frame actual y el superior son iguales en cuyo caso volvemos visible todo el contenido de nuestro web en caso contrario redireccionamos a nuestra url.

Primero colocamos el siguiente código en el header para ocultar el contenido.

  1. <style type="text/css"> body { display:none; } </style>

Al final del contenido colocamos el siguiente código, el cual verifica si el frame actual es igual al frame superior para volver visible el contenido.

  1. <script type="text/javascript">
  2. if (self == top) {
  3.    document.getElementsByTagName("body")[0].style.display = 'block';
  4. } else {
  5.    top.location = self.location;
  6. }

De esta forma si el atacante de alguna forma genera un error de javascript o utiliza frames anidados solo se mostrará una página en blanco, una validación sencilla pero muy eficiente para evitar que nuestra web sea utilizada por terceros.

Mas Información

Comentarios Total 6 comentarios


andres
Publicado: 23/08/2010 6:38 am

¿Puede ser que el segundo método afecte a alguna técnica SEO, ya que esta oculto todo el sitio?

Luciano
Publicado: 24/08/2010 6:26 pm

Ante todo, te felicito por el blog, me encantas tus post.
Ahora si, al grano, me parece que el 2do metodo es un tiro en la cabeza a la accesibilidad, que pasa si el usuario tiene desactivado (o no tiene) javascript?
En todo caso, lo que debes hacer es (al utilizar javascript para “des-blanquear” el sitio) utilizar javascript para ponerle el – display: none – al body.

En todo caso la 1er opcion me parece la mejor, ya que ademas de evitar que nuestra pagina sea mostrada de forma extraña, (a vaces maliciosamente) redirige a los usuarios a nuestra página.

Saludos

unijimpe
Publicado: 24/08/2010 9:29 pm

Efectivamente la primera forma es una solución mas accesible, pero esta forma de protección es saltada por los atacantes con no mucho esfuerzo.
Por ejemplo en el ejemplo: http://samples.unijimpe.net/clickjacking.html.

Dev
Publicado: 26/08/2010 9:17 am

Unijimpe, que opinas acerca de la solución que ofrece Luciano de usar javascript para poner el body:none ? me parece una excelente idea, pero no soy experto. De esa forma nos aseguramos que el usuario tiene javascript activo y la comprobación que planteas cumplirá su cometido. :D
Excelente blog, es el mejor para aprender, ojalá hubiesen publicaciones más frecuentes.

Un saludo desde Colombia.

Jessik
Publicado: 25/03/2012 7:49 pm

Yo tampoco soy experta en Js, pero estoy de acuerdo con dev.

De alguna manera, no tengo idea cómo, verificaría el url donde
está mi páginas un segundo -o un número arbitrario de tiempo-
después de todo cargado: y ahí si: si está todo bien, seguimos
sino, paso al display: none.

Y quizá no sea favorable para el SEO, detener la ejecución de la
página al principio de todo hasta hacer la comprobación.

Diego
Publicado: 08/06/2012 10:41 pm

Jaja no se pero yo tengo un site de peliculas y es exactamente lo que hago , hasta ahorita me di cuenta que es eso del clickjacking, jeje bueno pero yo uso los servidores no los tomo dentro de la web, visiten mi pagina http://www.Justmovies.com , publico peliculas online ya que en mi pais no es ilegal eso , Jeje busco diseñadores con tiempo libre.

 

Comentar

En este blog los comentarios están moderados, serán mostrados cuando el administrador los apruebe. Por favor, evita comentarios ofensivos u obscenos por que no serán aprobados.
Si deseas publicar código fuente debes hacerlo entre las etiquedas <code> y </code>, además debes reemplazar los carácteres < por &lt; y > por &gt;.

(Requerido)

(Requerido, no será publicado)

(Requerido)

(Tags aceptados: <a> <em> <strong> <code> <ul> <li>)