Lorival Smolski Chapuis
3 min read   Nov 20, 2018 vulnerability security html Life Code

Avoid or protect the use of target='_blank' in your links. Vulnerability on the way!

Ainda é comum ser usado o atributo target=”_BLANK” em um link com o objetivo de abrir ele em uma nova aba no navegador, gerando uma vulnerabilidade. Mas e se precisamos deste atributo, como usá-lo de forma segura? Vamos falar de rel=“noopener” e rel=“noreferrer”.

Existe um comportamento bem curioso quando usamos target=”_BLANK” em links, basicamente o link que abriu consegue ter acesso ao window.opener.location, ou seja, permite alterar a url de quem chamou ele.

Vamos ver uma aplicação simples desta vulnerabilidade, clique aqui para abrir uma nova aba. Fique tranquilo, vamos fazer um teste controlado, você não vai ter problemas. Dê uma olhada no código fonte da página que abrir e volte aqui. 😆

O que achou do resultado? Um site malicioso poderia substituir o site original por um falso, solicitando as credenciais novamente, por exemplo. Isto apenas porque usou o target=”_BLANK”.

O principal motivo para usarmos esta abordagem é porque não queremos que os clientes de nosso site saiam dele. Na prática a maioria das pessoas já usam o ctrl ou o botão do meio no mouse para abrir um link em uma nova aba, mas como desenvolvedores ou UX designers queremos dar uma “melhor experiência” para nossos clientes.

Se for explorar os motivos, cada um pode citar diferente, mas partindo do princípio que é necessário abrir em uma nova aba, como fazer isto de maneira segura?

Clique neste link, ele irá abrir a mesma página anterior em uma nova aba. Agora o comportamento será diferente pois está usando o rel=“noopener”, nada irá acontecer nesta página aqui depois de clicar no link e retornar para cá.

Ao abrir um link externo você diz para ele quem é você, desta forma ele consegue mapear aqueles que “apontam” para ele e vir até a origem. Assim alguém poderia fazer uma página maliciosa com algum conteúdo que todos queiram fazer um link (memes por exemplo), depois procurar todos que a referenciaram e fazer a injeção que desejar. Para evitar que um link externo saiba a origem, basta usar a tag rel=“noreferrer”.

Resumo da obra, precisa abrir um link externo ao seu site em uma nova aba de forma segura? Faça da seguinte forma:

< a href=“url” target=”_BLANK” rel=“noopener noreferrer”> link externo < /a >

Isto não impacta diretamente o SEO do site, então pode ser adotado como medida de segurança sem efeitos colaterais. Quando puder evitar abrir um link externo em uma nova aba, prefira esta abordagem.

Mais seguro do que colocar grades em uma janela, é não ter a janela. Mas se realmente precisas de uma janela, não esqueça das grades. 😎

Lorival S. Chapuis
Written by:

Lorival S. Chapuis

Software engineer focused on scalability, sometimes a gamer, computer intelligence enthusiast, and passionate about my family and software development.