Como usar HTML para abrir um link em uma nova guia

As guias são ótimas, não são? Eles permitem que o multitarefa em todos nós faça malabarismos com um monte de tarefas online ao mesmo tempo.

As guias são tão comuns agora que, ao clicar em um link, é provável que ele seja aberto em uma nova guia.

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

O Elemento Âncora

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

<p>Check out <a href="https://www.freecodecamp.org/">freeCodeCamp</a>.</p>

Verificação de saída freeCodeCamp.

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

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

O Atributo de Destino

Este atributo informa ao navegador como abrir o link.

Para abrir um link em uma nova guia, basta definir o target atribuir a _blank:

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

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

Preocupações de segurança com target="_blank"

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

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

Isso resulta na seguinte saída:

Verificação de saída freeCodeCamp.

o rel atributo define a relação entre sua página e o URL vinculado. Configurando para noopener noreferrer é evitar um tipo de phishing conhecido como tababismo.

O que é tabnabbing?

Tabnabbing, às vezes chamado de tabnabbing reverso, é um exploit que usa o comportamento padrão do navegador com target="_blank" para obter acesso parcial à sua página por meio do window.object API.

Com o tabnabbing, uma página para a qual você cria um link pode fazer com que sua página redirecione para uma página de login falsa. Isso seria difícil para a maioria dos usuários perceber porque o foco estaria na guia que acabou de abrir – não na guia original com sua página.

Então, quando uma pessoa voltar para a guia com sua página, ela verá a página de login falsa e poderá inserir seus detalhes de login.

Se você estiver interessado em aprender mais sobre como o tabnabbing funciona e o que os malfeitores podem fazer com o exploit, dê uma olhada Artigo de Alex Yumashev e este por OWASP.

Se você gostaria de ver um seguro exemplo de trabalho, verifique este página e os seus Repositório GitHub para obter mais informações sobre o exploit e o rel atributo.

Em suma

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

1. o href atributo definido para o URL da página que você deseja vincular
2. o target atributo definido para _blank, que informa ao navegador para abrir o link em uma nova guia / janela, dependendo das configurações do navegador
3. o rel atributo definido para noreferrer noopener para evitar possíveis ataques maliciosos das páginas que você vincula

Novamente, aqui está o exemplo funcional de HTML:

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

O que resulta na seguinte saída no navegador:

Verificação de saída freeCodeCamp.

Obrigado novamente por ler. Boa codificação.