Artigo original: How to Use HTML to Open a Link in a New Tab, escrito por Kris Koishigawa

Traduzido e adaptado por: Daniel Rosa

As abas são fantásticas, certo? Elas permitem que o nosso lado multitarefa brinque de fazer várias coisas on-line ao mesmo tempo.

As abas são tão comuns agora que, ao clicar em um link, é bem provável que ele abra em uma nova aba.

Se você já se perguntou como fazer isso com seus próprios links, você está no lugar certo.

O elemento de âncora

Para criar um link em uma página da web, você precisa envolver um elemento (um texto, uma imagem e assim por diante) em um elemento de âncora (<a>) e definir seu atributo href para que aponte para o URL o qual você quer associar.

<p>Confira o <a href="https://www.freecodecamp.org/">freeCodeCamp</a>.</p>

Confira o freeCodeCamp.

Se você clicar no link acima, o navegador abrirá o link na janela ou na aba atual. Esse é o comportamento padrão em todos os navegadores.

Para abrir um link em uma aba nova, precisaremos examinar alguns outros atributos do elemento de âncora.

O atributo target

Este atributo diz ao navegador onde abrir o link.

Para abrir um link em uma nova aba, apenas defina o atributo target como _blank:

<p>Confira o <a href="https://www.freecodecamp.org/" target="_blank">freeCodeCamp</a>.</p>

Agora, quando alguém clicar no link, ele abrirá em uma nova aba ou, possivelmente, em uma nova janela, dependendo das configurações do navegador da pessoa.

Questões de segurança envolvendo o target="_blank"

Eu recomendo fortemente que você sempre adicione rel="noreferrer noopener" ao elemento de âncora sempre que você usar o atributo target:

<p>Confira o <a href="https://www.freecodecamp.org/" target="_blank" rel="noopener noreferrer">freeCodeCamp</a>.</p>

Isso leva ao resultado a seguir:

Confira o freeCodeCamp.

O atributo rel define a relação entre sua página e o URL vinculado. Configurá-lo como noopener noreferrer evita um tipo de phishing conhecido como 'tabnabbing'.

O que é o tabnabbing?

Tabnabbing, algumas vezes chamado de tabnabbing reverso, é uma maneira de explorar o navegador que usa seu comportamento padrão com target="_blank" para ganhar acesso parcial à sua página por meio da API window.object.

Com o tabnabbing, uma página a qual você fez um vínculo pode fazer com que sua página redirecione para uma página de login falsa. Isso seria muito difícil para a maioria dos usuários perceberem, pois o foco estaria na aba que recém abriu – não na aba original com sua página.

Assim, quando uma pessoa retornasse à aba com sua página, ela veria a página de login falsa em vez disso e inseriria seus detalhes de login.

Se estiver interessado em aprender mais sobre como funciona o tabnabbing e sobre o que pessoas mal-intencionadas podem fazer explorando esse recurso, confira o artigo de Alex Yumashev e esse artigo da OWASP.

Se quiser ver um exemplo seguro em funcionamento, confira esta página e este repositório do GitHub para obter mais informações sobre o tabnabbing e o atributo rel.

Em resumo

É fácil usar o HTML para abrir um link em uma nova aba. Você só precisa de um elemento de âncora (<a>) com três atributos importantes:

  1. O atributohref definido como o URL da página à qual você quer fazer a ligação
  2. O atributo target definido como _blank, o que diz ao navegador para abrir o link em uma nova aba/janela, dependendo das configurações do navegador
  3. O atributo rel definido como noreferrer noopener para evitar possíveis ataques maliciosos das páginas as quais você fizer um vínculo

Aqui temos, mais uma vez, um exemplo totalmente funcional:

<p>Confira o <a href="https://www.freecodecamp.org/" target="_blank" rel="noopener noreferrer">freeCodeCamp</a>.</p>

Isso produz o seguinte resultado no navegador:

Confira o freeCodeCamp.

Obrigado, mais uma vez, pela leitura. Feliz programação.