rel=noopener para performance e segurança

O cuidado com a performance da aplicação e a segurança podem ser melhoradas com o uso do rel=noopener. Vamos entender essa propriedade.

O rel=noopener é um simples atributo que se coloca em links externos para obter melhorias em performance e segurança.

Se você tem links para outra site, a recomendação é usar rel="noopener", especialmente se eles abrirem em uma nova janela/aba.

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!

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.

Esses detalhes foram do link do dpw.

Espero que tenha gostado e utilize em seu projetos. Deixe seu aplauso e até o próximo artigo.

--

--

Developer Frontend Web — Javascript | ReactJS https://linktr.ee/douglasabnovato

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store