Ao vincular uma página em outro site usando o atributo target="_blank",
você pode expor seu site a problemas de desempenho e segurança:
- A outra página pode ser executada no mesmo processo que a sua. Se a outra página estiver executando muito JavaScript, a performance da sua página poderá ser prejudicada.
- A outra página pode acessar seu objeto
windowcom a propriedadewindow.opener. Isso pode permitir que a outra página redirecione a sua para um URL malicioso.
Adicionar rel="noopener" ou rel="noreferrer" aos links do target="_blank" evita esses problemas.
Como a auditoria de destino cross-origin do Lighthouse falha
O Lighthouse sinaliza links não seguros para destinos entre origens:
O Lighthouse usa o seguinte processo para identificar links como não seguros:
- Reúna todas as tags
<a>que contêm o atributotarget="_blank", mas não os atributosrel="noopener"ourel="noreferrer". - Filtre os links do mesmo host.
Como o Lighthouse filtra links do mesmo host, há um caso extremo que você precisa evitar ao trabalhar em um site grande. Se uma página tiver um link target="_blank" para outra página do seu site sem usar rel="noopener", as implicações de desempenho dessa auditoria ainda serão válidas.
No entanto, esses links não aparecem nos resultados do Lighthouse.
Melhorar o desempenho do site e evitar vulnerabilidades de segurança
Adicione rel="noopener" ou rel="noreferrer"
a cada link identificado no seu relatório do Lighthouse.
Em geral, ao usar target="_blank", sempre adicione rel="noopener" ou rel="noreferrer":
<a href="https://examplepetstore.com" target="_blank" rel="noopener">
Example Pet Store
</a>
rel="noopener"impede que a nova página acesse a propriedadewindow.openere garante que ela seja executada em um processo separado.rel="noreferrer"tem o mesmo efeito e também impede que o cabeçalhoRefererseja enviado para a nova página.
Leia Compartilhar recursos de origens diferentes com segurança para mais informações.