La vulnerabilidad target=»_blank» y la solución rel=»noopener noreferrer» de WordPress

Desde la versión 4.7.4, WordPress incorpora la nueva versión del editor TinyMCE incluido, que soluciona la conocida como vulnerabilidad target=»_blank», y lo hace añadiendo automáticamente a este tipo de enlaces la relación rel=»noopener noreferrer» ¿te habías dado cuenta?

Cuando surgió el debate en el artículo sobre las novedades de WordPress 4.7 y luego posteriormente lo abrió Miguel en los foros de soporte me puse a investigar un poco así que vamos a poner algo de luz en este asunto.

¿Qué es la vulnerabilidad target=»_blank»?

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».

Lo que hace el atacante es, usando el selector window.opener.location, llevar al usuario a alguna página falsa, que simula ser la original, o ejecuta algún JavaScript en la página de apertura en la que confía el usuario.

Explicado de manera sencilla, 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.

Parece la página web original que estabas viendo pero tiene una url distinta (que se puede ver claramente). El problema es que la mayoría de los usuarios no se dan cuenta de que la URL ha cambiado, ya que no se suelen fijar casi nunca, menos si piensan que están en una web en la que confían, por ejemplo esta.

Luego, por ejemplo, la página web falsa les pedirá que accedan de nuevo a su cuenta, y claro, pero ya no estás donde te creías que provienes sino en una copia de la pestaña original en la que hay otro documento, en este caso malicioso. Si introduces tus datos ya te has entregado a los hackers y harán lo que sea con tus credenciales.

En esta página tienes un ejemplo (no malicioso) del reverse tabnabbing por si quieres probarlo en tus carnes sin peligro.

¿Qué hace la relación rel=»noopener noreferrer»?

El modo de evitar la vulnerabilidad target=»_blank»reverse tabnabbing es añadir a tus enlaces que abren en nueva ventana/pestaña la relación de enlace rel=»noopener», y como el navegador Firefox no reconoce esta relación sumarle la relación noreferrer, a fin de cuentas, añadiendo esto: rel=»noopener noreferrer».

De este modo, para evitar la vulnerabilidad, tu enlace externo debería ser algo así:

<a target="_blank" rel="noopener noreferrer" href="https://elenlaceexterno.es">Texto del enlace externo</a>

De este modo se elimina la posibilidad de aplicar la citada vulnerabilidad. Sencillo ¿no? Lo malo es si tienes que ir añadiendo esto a cada enlace externo uno a uno, pero usamos WordPress ¿verdad?

¿Afecta al SEO añadir noopener noreferrer?

Una pregunta que ha surgido en los foros y aquí mismo en los comentarios es si esto afectará en algo, por ejemplo, a los enlaces que tenga el atributo nofollow pues los modifica añadiéndoles los atributos noopener noreferrer.

Me refiero a que si tenías un enlace de este tipo en una entrada …

<a rel="nofollow" href="https://misitio.es/mi-enlace/">Texto de mi enlace</a>

Si la actualizas pasará a ser así:

<a rel="nofollow noopener noreferrer" href="https://misitio.es/mi-enlace/">Texto de mi enlace</a>

Y la misma duda ha surgido en general, si añadir estas relaciones de enlace afecta en algo al SEO.

Pues no, según han respondido desde Google a preguntas de webmasters es un simple enlace, no añade ni quita ni afecta el posicionamiento a los enlaces, tengan nofollow o no, a los que se añada el noopener noreferrer.

¿Cómo soluciona esta vulnerabilidad WordPress?

Como comenté al principio del artículo, WordPress, en la versión 4.7.4, incorporó la actualización del editor incluido TinyMCE que soluciona esta vulnerabilidad añadiendo automáticamente la relación rel=»noopener noreferrer» a todos los enlaces con target=»_blank», tanto a los nuevos contenidos como a los existentes si los abres para editarlos, una solución bastante efectiva.

Eso sí, que quede claro que WordPress/TinyMCE solo añade la relación noopener noreferrer en los enlaces que tú decidas que abran en ventana/pestaña nueva, o sea, en los que hagas esto:

¿Y si no quiero que WordPress me proteja de la vulnerabilidad reverse tabnabbing o como se llame?

Si prefieres vivir peligrosamente puedes desactivar esta funcionalidad del editor TinyMCE de WordPress añadiendo el siguiente código a tu plugin de utilidades o al archivo functions.php del tema hijo activo, pero NO LO HAGAS:

// Esto desactiva voluntariamente una funcionalidad de seguridad de tinyMCE.
// NO ES RECOMENDABLE usar este código.
add_filter('tiny_mce_before_init','tinymce_allow_unsafe_link_target');
function tinymce_allow_unsafe_link_target( $mceInit ) {
	$mceInit['allow_unsafe_link_target']=true;
	return $mceInit;
}

Entonces ¿qué hago?

Nada, en serio. El hecho de que se añada la relación rel=»noopener noreferrer» a los enlaces que abren en ventana/pestaña nueva es una funcionalidad de seguridad que te protege a ti y tus visitantes de una vulnerabilidad grave, de robo de información, y el hecho de que WordPress/TinyMCE nos protejan de esto es bueno.

Más información:
VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(42 votos, promedio: 4.8)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

47 comentarios en “La vulnerabilidad target=»_blank» y la solución rel=»noopener noreferrer» de WordPress”

  1. En primer lugar, gracias por arrojar un poco de luz sobre el asunto.

    La solución adoptada adolece de un pequeño inconveniente, a saber, que puede hacer que algún que otro plugin deje de funcionar ya que algunos hace uso del campo «rel».
    Lo ideal sería que «noopener» y «noreferrer» se añadieran solo a los enlaces externos. Con esta simple medida se evitaría cualquier problema de compatibilidad con plugins.
    Otro problema es el relativo a las entradas antiguas. Para que funcione la solución adoptada en WordPress deberíamos editar cada una de ellas, algo difícil de llevar a cabo para la gran mayoría.

    La solución que yo he adoptado es deshabilitar esa función pero al mismo tiempo interceptar «la salida» y añadir «noopener» y «noreferrer», mediante un plugin solo para los enlaces externos. Con esto evitamos tener que editar todas nuestras entradas y permitimos que todos los plugins que hacían uso del campo «rel» sigan funcionando.

    1. Miguel, cuidadín con abrir en otra pestaña enlaces internos. No abuses que la gran G se podría enfadar. Piensa que esa técnica es la que utilizan páginas no muy legales para abrirte publicidad y Google declaró la guerra a esas prácticas.

        1. Salvo en contadas ocasiones (y plenamente justificadas) nunca abro en nueva pestaña un enlace interno, es decir, que sigo la misma regla que Fernando.

          Ahora bien. El problema lo tengo con las imágenes. Uso thickbox que viene por defecto en WordPress y resulta que
          1) se usa el campo «rel» para montar las galerías.
          2) Siempre marcaba lo de «abrir en nueva ventana». Esto lo hacía porque lo de «thickbox» lo pongo de forma manual y así, si me olvidaba por algún motivo, al menos la imagen se abría en otra ventana.
          3) La galería deja de funcionar en cuanto se añade el editor «noopener» y «noreferrer».

    2. Lo primero felicitarte Fernando por tu artículo. Miguel ¿has llegado a probar actualizar una entrada? Yo tengo enlaces en los que a mano desde la pestaña de HTML le añadí rel=»nofollow» y al actualizar el post me ha mantenido el «nofollow» y ha añadido «noopener noreferrer». Supongo que lo tenían en cuenta y lo único que hacen es que si no está la etiqueta rel la ponen y en caso de ya estar en uso añadir «noopener noreferrer» sin machacar lo que ya tenga.

  2. Muchas gracias por el aporte Fernando. Desconocía esta vulnerabilidad y la verdad es que es algo que utilizo bastante. He realizado alguna prueba y solo añade de forma automática la propiedad rel=”noopener noreferrer” si volvemos a editar las entradas/artículos, sino no se añade la propiedad. Ahora volver a salvar cada una de las entradas existentes de la web puede ser tarea pesada. Saludos!

  3. Carmen Cantariño (decor&links)

    Hola, muchas gracias por este post tan claro. Solo me queda una duda con los rel= «nofollow». He visto en posts antiguos que ahora aparecen como rel=»nofollow noopener noreferrer», y sin embargo en el listado de links follows y nofollow que ofrece yoast no lo reconoce … ¿sabrías por qué? Esto es lo que dice yoast:

    Calificación SEO buena
    Esta página tiene 0 enlace(s) nofollow y 3 enlace(s) externos normales.

  4. He realizado una prueba de una AMP y me dá erros

    El atributo «noreferrer» no puede aparecer en la etiqueta «a».

    Subiría una captura pero no puedo aquí. @fernandot:disqus si lo habilitas un rato la subo

  5. Alberto Sánchez

    La verdad es que el ingenio de los «hackercillos» es digno de elogiar, aunque nos perjudique a casi todos los que tenemos una página web en algún momento de nuestras vidas.

    Gracias por mantenernos informados de todos estos pormenores. ¡Un saludo!

  6. Muchas gracias por la info. Di un salto cuando revisando unos enlaces vi que se había añadido esos «extras».

    Aunque tengo una pregunta. ¿Saben como afecta a los enlaces de afiliados? ¿Creeis que puede afectar por ejemplo con Amazon?

    Saludos

    1. Pues no me he fijado en todo tipo de enlace de afiliado, pues los hay ofuscados y de todo tipo. En los productos afiliados de WooCommerce por ejemplo no funciona, no añade el noopener noreferrer, solo nofollow.

      1. Carmen Cantariño (decor&links)

        Fernando, no se si viste mi pregunta de hace unos días, pero ¿como puedo ahora añadir «nofollow» a esta nueva función de noopener noreferrer. Sabes como debo hacerlo??

          1. Carmen Cantariño (decor&links)

            Bueno, lo estaba haciendo manual .. por eso preguntaba .. ya que lei en algún sitio que era bueno tener un poco de ambos (follow y nofollow). Entonces, cómo se añadiría ahora el rel=»nofollow»de forma manual?. Aunque si de paso me recomiendas uno de esos automáticos que no ralentice la página podría ver si es más interesante – mi nivel es bajito, eh? 😉 Gracias!.

          2. El administrador más administr

            ¿Sabes de algún plugin que realmente funcione para automatizar los nofollow externos? He probado un par y nada. Gracias

  7. El administrador más administr

    ¿Es normal que me lo fusione con los rel=»nofollow»? Entiendo que si, pero me da miedo que al quedar lo siguiente rel=»nofollow noopener noreferrer» el nofollow deje de tener efecto o algo y me jorobe el seo on page…

  8. Este artículo me ha sido de mucha utilidad ya que no sabía de que iba el tema. Hoy me he puesto a reescribir un post y el problema ha llegado cuando quería que esos enlaces fueran nofollow, lo que he hecho ha sido poner esto:
    target=»_blank» rel=»nofollow noopener noreferrer»> Pero hay algo mal porque no me lo coge, ¿Alguien puede ayudarme?

    1. Carmen Cantariño (decor&links)

      Hola Elena, pues no. Me aparece como a ti. El problema es que no se si funciona o no, porque la forma que tenía de saberlo era con el comentario que hace Yoast Seo indicándote cuántos nofollow y cuántos follow tienes, y da igual lo que ponga porque siempre dice que todos son follow (siempre=desde el cambio)

        1. Para comprobar si son nofollow es sencillo, mira el código fuente y ahí te lo cantará, los verás como tales:

          Lo que sea

          Si sale en el código es que está

          También puedes usar un plugin que hay para Chrome que te pone en rojo los nofollow si lo prefieres

    2. El noopener noreferrer lo añade solo a lo que tú le pongas, y entonces queda así:

      target="_blank" rel="nofollow noopener noreferrer"

      No se cual es el problema

    3. Hola Elena! A mi me pasa lo mismo.. ahora con la nueva actualización de WordPress solo me pone rel=»noopener» pero no me deja modificarlo ni añadir «nofollow» ni «noreferrer» en ninguno de los enlaces externos, pero es que antes de esta última actualización tampoco me dejaba cambiarlo, se quedaba solo en rel=»noopener noreferrer». cuando lo añado manualmente, lo guardo y vuelvo a mirarlo veo que me lo ha borrado.. ¿Habéis conseguido solucionarlo?

      Por cierto Fernando, un artículo estupendo!

          1. Acabo de probar y es verdad que ya no sale el noreferrer, pero acabo de editar un enlace añadiendo nofollow y sin problemas, o sea:

            < a href="http://enlace.com" rel="nofollow noopener" 

            Y al actualizar ahí siguen ambos sin problema.

  9. ¡Gracias por la explicación! Y según voy leyendo los comentarios… gracias también! No sabía lo del «no target blank» para los enlaces internos. Leeré un poco más sobre el tema…

  10. Marcelo Fernandez

    Entonces que diga «noopener» y «noreferrer» no implica que sea «nofollow», si no lo expresa el «nofollow» literalmente?

  11. Me acabo de enterar de esta función del TinyMCE y de la susodicha vulnerabilidad, aunque me he fijado que en mi caso los enlaces cogen solo la relación «roopener» por defecto. ¿Puede ser porque Firefox ya reconoce «noopener» y por eso ya no es necesario usar también «noreferrer»? ¿Alguien lo sabe?

    En cualquier caso, entiendo que el peligro sigue existiendo en los enlaces «_blank» añadidos manualmente (en mi caso casi todos), por lo que supongo que igual sería más útil una función que convierta todos los «_blank» en «noopener».

  12. Hola Fernando!

    No estoy seguro si afecta al 100 %, pero cuando salieron estas etiquetas noté un bajón en las comisiones de los enlaces de afiliado que utilizo en algunos sitios y al poner el código para evitar esas etiquetas las cifras volvieron a los datos anteriores… Quizá sea paranoia, pero esa fue mi sensación.

    Con la llegada de Gutemberg y el plugin de Editor clásico parece que este código ha dejado de funcionar. Al menos con el plugin de Editor clásico. ¿Sería posible actualizar el código para que funcione con los nuevos editores?

    Muchas gracias!!

  13. Hola Fernando, te has fijado que cuando usas las comillas » en el texto se cambian por el simbolo » (por ejemplo en el texto vulnerabilidad target=»_blank»). No se si se deba a la plantilla o a algún plugin. El hecho es que en mi blog utilizo THE7 y me sucede lo mismo que en el tuyo con Nexus. Luego tengo otro blog con Astra y no sucede lo mismo. He hecho pruebas cambiando las comillas por " pero sigue haciendo lo mismo. He desactivado casi todo los plugins pero nada. Lo peor es que las comillas son necesarias cuando se refiere a código HTML. ¿Sabrías que puede ser? ¿Alguna solución? Gracias. Un saludo crack!

  14. gracias por el articulo.
    Es verdad que tal como explica Fernando añade esos atributos, pero porque en Lighthouse los sigue marcando como Blank ?

    Gracias
    CarlosMM

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Ir arriba Ir al contenido