4

Recentemente notei que o a propriedade rel do link pode receber o tributo noopener, mas não entendi direito as vantagens de usa-lo...

<a href="http://example.com" target="_blank" rel="noopener">Exemplo de link</a>

Seria uma boa prática incluir esse rel="noopener" em todos os links do meu site?

Ele pode ter algum efeito colateral indesejado para o SEO?

7
  • se até o @hugocsl toma um -1, isso me acalma hehehehe, ocara já respondeu
    – Ricardo
    Commented 24/12/2018 às 18:31
  • @Ricardo o engraçado eh que tem 3 dias a pergunta, ai quando alguém tem a boa vontade de colaborar com algum conteúdo alguém vai e me da um negativo rss. Vai entender...
    – hugocsl
    Commented 24/12/2018 às 22:54
  • Puro recalque! Kkkk! Não imaginava que poderia usar o window.opener dessa forma!
    – LipESprY
    Commented 25/12/2018 às 1:53
  • 1
    Se afeta o rankeamento e quanto ninguém sabe né, mas no lighthouse (web.dev) links externos com _blank tiram pontos em boas práticas e sugere noopener como solução.
    – gustavox
    Commented 16/05/2019 às 1:06
  • 1
    @gustavox o Lighthouse realmente eh uma ferramenta fantástica eh não só para SEO, mas para acessibilidade e performance tbm. Valeu a dica!
    – hugocsl
    Commented 16/05/2019 às 10:50

1 Resposta 1

2

Sem isso, a nova página pode acessar seu objeto de janela via window.opener. Felizmente, o modelo de segurança de origem da web impede que ele leia sua página; infelizmente, para algumas API legadas significa que é possível navegar na página para um URL diferente usando window.opener.location = newURL.

A maioria dos navegadores é multiprocesso — com a exceção do Firefox, mas eles estão trabalhando nisso. Cada processo possui várias threads, incluindo o que frequentemente é chamado de “a thread principal”. É aí que a análise, o cálculo do estilo, o layout, o painting de CSS e o JavaScript (não-worker) são executados. Isso significa que JavaScript executado em um domínio é executado em uma thread diferente para uma janela/guia acessando outro domínio.

No entanto, devido ao acesso síncrono cross-window que o DOM provê via window.opener, janelas executadas via target="_blank" acabam no mesmo processo e thread — e o mesmo é verdadeiro para iframes e janelas abertas via window.open.

rel="noopener" impede window.opener, portanto não há acesso cross-window. Navegadores Chromium são otimizados para isso e abrem a nova página em seu próprio processo.

Em outras palavras, ao usar rel="noopener" em links externos, especifica-se que o acesso deve ser feito em outro processo, trazendo benefícios nas áreas de segurança e performance!

Por enquanto, ainda não é algo suportado em absolutamente todos os navegadores, mas a ideia é que estes benefícios sejam logo vistos pelos vendors e que seus produtos estejam preparados para o noopener o quanto antes isso acontecer. Também, é possível que no futuro existam maneiras mais práticas de, por exemplo, especificar que todos os links devam obedecer esta feature sem a necessidade de especificar link a link.

Fonte: https://desenvolvimentoparaweb.com/miscelanea/relnoopener-performance-seguranca/

2
  • 4
    Amigo quando vc copiar textos completos de outros lugares ou mesmo que sejam partes de um texto que não eh seu vc deveria no mínimo citar a fonte ou o autor original ok. Abs boas festas
    – hugocsl
    Commented 24/12/2018 às 23:12
  • @hugocsl Obrigado, fonte mencionada. Commented 24/12/2018 às 23:43

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .