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 um elemento anchor ( ) e definir seu hrefatributo para a URL que deseja vincular.

Check out freeCodeCamp.

Confira 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 targetatributo para _blank:

Check out freeCodeCamp.

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 usar o targetatributo:

Check out freeCodeCamp.

Isso resulta na seguinte saída:

Confira freeCodeCamp.

O relatributo define a relação entre sua página e o URL vinculado. Definir como noopener noreferrerevita um tipo de phishing conhecido como tabnabbing.

O que é tabnabbing?

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

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 ser aberta - 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, confira o artigo de Alex Yumashev e este da OWASP.

Se você gostaria de ver um cofrePor exemplo, verifique esta página e seu repositório GitHub para obter mais informações sobre o exploit e o relatributo.

Em suma

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

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

Novamente, aqui está o exemplo funcional de HTML:

Check out freeCodeCamp.

O que resulta na seguinte saída no navegador:

Confira freeCodeCamp.

Obrigado novamente por ler. Boa codificação.