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 propiedadwindow.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](https://developer.chrome.google.cn/static/docs/lighthouse/best-practices/external-anchors-use-rel-noopener/image/lighthouse-audit-showing-b1f47b11d85bc.png?authuser=8&hl=es)
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"
nirel="noreferrer"
. - 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 propiedadwindow.opener
y garantiza que se ejecute en un proceso separado.rel="noreferrer"
tiene el mismo efecto, pero también evita que el encabezadoReferer
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.