The #ChromeDevSummit site is live, happening Nov 12-13 in San Francisco, CA
Check it out for details and request an invite. We'll be diving deep into modern web tech & looking ahead to the platform's future.

Site abre âncoras externas usando rel="noopener"

Por que a auditoria é importante

Quando sua página é vinculada a outra página usando target="_blank", a nova página é executada no mesmo processo que a sua. Se essa nova página executar JavaScript expansivo, o desempenho da sua página também poderá ser degradado.

Além disso, target="_blank" também é uma vulnerabilidade de segurança. A nova página tem acesso ao seu objeto window via window.opener e pode navegar da sua página para um URL diferente usando window.opener.location = newURL.

Consulte Os benefícios de desempenho de rel=noopener para saber mais.

Como ser aprovado na auditoria

Adicione rel="noopener" em cada link que o Lighthouse identificar em seu relatório. De forma geral, sempre adicione rel="noopener" quando abrir um link externo em uma nova janela ou guia.

<a href="https://examplepetstore.com" target="_blank" rel="noopener">...</a>

Como a auditoria é implementada

Esta seção explica como esta auditoria é implementada para que você possa compreender como a pontuação da auditoria é calculada.

O Lighthouse usa o seguinte algoritmo para sinalizar links como candidatos para rel="noopener" :

  1. Reunir todos os nós <a> que contêm o atributo target="_blank" e que não contêm o atributo rel="noopener".
  2. Remover dos filtros qualquer link que tenha o mesmo host.

Como o Lighthouse remove dos filtros links que têm o mesmo host, há uma exceção que você deve considerar ao trabalhar em um site de grande porte. Se sua página abrir um link para outra seção do seu site sem usar rel="noopener", as implicações de desempenho dessa auditoria ainda serão aplicáveis. Entretanto, você não verá esses links nos resultados do Lighthouse.