Cuando vinculas una página a otro sitio con 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 código JavaScript, es posible que se vea afectado el rendimiento de tu página.
- La otra página puede acceder a tu objeto
windowcon la propiedadwindow.opener. Esto puede permitir que la otra página redireccione la tuya a una URL maliciosa.
Agregar rel="noopener" o rel="noreferrer" a tus vínculos de 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 con orígenes cruzados:
Lighthouse usa el siguiente proceso para identificar los vínculos como no seguros:
- Recopila todas las etiquetas
<a>que contengan el atributotarget="_blank", pero no los atributosrel="noopener"orel="noreferrer". - Filtra los vínculos del mismo host.
Dado que Lighthouse filtra los vínculos del mismo host, hay un caso límite que debes tener en cuenta cuando 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 seguirán siendo válidas.
Sin embargo, no verás estos vínculos en los resultados de Lighthouse.
Mejora el rendimiento de tu sitio y evita vulnerabilidades de seguridad
Agrega rel="noopener" o rel="noreferrer" a cada vínculo identificado en tu 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"evita que la página nueva pueda acceder a la propiedadwindow.openery garantiza que se ejecute en un proceso separado.rel="noreferrer"tiene el mismo efecto y también evita que se envíe el encabezadoReferera la página nueva.
Lee Cómo compartir recursos de origen cruzado de forma segura para obtener más información.