Já ouviu falar do rel=noopener, atributo que se coloca em links externos? Neste artigo, aprenda mais sobre isso e como é possível, com a adição de poucos caracteres, trazer melhorias de desempenho e segurança para seus sites.
Se você tem links para outra site, a recomendação é usar rel="noopener", especialmente se eles abrirem em uma nova janela/aba.
|
1 |
<a href="http://example.com" target="_blank" rel="noopener">Exemplo de link</a> |
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.
Janelas e processos
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!
Conclusão
Para garantir benefícios em performance e segurança, pode haver algo mais simples do que colocar um atributo rel="noopener" em links externos?
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.
A web evolui a cada dia. E de forma surpreendente e emocionante. É bom saber que ainda poderemos presenciar e apreciar muitas melhorias mais.