rel=noopener noreferrer: Prática de segurança para links externos
Muitos usuários do WordPress podem notar trechos de código misteriosos aparecendo em seus links externos ao examinar o HTML do site. O código “rel=”noopener noreferrer”” frequentemente aparece sem nenhuma ação direta do proprietário do site, levantando questões sobre seu propósito e potenciais implicações de SEO.
Essas tags adicionadas automaticamente não são motivo de preocupação da perspectiva de SEO. O WordPress implementa esses atributos em links externos em certas circunstâncias como uma prática padrão. Os mecanismos de busca entendem completamente esses atributos e eles não afetam negativamente como seu site é indexado ou classificado nos resultados de busca.
O que é rel="noopener noreferrer"?
O processo de rel="noopener noreferrer" é um atributo HTML projetado especificamente para links externos em seu site. Este atributo na verdade consiste em dois componentes separados que funcionam independentemente:
- rel="noopener"
- rel="noreferrer"
Esses componentes influenciam como sites externos interagem com seu site, embora cada um tenha uma finalidade distinta.
Ao implementar esse atributo, ele aparece no seu código HTML da seguinte maneira:
<a href="https://externalsite.com" target="_blank" rel="noopener noreferrer">
Verificar se seus links contêm esse código é simples. Você pode abrir seu editor de código do site e use a função “Localizar” do navegador para pesquisar rel="noopener noreferrer", ou visualize qualquer página da web, clique com o botão direito, selecione “Inspecionar” e procure o código no console do desenvolvedor.
O segundo método se mostra particularmente útil para examinar sites que você não possui ou gerencia. Isso permite que desenvolvedores e proprietários de sites verifiquem a implementação adequada de atributos de segurança em links externos em suas páginas da web.
O que é rel="noreferrer"?
O atributo rel=”noreferrer” serve como um mecanismo de privacidade em links HTML, impedindo a transmissão de informações de referência quando os visitantes navegam do seu site para outro. Quando implementado, esse atributo HTML oculta seu site como a fonte de tráfego nas ferramentas de análise do site de destino.
Normalmente, quando alguém clica em um link no seu site, o site de destino pode identificar seu domínio como a fonte de tráfego. Com rel=”noreferrer” adicionado ao seu link, essa identificação é bloqueada. Em vez de aparecer como tráfego de referência em plataformas de análise como o Google Analytics, esses visitantes são registrados como tráfego direto.
O atributo pode ser implementado de duas maneiras:
<a href="https://examplesite.com" target="_blank" rel="noreferrer">
Ou sem abrir em uma nova aba:
<a href="https://examplesite.com" rel="noreferrer">
Essas informações de referência ocultas podem explicar picos misteriosos no tráfego direto que alguns proprietários de sites notam em suas análises.
Quando usar rel=”noreferrer” em links externos
Existem várias razões estratégicas para implementar o atributo rel=”noreferrer” em seus links de saída:
- Links de concorrentes: Ao vincular-se a concorrentes, mas preferindo manter o seu dados de referência investidores privados
- Sites não confiáveis: Ao criar links para sites nos quais você não confia totalmente
- Questões de privacidade:Quando você deseja manter a privacidade do usuário não compartilhando informações sobre a origem do tráfego
Adicionar esse atributo é simples — basta incluir rel="noreferrer" no HTML do seu link, como mostrado acima. Se você já estiver abrindo links externos em novas abas, incorporar esse código requer esforço adicional mínimo.
O que é rel="noopener"?
O atributo rel=”noopener” serve como uma medida de segurança crítica para sites que usam links externos. Este atributo HTML ajuda a proteger seu site de um vetor de ataque sofisticado que tem como alvo usuários por meio de páginas vinculadas. Quando implementado corretamente, ele impede que sites maliciosos tenham acesso à sua página por meio da propriedade JavaScript window.opener.
Protegendo seu site contra Reverse Tabnapping
Reverse tabnapping representa uma ameaça significativa à segurança que ocorre quando links abrem em novas abas. Sem proteção adequada, os invasores podem explorar o relacionamento window.opener para redirecionar sua página original para um site fraudulento projetado para roubar informações.
Este ataque é particularmente perigoso porque os usuários geralmente confiam em páginas que já visitaram. Quando eles retornam ao que acreditam ser seu site legítimo, eles podem, sem saber, fornecer informações confidenciais aos invasores.
Como funciona o ataque:
- O usuário clica em um link externo no seu site que abre em uma nova guia
- O conteúdo da nova aba inclui código malicioso
- Este código usa window.opener para redirecionar sua página original
- Quando os usuários retornam à guia original, eles encontram um site de phishing
Felizmente, adicionar rel=”noopener” a links externos quebra essa conexão, impedindo que a nova página manipule sua página original.
Quando usar rel=”noopener” com links internos
Para links para páginas dentro do seu próprio domínio, rel=”noopener” geralmente é desnecessário. Links internos representam risco mínimo de segurança, já que você controla tanto a página de origem quanto a de destino.
Considerações importantes:
- O WordPress adiciona automaticamente rel=”noopener” aos links externos que abrem em novas abas
- A implementação manual é necessária em plataformas que não sejam WordPress
- O atributo rel=”noreferrer” tem uma finalidade diferente e pode afetar o rastreamento analítico
Lembre-se de que links internos não exigem esses atributos de segurança porque eles navegam dentro do seu ambiente controlado. Concentre-se em aplicar rel=”noopener” a links externos, especialmente aqueles que apontam para sites nos quais você não confia ou controla totalmente.
Usando rel="noopener noreferrer" em WordPress
O WordPress adiciona automaticamente atributos de segurança a links externos quando você os define como abrir em nova abas. Esse comportamento ajuda a proteger seu site enquanto mantém uma boa experiência do usuário. Quando os visitantes clicam nesses links, eles permanecem em seu site enquanto o novo conteúdo carrega separadamente.
A diferença de código é significativa. Um link externo padrão se parece com:
<a href="https://examplesite.com">Example Link</a>
Mas quando você habilita a opção “abrir em nova aba”, o WordPress muda para:
<a href="https://examplesite.com" target="_blank" rel="noopener noreferrer">Example Link</a>
O processo de target="_blank" a instrução abre a nova aba, enquanto a rel atributos fornecem importantes benefícios de segurança. Você pode verificar esses atributos inspecionando qualquer HTML de link externo em suas páginas publicadas.
Você pode removê-lo?
Remover esses atributos é simples se você não se importar com links abrindo na mesma aba. Simplesmente desmarque a opção “abrir em nova aba” no editor do WordPress, e o WordPress gerará um link padrão sem os atributos adicionais.
O Mercado Pago não havia executado campanhas de Performance anteriormente nessas plataformas. Alcançar uma campanha de sucesso exigiria remover apenas parte do código e manter os links abrindo em novas abas é mais desafiador. O WordPress adiciona esses atributos automaticamente por motivos de segurança, sem nenhuma opção integrada.
Você pode tentar remover manualmente o noreferrer parte através do editor de código, o que permitiria que o site de destino visse seu site como o referenciador em suas análises. O processo envolve:
- Abrindo o editor de código do WordPress
- Localizando o link específico HTML
- Editando os atributos diretamente
O processo de noopener atributo, no entanto, é muito mais difícil de remover permanentemente. Mesmo após a exclusão manual, o WordPress normalmente o adiciona novamente quando você publica ou atualiza a página. Essa persistência existe porque noopener fornece proteção crítica contra possíveis explorações de segurança.
Neste caso, o WordPress prioriza a segurança em detrimento da personalização completa.
Para aqueles determinados a modificar esse comportamento, soluções avançadas envolvem código personalizado em seu tema ou plugins especializados, embora essa abordagem não seja recomendada para a maioria dos usuários devido a implicações de segurança.
A maioria dos navegadores agora inclui proteção automática contra Noopener
A partir de 2025, a maioria dos navegadores populares implementaram proteção automática “noopener” para links externos, reduzindo a urgência de implementação manual por desenvolvedores. Essa evolução de segurança começou com o Safari em 2018, estabelecendo um precedente para outros navegadores seguirem.
O Firefox aderiu a essa iniciativa de segurança em julho de 2020, adicionando proteção automática contra potenciais ataques de manipulação de janelas. A mudança mais significativa ocorreu no início de 2021, quando todos os navegadores baseados em Chromium — incluindo Chrome, Edge e Brave — incorporaram esse recurso em seus navegadores padrão. protocolos de segurança.
Linha do tempo do navegador para o Noopener automático:
- Safári: 2018
- Firefox: julho de 2020
- Navegadores Chromium (Chrome, Edge, Brave): Início de 2021
Essa proteção no nível do navegador cria uma rede de segurança importante, impedindo que sites maliciosos manipulem a página original por meio do window.opener propriedade. Apesar deste avanço, os desenvolvedores web devem continuar implementando rel="noopener" manualmente por dois motivos principais:
- Para proteger usuários de navegadores menos comuns
- Para manter práticas de segurança de defesa em profundidade
A pequena porcentagem de usuários da internet em navegadores alternativos permanece vulnerável sem proteção explícita em seu código.
Vamos falar de sucesso 🏆
Ligue hoje para 1800 840 999 para começar.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.