Los vínculos a destinos de origen cruzado no son seguros

Cuando vinculas a una página en otro sitio mediante el atributo target="_blank", puedes exponer tu sitio a problemas de rendimiento y seguridad:

  • La otra página puede ejecutarse en el mismo proceso que la tuya. Si la otra página ejecuta mucho JavaScript, el rendimiento de tu página puede verse afectado.
  • La otra página puede acceder a tu objeto window con la propiedad window.opener. Esto puede permitir que la otra página redireccione la página a una URL maliciosa.

Puedes evitar estos problemas agregando rel="noopener" o rel="noreferrer" a tus vínculos target="_blank".

Cómo falla la auditoría de destino de origen cruzado de Lighthouse

Lighthouse marca los vínculos no seguros a destinos de origen cruzado:

Auditoría de Lighthouse que muestra vínculos no seguros a destinos de origen cruzado

Lighthouse usa el siguiente proceso para identificar los vínculos como no seguros:

  1. Recopila todas las etiquetas <a> que contengan el atributo target="_blank", pero no los atributos rel="noopener" ni rel="noreferrer".
  2. Filtra los vínculos del mismo host.

Como Lighthouse filtra los vínculos del mismo host, existe un caso límite que debes tener en cuenta si trabajas en un sitio grande: si una página contiene un vínculo target="_blank" a otra página de tu sitio sin usar rel="noopener", las implicaciones de rendimiento de esta auditoría se aplican. Sin embargo, no verás estos vínculos en los resultados de Lighthouse.

Cómo mejorar el rendimiento de tu sitio y evitar vulnerabilidades de seguridad

Agrega rel="noopener" o rel="noreferrer" a cada vínculo identificado en tu informe de Lighthouse. En general, cuando uses target="_blank", agrega siempre rel="noopener" o rel="noreferrer":

<a href="https://examplepetstore.com" target="_blank" rel="noopener">
  Example Pet Store
</a>
  • rel="noopener" evita que la página nueva pueda acceder a la propiedad window.opener y garantiza que se ejecute en un proceso separado.
  • rel="noreferrer" tiene el mismo efecto, pero también evita que el encabezado Referer se envíe a la página nueva. Consulta Tipo de vínculo "noreferrer".

Para obtener más información, consulta la publicación Comparte recursos de origen cruzado de forma segura.

Recursos