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» ¿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.
Índice de contenidos
¿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»?
El modo de evitar la vulnerabilidad target=»_blank» o 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».
De este modo, para evitar la vulnerabilidad, tu enlace externo debería ser algo así:
<a target="_blank" rel="noopener" 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.
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" 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.
¿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» 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 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» 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.
- Target blank, the most underestimated vulnerability ever
- The target blank vulnerability by example
- About: rel=»noopener»
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
AVISO: Esta publicación es de hace 3 años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado. ¡Ah! ¿te funciona? pues entonces no he dicho nada :)
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.
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.
satamente. La norma por defecto que yo aplico es self para enlaces internos y blank para externos
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».
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.
Eso explica lo que ví el otro día….
Gracias por el articulo Fernando! Genial como siempre!
Gracias a ti por dedicarle tu tiempo y, sobre todo, por el detalle de dejar el comentario 🙂
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!
Eso comentaba en el artículo, si los editas. No tardará en salir un plugin que lo cambie en todos
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.
A mi me pasa lo mismo Carmen ¿has encontrado solución?
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
Está claro, AMP no reconoce muchas tags
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!
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
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.
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??
Hay ya un montón de funciones y plugins para añadir nofollow automático a los enlaces salientes ¿es eso lo que quieres?
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!.
Manualmente es simplemente añadir rel=»nofollow» en cualquier parte del código del enlace, a continuación de los noopener si quieres.
Plugin conozco este: https://ayudawp.com/todos-los-enlaces-externos-nofollow-y-target-blank/
¿Sabes de algún plugin que realmente funcione para automatizar los nofollow externos? He probado un par y nada. Gracias
¿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…
Sí, lo hace así, aprovecha los «rel» que hay y añade esto, no afecta nada al nofollow
los enlaces de afiliado funcionan igual? Dicen por aquí que no http://hablandodeinternet.com/eliminar-rel-noopener-noreferrer-wordpress-4-7-4-posteriores/
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?
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)
A mi me pasa igual, a ver si alguien nos ayuda a saber si lo estamos haciendo correctamente y como podemos comprobar si los enlaces son nofollow
Para comprobar si son nofollow es sencillo, mira el código fuente y ahí te lo cantará, los verás como tales:
Lo que seaSi 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
¡Gracias! El problema era ese que Yoast me decía que los enlaces eran follow…..
No te fies del todo de Yoast porque le confunde que haya varias reglas juntas en el
El noopener noreferrer lo añade solo a lo que tú le pongas, y entonces queda así:
No se cual es el problema
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!
Gracias
Por curiosidad – como a mi no me pasa y tengo cientos de WP instalados – ¿has probado a desactivar algún plugin por ahí? Por si acaso
si, y nada 🙁 y es que me pasa en varios wp que administro
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:
Y al actualizar ahí siguen ambos sin problema.
Este enlace, por ejemplo, le puse hace unas pocas semanas junto a «nofollow» y solo se me quedó grabado esto 🙁
< a href="http://www.restaurantsupermercado…" target="_blank" rel="noopener noreferrer"
interesante
¡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…
Entonces que diga «noopener» y «noreferrer» no implica que sea «nofollow», si no lo expresa el «nofollow» literalmente?
Exacto
Pues ya me quedé con ganas de quitar esas etiquetas, pero después de leer esto me quedé más tranquilo.
¡Excelente información! Muchas gracias.
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».
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!!
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!
Eso es desde la última actualización de WordPress, y no pasa en los códigos que compartas, solo las cambia en el
content, o en los títulos, como es este caso. WordPress cambia las comillas normales por tipográficas, en este caso en español por las españolas, o angulares.Se anunció hace días: https://es.wordpress.org/2019/04/25/comillas-espanolas/
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
Hola. Gracias por la información, tengo una pregunta. ¿Afecta el orden en el que se pongan? Ejemplo:
o siempre tiene que ir al principio target=»_blank» rel=»noopener noreferrer»
Saludos
Da lo mismo el sitio 😉
El abrir una pestaña puede suponer un problema mucho más gordo de lo que la gente se cre pero por lo demas me ha gustado mucho el contenido del artículo.
Hola. Muy interesante la publicación. Pero, tengo una duda. Pude ver una página web que escibe «no opener no referrer no follow» y pregunto si igualmente funciona. Saludos desde Maracaibo, Venezuela. Gracias de antemano.
No, está mal, eso es como no poner nada