Nueva pregunta

Pregunta:

Fecha: 04-06-2018 02:22:50 (En Español)

La vulnerabilidad target=”_blank” y la solución rel=”noopener noreferrer”[Resuelta]

Buenos días / tardes / noches:

Repasando mis códigos viejos (viejos códigos), actualizándolos o tal vez creando nuevos proyectos, (algo que les encomiento porque al menos confirmamos lo que ya sabíamos y tal vez nos actualizamos), siempre miro y reviso tags y códigos. Y la seguridad comienza a ser prioritaria en nuestras creaciones web.

Donde menos se espera, salta la liebre. Nunca pensé leer algo así. Aunque todos llevamos algo de hacker (hacker bueno, por favor), una de las etiquetas tradicionales como lo es target=”_blank” puede ser causa de vunerabilidad.

El mérito viene de la mano de la-vulnerabilidad-target_blank-la-solucion-relnoopener-noreferrer-wordpress.

Esta vulnerabilidad, también conocida como reverse tabnabbing, un tipo de ataque de phishing en el que el atacante reemplaza la pestaña legítima, y fiable, por un documento malicioso usando el selector window.opener.location.assign() cuando se accede mediante un enlace de apertura en nueva ventana/pestaña, o sea del tipo target=”_blank”.

Resumiendo la información:
- Con el reverse tabnabbing, cuando haces clic en una web para abrir una página nueva, y se abre en una nueva pestaña, si luego vuelves a la web original, sin que tú te des cuenta se cambia automáticamente esa página falsa que simula ser la buena.
- ¿Qué hace la relación rel=”noopener noreferrer”?: evitar la vulnerabilidad. (noreferrer es para Firefox)

Así que nuestro enlace quedaría así:
<a target="_blank" rel="noopener noreferrer" href="https://elenlaceexterno.es">Texto del enlace externo</a>


- Ello no afecta al SEO , según han respondido desde Google.

Claro está que si asignaste un rel="nofollow" tu etiqueta quedaría así:
<a target="_blank" rel="nofollow noopener noreferrer" href="https://misitio.es/mi-enlace/">Texto de mi enlace</a>



Etiquetas: Aporte - HTML - Sugerencia Votos: 7 - Respuestas: 5 - Vistas: 28 Compartir en: Google Facebook Twitter LinkedIn Link
 

Respuestas:

  • Fecha: 04-06-2018 17:49:18 Txema muy buen aporte sobre el tema de seguridad.
    Muchas gracias por compartir tu experiencia la cual ayudara a muchos que desconocía tal tema.
    (+1)



    Saludos
      Votos: 3 - Link respuesta
     
  • Fecha: 04-06-2018 21:29:50 Muchas gracias Txema por recordar este tema +1.

    En reglas generales es importante implementar este atributo rel="noopener noreferrer" en los links (etiquetas a) que utilizan el atributo target="_blank", y principalmente en los que apuntan a direcciones URL (atributo href de la etiqueta a) que no están bajo nuestro control, ya que si bien puedes confiar en el destino, estas páginas pueden presentar vulnerabilidades que permitan realizar inyecciones de código JavaScript (entre otras), y en consecuencia acceder a información no prevista, más precisamente al objeto window, el nivel más alto en la jerarquía del navegador (quien engloba al DOM como propiedad, contenedor de nuestra página web).

    En otras palabras, la página nueva abierta con target="_black" tiene acceso al objeto window de la página que origina la llamada (por medio de window.opener), lo que abre una serie de posibilidades: como se menciona aquí, hacer un window.opener.location.assign() para cargar un nuevo documento y hacer algún ataque de phishing, acceder al window.opener.document para capturar datos, o bien trasladar la página a otra URL usando window.opener.location = 'http://otraurl.algo/otra.php'.

    Para aportar mayor claridad al tema, aquí les adjunto un ejemplo que hice donde se puede ver que si se utiliza el atributo rel="noopener noreferrer", en la página destino no se tiene acceso al objeto window de la página origen.
    Nota al margen: digo " al objeto window de la página origen" para simplificar la compresión, pero debemos observar que el objeto window no es de la página origen, sino más bien del navegador, que contiene a la página origen en cuestión, y es de aquí que teniendo acceso a este objeto tenemos tanto poder para "manipular" el origen desde la página destino.

    origenv.php (con la vulnerabilidad)
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>Web origen desde donde se abre la nueva web</title>
        </head>
        <body>
            <strong>Los siguientes datos serán capturados en la web destino y mostrados:</strong>
            <div id="datos">
                <p>Valor $100000</p>
                <p>Nombre y Apellido</p>
                <p>Otro dato</p>
            </div>
            <a target="_blank" href="destino.php">ir al destino (clic aquí)</a>
        </body>
    </html>
    


    origen.php (sin la vulnerabilidad)
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>Web origen desde donde se abre la nueva web</title>
        </head>
        <body>
            <strong>Los siguientes datos <u>no podrán</u> ser capturados en la web destino:</strong>
            <div id="datos">
                <p>Valor $100000</p>
                <p>Nombre y Apellido</p>
                <p>Otro dato</p>
            </div>
            <a target="_blank" rel="noopener noreferrer" href="destino.php">ir al destino (clic aquí)</a>
        </body>
    </html>
    


    destino.php
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>Web destino que captura los datos de la web origen y los muestra</title>
        </head>
        <body onload="capturarDatos();">
            
            <strong>Datos capturados de la web origen:</strong>
            <div id="contenedor"></div>
    
            <script>
                function capturarDatos() {
                    var datosCapturados = window.opener.document.getElementById('datos');
                    document.getElementById('contenedor').innerHTML = datosCapturados.innerHTML;
                }
            </script>
        </body>
    </html>
    


    Saludos a todos y como siempre buen código!
      Votos: 4 - Link respuesta
     
  • Fecha: 05-06-2018 10:37:33 Al agregar algunos enlaces en el post original, ingreso a la información de la "etiqueta a" según mozilla.org --> https://developer.mozilla.org/es/docs/Web/HTML/Elemento/a y descubro la siguiente nota al margen del atributo target, la cual transcribo.

    Nota: Cuando se utiliza target, considera agregar rel="noopener noreferrer" para evitar el uso de la API window.opener.

    Más fácil de explicarlo imposible, jajaja

    Saludos y buen código!
      Votos: 5 - Link respuesta
     
  • Fecha: 11-03-2019 12:17:22 Excelente aporte Txema, desconocía de ésto, también gracias Fernando por mencionar los ejemplos, cada día aprendemos algo nuevo ;)   Votos: 1 - Link respuesta
     
  • Fecha: 02-01-2020 17:00:12 Esto está muy interesante, saben que ignorantemente lo estaba usando porque lo agregaba el autocompletado en el editor, pero vamos que hoy me dispuse a investigar qué hacen estos atributos y la información que han compartido me ha parecido excelente, más que me gusta mucho los temas de seguridad.

    Muchas gracias.

    ¡Saludos!
      Votos: 1 - Link respuesta
     
Para participar activamente de la comunidad primero debes autenticarte, ingresa al sistema.Iniciar Sesión