Info target="_blank" sin rel="noopener"

Por qué los enlaces que abren en pestaña nueva con target="_blank" deberían incluir rel="noopener", y el riesgo de reverse tabnabbing que evita.

El validador marca cualquier <a target="_blank"> cuyo atributo rel no incluya noopener.

Ejemplo

<!-- Falta noopener -->
<a href="https://ejemplo.com" target="_blank">Enlace externo</a>

<!-- Más seguro -->
<a href="https://ejemplo.com" target="_blank" rel="noopener">Enlace externo</a>

Por qué importa

Por defecto, una página abierta con target="_blank" obtiene una referencia JavaScript en vivo hacia la página que la abrió (window.opener). Una página de destino maliciosa puede usar esa referencia para redirigir la pestaña original a una página de phishing — un ataque conocido como reverse tabnabbing — mientras la pestaña nueva sigue mostrando contenido aparentemente legítimo, así que el usuario no nota que la pestaña original cambió. rel="noopener" corta esa referencia. Todos los navegadores modernos ahora aplican un comportamiento similar a noopener a los enlaces con target="_blank" automáticamente, por eso esto se marca como informativo y no como error — pero agregarlo explícitamente sigue siendo recomendable para navegadores más antiguos y por claridad.

Frequently asked questions

¿Necesito rel="noopener" para enlaces a mi propio sitio?

Es innecesario para enlaces que controlas, ya que no hay riesgo desde tus propias páginas. Importa para enlaces a URLs de terceros o enviadas por usuarios, donde no puedes responder por el destino.

¿Cuál es la diferencia entre noopener y noreferrer?

noopener bloquea la referencia window.opener (el vector de tabnabbing). noreferrer hace eso también, y además elimina el encabezado Referer enviado al sitio de destino, así que este no va a saber qué página lo enlazó. Usa noreferrer cuando también quieras ocultar la información de referencia.