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 sua página. Se a outra página estiver executando muito JavaScript, o desempenho dela poderá ser afetado.
- A outra página pode acessar seu objeto
window
com a propriedadewindow.opener
. Isso pode permitir que a outra página redirecione sua página para um URL malicioso.
Adicionar rel="noopener"
ou rel="noreferrer"
aos links target="_blank"
evita esses problemas.
Como a auditoria de destino de origem cruzada do Lighthouse falha
O Lighthouse sinaliza links não seguros para destinos de origem cruzada:
![Auditoria do Lighthouse mostrando links não seguros para destinos de origem cruzada](https://developer.chrome.com/static/docs/lighthouse/best-practices/external-anchors-use-rel-noopener/image/lighthouse-audit-showing-b1f47b11d85bc.png?authuser=9&hl=pt)
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 com o mesmo host.
Como o Lighthouse remove os links de um mesmo host,
há um caso extremo que você precisa conhecer caso esteja trabalhando em um site grande:
se uma página tiver um link target="_blank"
para outra no site sem usar rel="noopener"
,
as implicações de desempenho dessa auditoria ainda se aplicarão.
No entanto, você não verá esses links nos resultados do Lighthouse.
Como melhorar o desempenho do seu 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.opener
e garante que ela seja executada em um processo separado.rel="noreferrer"
tem o mesmo efeito, mas também impede que o cabeçalhoReferer
seja enviado para a nova página. Consulte Tipo de link "noreferrer".
Consulte a postagem Compartilhar recursos de origem cruzada com segurança para saber mais.