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

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

  • Es posible que la otra página se ejecute 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 podría permitir que la otra página redireccione tu página a una URL maliciosa.

Agregando rel="noopener" o rel="noreferrer" a tus vínculos target="_blank" evita estos problemas.

Cómo falla la auditoría de destinos 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 contienen el atributo target="_blank". pero no con los atributos rel="noopener" ni rel="noreferrer".
  2. Filtra los vínculos del mismo host.

Como Lighthouse filtra los vínculos del mismo host, Hay 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", se siguen aplicando las implicaciones de rendimiento de esta auditoría. 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

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

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

Consulta el artículo Cómo compartir recursos de origen cruzado de forma segura. publicación para obtener más información.

Recursos