{"id":33714,"date":"2022-10-01T09:29:13","date_gmt":"2022-10-01T12:29:13","guid":{"rendered":"https:\/\/dannybia.com\/blog\/?p=33714"},"modified":"2025-10-23T11:47:33","modified_gmt":"2025-10-23T14:47:33","slug":"explicando-follow-noreferrer-e-noopener","status":"publish","type":"post","link":"https:\/\/dannybia.com\/blog\/explicando-follow-noreferrer-e-noopener\/","title":{"rendered":"Explicando: follow, noreferrer e noopener"},"content":{"rendered":"<h1>Explicando: follow, noreferrer, noopener e external<\/h1>\n<p align=\"justify\">Este artigo explica o que s\u00e3o rel = \u201dnoopener noreferrer nofollow\u201d, seu uso e implica\u00e7\u00f5es de seguran\u00e7a e otimiza\u00e7\u00e3o de mecanismo de pesquisa (SEO).<\/p>\n<p align=\"justify\">Se voc\u00ea est\u00e1 envolvido em desenvolvimento web ou otimiza\u00e7\u00e3o de mecanismo de pesquisa (SEO), \u00e9 prov\u00e1vel que tenha trope\u00e7ado nos termos noopener, noreferrer e nofollow. O que \u00e9 noopener noreferrer? Que tal nofollow? Neste post, estamos explicando todos eles e suas implica\u00e7\u00f5es em SEO e seguran\u00e7a na web.<\/p>\n<h2>Introdu\u00e7\u00e3o<\/h2>\n<p align=\"justify\">Todos os tr\u00eas termos (noopener, noreferrer e nofollow) s\u00e3o valores do atributo rel da tag \u00e2ncora em HTML. Indiscutivelmente, nofollow \u00e9 o mais conhecido entre os desenvolvedores web e SEO <code>experts<\/code>.<\/p>\n<p align=\"justify\">Anchor <code>&lt;a&gt;<\/code> tag \u00e2ncora \u00e9 comumente usada em HTML para definir um URL\/link.<\/p>\n<p align=\"justify\">Por exemplo: Considere a seguinte linha de c\u00f3digo.<\/p>\n<p><span class=\"green\"><code>&lt;a<\/code><\/span> <span class=\"blue\">href<\/span>=&#8221;https:\/\/www.dannybia.com&#8221;<code>&gt;<\/code><br \/>\nClique aqui para visitar o site <a href=\"https:\/\/dannybia.com\/\">Danny&#8217;a Home Page<\/a>.<br \/>\n<span class=\"green\"><code>&lt;\/a&gt;<\/code><\/span><br \/>\nExemplo detalhado hospedado por GitHub (<a href=\"https:\/\/github.com\/\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/<\/a>)<\/p>\n<p align=\"justify\">Voc\u00ea pode ver que h\u00e1 um atributo href (href vindo do Hypertext REFerence) que \u00e9 usado e que o valor desse atributo \u00e9 o endere\u00e7o da web da p\u00e1gina inicial da Danny&#8217;s Home Page. O que se segue \u00e9 o texto que \u00e9 exibido para voc\u00ea como um usu\u00e1rio. Dependendo do seu CSS e navegador, este texto pode ser sublinhado, colorido de forma diferente ou ambos.<\/p>\n<p align=\"justify\">O tag \u00e2ncora pode ter muitos atributos diferentes &#8211; um deles sendo rel (rel vindo de RELationship [RELacionamento]). O t\u00f3pico principal desta postagem do blog \u00e9 sobre noopener, noreferrer e nofollow &#8211; todos os tr\u00eas sendo os valores do atributo rel.<\/p>\n<p align=\"justify\">Novamente, considere a seguinte linha de c\u00f3digo.<\/p>\n<p><span class=\"green\"><code>&lt;a<\/code><\/span> <span class=\"blue\">href<\/span>=&#8221;https:\/\/www.dannybia.com\/&#8221;<code>&gt;<\/code><br \/>\nrel=&#8221;noopener noreferrer nofollow&#8221;<br \/>\ntarget=&#8221;_blank&#8221;<code>&gt;<\/code>Clique aqui para visitar o site <a href=\"https:\/\/dannybia.com\/\" target=\"_blank\" rel=\"noopener\">Danny&#8217;a Home Page<\/a>.<br \/>\n<span class=\"green\"><code>&lt;\/a&gt;<\/code><\/span><br \/>\nExemplo detalhado hospedado por GitHub (<a href=\"https:\/\/github.com\/\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/<\/a>)<\/p>\n<p align=\"justify\">Voc\u00ea pode notar rapidamente tr\u00eas valores do relatributo. Mas agora voc\u00ea tamb\u00e9m pode ver o atributo target com o valor <code>target=\"_blank\"<\/code>. Esta parte do c\u00f3digo instrui o navegador da web a abrir esse link em uma nova guia.<\/p>\n<p align=\"justify\">E esta \u00e9 a principal raz\u00e3o pela qual os valores gostam <code>noopener<\/code> e <code>noreferrer<\/code> s\u00e3o usados. \u00c9 tamb\u00e9m a causa raiz de poss\u00edveis desafios de seguran\u00e7a e phishing.<\/p>\n<p align=\"justify\">Vamos discuti-los em mais detalhes e sua import\u00e2ncia para SEO e seguran\u00e7a e quando voc\u00ea deve adicionar <code>rel<\/code>, adicionar <code>nofollow<\/code> e qual \u00e9 a import\u00e2ncia de adicionar <code>rel noopener<\/code>.<\/p>\n<h2>O que \u00e9 noopener?<\/h2>\n<p align=\"justify\">Quando voc\u00ea est\u00e1 usando o valor <code>target=\"_blank\"<\/code>, algo interessante acontece. A p\u00e1gina para a qual voc\u00ea est\u00e1 criando um link obt\u00e9m acesso parcial \u00e0 p\u00e1gina do link. Isso \u00e9 feito por meio do objeto <code>window.opener<\/code>.<\/p>\n<p align=\"justify\">Em seguida, a p\u00e1gina de link pode ser usada <code>window.opener.location<\/code> para abrir o site malicioso.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-33715 aligncenter\" src=\"https:\/\/dannybia.com\/blog\/wp-content\/uploads\/2025\/10\/ataque-hackers.jpg\" alt=\"usar target _blank pode levar a problemas de seguran\u00e7a\" width=\"1000\" height=\"546\" srcset=\"https:\/\/dannybia.com\/blog\/wp-content\/uploads\/2025\/10\/ataque-hackers.jpg 560w, https:\/\/dannybia.com\/blog\/wp-content\/uploads\/2025\/10\/ataque-hackers-768x419.jpg 768w, https:\/\/dannybia.com\/blog\/wp-content\/uploads\/2025\/10\/ataque-hackers-100x54.jpg 100w, https:\/\/dannybia.com\/blog\/wp-content\/uploads\/2025\/10\/ataque-hackers-230x125.jpg 230w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/p>\n<p align=\"center\">Usar target _blank pode levar a problemas de seguran\u00e7a.<\/p>\n<p align=\"justify\">Isso pode ser explorado para ataques de phishing. Considere o seguinte cen\u00e1rio.<\/p>\n<p align=\"justify\">Voc\u00ea cria um site malicioso e coloca conte\u00fado viral nele. Em seguida, voc\u00ea compartilha este site nas redes sociais ou outras fontes que abrem links externos usando o <code>target=\"_blank\"<\/code>. O Facebook \u00e9 o principal exemplo aqui.<\/p>\n<p align=\"justify\">O usu\u00e1rio desavisado clica no link e sua p\u00e1gina da web \u00e9 aberta em uma nova guia. Nesse momento, seu site malicioso agora tem o controle da guia anterior (\u201cFacebook\u201d). Usando o <code>window.opener.location<\/code> e navega para o novo site &#8211; digamos, um formul\u00e1rio de login emulando a tela de login do Facebook com uma mensagem: \u201cSua sess\u00e3o anterior do Facebook expirou. Fa\u00e7a login novamente para continuar usando o Facebook \u201d.<\/p>\n<p align=\"justify\">Agora, o usu\u00e1rio \u00e9 induzido a inserir suas informa\u00e7\u00f5es de login e \u00e9 v\u00edtima de um ataque de phishing.<\/p>\n<p align=\"justify\">Este \u00e9 apenas um caso hipot\u00e9tico, j\u00e1 que o Facebook est\u00e1 usando o <code>rel=\"noopener\"<\/code> em seus links <code>target=\"_blank\"<\/code>. Acredito que consegiu entender.<\/p>\n<h3>Mais alguns detalhes<\/h3>\n<p align=\"justify\">O uso de <code>noopener<\/code> efetivamente informa ao navegador para abrir um link em uma nova guia sem fornecer o acesso de contexto \u00e0 p\u00e1gina da web que abriu o link. Isso \u00e9 obtido ao n\u00e3o definir a propriedade <code> window.opener<\/code>, retornando assim um valor nulo.<\/p>\n<p align=\"justify\">Instrui o navegador a abrir o link sem conceder acesso ao novo contexto de navega\u00e7\u00e3o ao documento que o abriu &#8211; n\u00e3o definindo window.opener na janela aberta (ele retorna <code>null<\/code>).<\/p>\n<p align=\"justify\">Dessa forma, o atributo <code>rel= \"noopener\"<\/code> e o valor n\u00e3o afetam a otimiza\u00e7\u00e3o do mecanismo de pesquisa (SEO) de forma alguma. \u00c9 independente de SEO. Mas deve ser usado nos casos em que voc\u00ea estiver lidando com links com a target blank.<\/p>\n<h2>O que \u00e9 noreferrer?<\/h2>\n<p align=\"justify\">Semelhante em sua fun\u00e7\u00e3o a <code>noreferrer<\/code>, <code>noreferrer<\/code> tamb\u00e9m evita que o site rec\u00e9m-aberto manipule o objeto <code>window.opener<\/code>. Mas, al\u00e9m disso, <code>noreferrer<\/code> evita que o navegador, ao navegar para outra p\u00e1gina, envie o endere\u00e7o da p\u00e1gina de refer\u00eancia.<\/p>\n<p align=\"justify\">Simplificando, o valor <code>noreferrer<\/code> ocultar\u00e1 as informa\u00e7\u00f5es do referenciador quando o link for clicado. Por exemplo, se algu\u00e9m postar seu link em sua p\u00e1gina da Web e usar o <code>noreferrer<\/code>, e em seguida, os usu\u00e1rios clicarem nesse link, voc\u00ea n\u00e3o ser\u00e1 capaz de dizer de onde esses usu\u00e1rios v\u00eam. Em seu software de an\u00e1lise (digamos, Google Analytics), isso aparecer\u00e1 como tr\u00e1fego direto, n\u00e3o como uma refer\u00eancia.<\/p>\n<p align=\"justify\">Novamente, <code>noreferrer<\/code> tamb\u00e9m n\u00e3o tem efeito sobre o SEO, mas pode distorcer os n\u00fameros em seu software de an\u00e1lise e rastreamento, relatando tr\u00e1fego mais direto.<\/p>\n<p align=\"justify\">tamb\u00e9m algumas considera\u00e7\u00f5es a respeito do marketing de afiliados <code>noreferrer<\/code>, mas est\u00e3o fora do escopo deste artigo. Em geral, os links de afiliados e programas de afiliados agora usam abordagens e t\u00e9cnicas que n\u00e3o dependem do valor <code>noreferrer<\/code>.<\/p>\n<p align=\"justify\">Ent\u00e3o, quando voc\u00ea deve usar <code>noreferrer<\/code> e quando <code>noopener<\/code>? Eu sugiro que voc\u00ea considere usar ambos. A maioria do suporte do navegador moderno <code>noopener<\/code>, mas em alguns casos, se <code>noopener<\/code> n\u00e3o for compat\u00edvel, voc\u00ea pode usar <code>noreferrer<\/code>.<\/p>\n<p align=\"justify\">Isso significa que, em termos pr\u00e1ticos, faz sentido usar os dois para oferecer suporte a navegadores mais antigos. Mas a melhor abordagem seria evitar o uso do <code>target=\"_blank\"<\/code>. A menos que voc\u00ea tenha um excelente motivo para us\u00e1-lo.<\/p>\n<h2>O que \u00e9 nofollow?<\/h2>\n<p align=\"justify\">Na otimiza\u00e7\u00e3o de mecanismos de pesquisa, \u00e9 crucial obter muitos links valiosos e de qualidade com links para sua p\u00e1gina. Esses s\u00e3o chamados de backlinks. Mas nem todos os links s\u00e3o criados iguais.<\/p>\n<p align=\"justify\">Em geral, quando uma p\u00e1gina est\u00e1 criando um link para a sua &#8211; est\u00e1 passando seu link &#8211; ou seja &#8211; d\u00e1 mais credibilidade ao seu site e sinaliza para os mecanismos de pesquisa que eles valorizam o seu site. Em ess\u00eancia, voc\u00ea pode considerar isso como um endosso. Se uma p\u00e1gina da Web de alta autoridade tem um link para voc\u00ea &#8211; ela o est\u00e1 endossando, e o Google\/Bing vai considerar isso um fator de classifica\u00e7\u00e3o. O Google usa o termo PageRank como uma medida de quantidade e qualidade de links.<\/p>\n<p align=\"justify\">No entanto, \u00e0s vezes voc\u00ea n\u00e3o quer passar o suco do link. Esse pode ser o caso ao vincular suas p\u00e1ginas internamente &#8211; por exemplo &#8211; voc\u00ea pode n\u00e3o querer passar seu suco de link de p\u00e1ginas mais valiosas para aquelas que n\u00e3o s\u00e3o t\u00e3o importantes.<\/p>\n<p align=\"justify\">Entre Entre <code>rel=\"nofollow\"<\/code>. Assim como seus primos <code>noopener noreferrer<\/code>, <code>nofollow<\/code> \u00e9 um valor do atributo rel. Ao adicionar esse valor, ele sinalizar\u00e1 aos mecanismos de pesquisa que voc\u00ea n\u00e3o deseja passar seu link juice\/PageRank para a p\u00e1gina para a qual est\u00e1 vinculando.<\/p>\n<p><span class=\"green\"><code>&lt;a<\/code><\/span> <span class=\"blue\">href<\/span>=&#8221;https:\/\/www.dannybia.com\/&#8221;<code>&gt;<\/code><br \/>\nrel=&#8221;noopener noreferrer nofollow&#8221;<br \/>\ntarget=&#8221;_blank&#8221;<code>&gt;<\/code>Clique aqui para visitar o site <a href=\"https:\/\/dannybia.com\/\" target=\"_blank\" rel=\"noopener\">Danny&#8217;a Home Page<\/a>.<br \/>\n<span class=\"green\"><code>&lt;\/a&gt;<\/code><\/span><\/p>\n<p align=\"justify\">Exemplo detalhado hospedado por GitHub (<a href=\"https:\/\/github.com\/\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/<\/a>)<\/p>\n<p align=\"justify\">Na linha de c\u00f3digo acima, colocamos todos os tr\u00eas valores &#8211; ao adicionar o valor <code>nofollow<\/code>, estamos sinalizando ao Google que o PageRank\/link juice n\u00e3o \u00e9 passado para o site <a href=\"https:\/\/dannybia.com\/\" target=\"_blank\" rel=\"noopener\">https:\/\/www.dannybia.com\/<\/a>.<\/p>\n<h3>Quando voc\u00ea deve usar o nofollow?<\/h3>\n<p align=\"justify\">A regra geral \u00e9 usar nofollow links em coment\u00e1rios ou f\u00f3runs. O conte\u00fado gerado pelo usu\u00e1rio pode ser uma fonte de spam e links de baixa qualidade. Voc\u00ea n\u00e3o quer que seu blog ou site de f\u00f3rum passe seu valor para essas p\u00e1ginas de baixa qualidade.<\/p>\n<p align=\"justify\">Al\u00e9m disso, o Google e outros mecanismos de pesquisa exigem que voc\u00ea use <code>nofollow<\/code> em todos os links e an\u00fancios patrocinados. O mesmo vale para links em comunicados \u00e0 imprensa e diferentes tipos de links pagos.<\/p>\n<h2>Um pouco sobre a terminologia &#8211; noopener noreferrer nofollow<\/h2>\n<p align=\"justify\">\u00c0s vezes, voc\u00ea notar\u00e1 que as pessoas est\u00e3o mencionando a tag <code>noopener<\/code> ou <code>noreferrer<\/code>. Em outros casos, voc\u00ea pode identificar o atributo <code>rel noreferrer<\/code>. Embora sejam compreens\u00edveis para a maioria dos desenvolvedores da Web, vale a pena observar o seguinte.<\/p>\n<ul>\n<li><code>noopener<\/code>, <code>noreferrer<\/code>, e <code>nofollow<\/code> n\u00e3o s\u00e3o tags ou atributos. Eles s\u00e3o valores de atributos.<\/li>\n<li><code>rel<\/code> n\u00e3o \u00e9 uma tag. \u00c9 um atributo da tag \u00e2ncora.<\/li>\n<li><code>&lt;a&gt;<\/code> Como tal, tem atributos (i.e., <code>rel<\/code>), e esses atributos t\u00eam valores (<code>noopener noreferrer nofollow<\/code>)<\/li>\n<\/ul>\n<h2>Conclus\u00e3o<\/h2>\n<p align=\"justify\">Existem tr\u00eas valores fundamentais do relatributo da tag \u00e2ncora. Eles s\u00e3o <code>noreferrer<\/code>, <code>noopener<\/code>, e <code>nofollow<\/code>.<\/p>\n<ul>\n<li><code>rel=\"noopener\"<\/code> voc\u00ea usa em todos os links que abrem em novas guias usando o <code>target _blank<\/code>. Haver\u00e1 implica\u00e7\u00f5es de seguran\u00e7a se voc\u00ea n\u00e3o usar o valor <code>noopener<\/code> nos links que abrem em novas guias. Um invasor mal-intencionado pode usar o objeto <code>window.opener<\/code> para alterar o conte\u00fado e a localiza\u00e7\u00e3o da p\u00e1gina de origem.<\/li>\n<li><code>rel=\"noreferrer\"<\/code> pode servir a um prop\u00f3sito semelhante ao <code>noopener<\/code>, especialmente nos navegadores mais antigos. Portanto, faz sentido usar os dois. Al\u00e9m disso, <code>noreferrer<\/code> pode afetar suas an\u00e1lises e relatar o tr\u00e1fego como direto em vez de refer\u00eancia.<\/li>\n<li><code>rel=\"nofollow\"<\/code> informar\u00e1 aos mecanismos de pesquisa para n\u00e3o passar o link juice para a p\u00e1gina vinculada e n\u00e3o passar\u00e1 no PageRank. Voc\u00ea pode consider\u00e1-lo como um valor que \u00e9 usado quando voc\u00ea deseja criar um link para outra p\u00e1gina, mas sem \u201cendoss\u00e1-lo\u201d. \u00c9 o \u00fanico valor <code>rel<\/code> nesta lista com um efeito tang\u00edvel nos esfor\u00e7os de SEO.<\/li>\n<\/ul>\n<div class='grid-row clearfix'><div class='grid-col grid-col-12'><section class='cws-widget'><section class='cws_widget_content'>\n\t<div class=\"testimonial \">\n\t\t<div class='clearfix'>\n\t\t\t<img src='https:\/\/dannybia.com\/blog\/wp-content\/uploads\/bfi_thumb\/Jesus-130-93-3cmh6ny6pugic3cykq7hts.jpg' alt \/>\t\t\t\t<p>\n<p align=\"justify\">O Senhor \u00e9 tamb\u00e9m um alto ref\u00fagio para o oprimido, um alto ref\u00fagio em tempos de ang\u00fastia. Em ti confiam os que conhecem o teu nome; porque tu, Senhor, n\u00e3o abandonas aqueles que te buscam. Cantai louvores ao Senhor, que habita em Si\u00e3o; anunciai entre os povos os seus feitos. Pois ele, o vingador do sangue, se lembra deles; n\u00e3o se esquece do clamor dos aflitos.<\/p>\n<\/p>\t\t<\/div>\n\t\t<div class=\"author\">Salmos 9:9-12<\/div>\t<\/div>\n\t <\/section><\/section><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Explicando: follow, noreferrer, noopener e external Este artigo explica o que s\u00e3o rel = \u201dnoopener noreferrer nofollow\u201d, seu uso e implica\u00e7\u00f5es de seguran\u00e7a e otimiza\u00e7\u00e3o de mecanismo de pesquisa (SEO). Se voc\u00ea est\u00e1 envolvido em desenvolvimento web ou otimiza\u00e7\u00e3o de mecanismo de pesquisa (SEO), \u00e9 prov\u00e1vel que tenha trope\u00e7ado nos termos noopener, noreferrer e nofollow. O que \u00e9 noopener noreferrer? Que tal nofollow? Neste post, estamos explicando todos eles e suas implica\u00e7\u00f5es em SEO e seguran\u00e7a na web. Introdu\u00e7\u00e3o Todos os tr\u00eas termos (noopener, noreferrer e nofollow) s\u00e3o valores do atributo rel da tag \u00e2ncora em HTML. Indiscutivelmente, nofollow \u00e9 o mais conhecido entre os desenvolvedores web e SEO experts. Anchor &lt;a&gt; tag \u00e2ncora \u00e9 comumente usada em HTML para definir um URL\/link. Por exemplo: Considere a seguinte linha de c\u00f3digo. &lt;a href=&#8221;https:\/\/www.dannybia.com&#8221;&gt; Clique aqui para visitar o site Danny&#8217;a Home Page. &lt;\/a&gt; Exemplo detalhado hospedado por GitHub (https:\/\/github.com\/) Voc\u00ea pode ver que h\u00e1 um atributo href (href vindo do Hypertext REFerence) que \u00e9 usado e que o valor desse atributo \u00e9 o endere\u00e7o da web da p\u00e1gina inicial da Danny&#8217;s Home Page. O que se segue \u00e9 o texto que \u00e9 exibido para voc\u00ea como um usu\u00e1rio. Dependendo do seu CSS e navegador, este texto pode ser sublinhado, colorido de forma diferente ou ambos. O tag \u00e2ncora pode ter muitos atributos diferentes &#8211; um deles sendo rel (rel vindo de RELationship [RELacionamento]). O t\u00f3pico principal desta postagem do blog \u00e9 sobre noopener, noreferrer e nofollow &#8211; todos os tr\u00eas sendo os valores do atributo rel. Novamente, considere a seguinte linha de c\u00f3digo. &lt;a href=&#8221;https:\/\/www.dannybia.com\/&#8221;&gt; rel=&#8221;noopener noreferrer nofollow&#8221; target=&#8221;_blank&#8221;&gt;Clique aqui para visitar o site Danny&#8217;a Home Page. &lt;\/a&gt; Exemplo detalhado hospedado por GitHub (https:\/\/github.com\/) Voc\u00ea pode notar rapidamente tr\u00eas valores do relatributo. Mas agora voc\u00ea tamb\u00e9m pode ver o atributo target com o valor target=&#8221;_blank&#8221;. Esta parte do c\u00f3digo instrui o navegador da web a abrir esse link em uma nova guia. E esta \u00e9 a principal raz\u00e3o pela qual os valores gostam noopener e noreferrer s\u00e3o usados. \u00c9 tamb\u00e9m a causa raiz de poss\u00edveis desafios de seguran\u00e7a e phishing. Vamos discuti-los em mais detalhes e sua import\u00e2ncia para SEO e seguran\u00e7a e quando voc\u00ea deve adicionar rel, adicionar nofollow e qual \u00e9 a import\u00e2ncia de adicionar rel noopener. O que \u00e9 noopener? Quando voc\u00ea est\u00e1 usando o valor target=&#8221;_blank&#8221;, algo interessante acontece. A p\u00e1gina para a qual voc\u00ea est\u00e1 criando um link obt\u00e9m acesso parcial \u00e0 p\u00e1gina do link. Isso \u00e9 feito por meio do objeto window.opener. Em seguida, a p\u00e1gina de link pode ser usada window.opener.location para abrir o site malicioso. Usar target _blank pode levar a problemas de seguran\u00e7a. Isso pode ser explorado para ataques de phishing. Considere o seguinte cen\u00e1rio. Voc\u00ea cria um site malicioso e coloca conte\u00fado viral nele. Em seguida, voc\u00ea compartilha este site nas redes sociais ou outras fontes que abrem links externos usando o target=&#8221;_blank&#8221;. O Facebook \u00e9 o principal exemplo aqui. O usu\u00e1rio desavisado clica no link e sua p\u00e1gina da web \u00e9 aberta em uma nova guia. Nesse momento, seu site malicioso agora tem o controle da guia anterior (\u201cFacebook\u201d). Usando o window.opener.location e navega para o novo site &#8211; digamos, um formul\u00e1rio de login emulando a tela de login do Facebook com uma mensagem: \u201cSua sess\u00e3o anterior do Facebook expirou. Fa\u00e7a login novamente para continuar usando o Facebook \u201d. Agora, o usu\u00e1rio \u00e9 induzido a inserir suas informa\u00e7\u00f5es de login e \u00e9 v\u00edtima de um ataque de phishing. Este \u00e9 apenas um caso hipot\u00e9tico, j\u00e1 que o Facebook est\u00e1 usando o rel=&#8221;noopener&#8221; em seus links target=&#8221;_blank&#8221;. Acredito que consegiu entender. Mais alguns detalhes O uso de noopener efetivamente informa ao navegador para abrir um link em uma nova guia sem fornecer o acesso de contexto \u00e0 p\u00e1gina da web que abriu o link. Isso \u00e9 obtido ao n\u00e3o definir a propriedade window.opener, retornando assim um valor nulo. Instrui o navegador a abrir o link sem conceder acesso ao novo contexto de navega\u00e7\u00e3o ao documento que o abriu &#8211; n\u00e3o definindo window.opener na janela aberta (ele retorna null). Dessa forma, o atributo rel= &#8220;noopener&#8221; e o valor n\u00e3o afetam a otimiza\u00e7\u00e3o do mecanismo de pesquisa (SEO) de forma alguma. \u00c9 independente de SEO. Mas deve ser usado nos casos em que voc\u00ea estiver lidando com links com a target blank. O que \u00e9 noreferrer? Semelhante em sua fun\u00e7\u00e3o a noreferrer, noreferrer tamb\u00e9m evita que o site rec\u00e9m-aberto manipule o objeto window.opener. Mas, al\u00e9m disso, noreferrer evita que o navegador, ao navegar para outra p\u00e1gina, envie o endere\u00e7o da p\u00e1gina de refer\u00eancia. Simplificando, o valor noreferrer ocultar\u00e1 as informa\u00e7\u00f5es do referenciador quando o link for clicado. Por exemplo, se algu\u00e9m postar seu link em sua p\u00e1gina da Web e usar o noreferrer, e em seguida, os usu\u00e1rios clicarem nesse link, voc\u00ea n\u00e3o ser\u00e1 capaz de dizer de onde esses usu\u00e1rios v\u00eam. Em seu software de an\u00e1lise (digamos, Google Analytics), isso aparecer\u00e1 como tr\u00e1fego direto, n\u00e3o como uma refer\u00eancia. Novamente, noreferrer tamb\u00e9m n\u00e3o tem efeito sobre o SEO, mas pode distorcer os n\u00fameros em seu software de an\u00e1lise e rastreamento, relatando tr\u00e1fego mais direto. tamb\u00e9m algumas considera\u00e7\u00f5es a respeito do marketing de afiliados noreferrer, mas est\u00e3o fora do escopo deste artigo. Em geral, os links de afiliados e programas de afiliados agora usam abordagens e t\u00e9cnicas que n\u00e3o dependem do valor noreferrer. Ent\u00e3o, quando voc\u00ea deve usar noreferrer e quando noopener? Eu sugiro que voc\u00ea considere usar ambos. A maioria do suporte do navegador moderno noopener, mas em alguns casos, se noopener n\u00e3o for compat\u00edvel, voc\u00ea pode usar noreferrer. Isso significa que, em termos pr\u00e1ticos, faz sentido usar os dois para oferecer suporte a navegadores mais antigos. Mas a melhor abordagem seria evitar o uso do target=&#8221;_blank&#8221;. A menos que voc\u00ea tenha um excelente motivo para us\u00e1-lo. O que \u00e9 nofollow? Na otimiza\u00e7\u00e3o de mecanismos de pesquisa, \u00e9 crucial obter muitos links valiosos e de qualidade com links para sua p\u00e1gina. Esses s\u00e3o chamados de backlinks. Mas nem todos os links s\u00e3o criados iguais. Em geral, quando uma p\u00e1gina est\u00e1 criando um link para a sua &#8211; est\u00e1 passando seu link &#8211; ou seja &#8211; d\u00e1 mais credibilidade ao seu site e sinaliza para os mecanismos de pesquisa que eles valorizam o seu site. Em ess\u00eancia, voc\u00ea pode considerar isso como um endosso. Se uma p\u00e1gina da Web de alta autoridade tem um link para voc\u00ea &#8211; ela o est\u00e1 endossando, e o Google\/Bing vai considerar isso um fator de classifica\u00e7\u00e3o. O Google usa o termo PageRank como uma medida de quantidade e qualidade de links. No entanto, \u00e0s vezes voc\u00ea n\u00e3o quer passar o suco do link. Esse pode ser o caso ao vincular suas p\u00e1ginas internamente &#8211; por exemplo &#8211; voc\u00ea pode n\u00e3o querer passar seu suco de link de p\u00e1ginas mais valiosas para aquelas que n\u00e3o s\u00e3o t\u00e3o importantes. Entre Entre rel=&#8221;nofollow&#8221;. Assim como seus primos noopener noreferrer, nofollow \u00e9 um valor do atributo rel. Ao adicionar esse valor, ele sinalizar\u00e1 aos mecanismos de pesquisa que voc\u00ea n\u00e3o deseja passar seu link juice\/PageRank para a p\u00e1gina para a qual est\u00e1 vinculando. &lt;a href=&#8221;https:\/\/www.dannybia.com\/&#8221;&gt; rel=&#8221;noopener noreferrer nofollow&#8221; target=&#8221;_blank&#8221;&gt;Clique aqui para visitar o site Danny&#8217;a Home Page. &lt;\/a&gt; Exemplo detalhado hospedado por GitHub (https:\/\/github.com\/) Na linha de c\u00f3digo acima, colocamos todos os tr\u00eas valores &#8211; ao adicionar o valor nofollow, estamos sinalizando ao Google que o PageRank\/link juice n\u00e3o \u00e9 passado para o site https:\/\/www.dannybia.com\/. Quando voc\u00ea deve usar o nofollow? A regra geral \u00e9 usar nofollow links em coment\u00e1rios ou f\u00f3runs. O conte\u00fado gerado pelo usu\u00e1rio pode ser uma fonte de spam e links de baixa qualidade. Voc\u00ea n\u00e3o quer que seu blog ou site de f\u00f3rum passe seu valor para essas p\u00e1ginas de baixa qualidade. Al\u00e9m disso, o Google e outros mecanismos de pesquisa exigem que voc\u00ea use nofollow em todos os links e an\u00fancios patrocinados. O mesmo vale para links em comunicados \u00e0 imprensa e diferentes tipos de links pagos. Um pouco sobre a terminologia &#8211; noopener noreferrer nofollow \u00c0s vezes, voc\u00ea notar\u00e1 que as pessoas est\u00e3o mencionando a tag noopener ou noreferrer. Em outros casos, voc\u00ea pode identificar o atributo rel noreferrer. Embora sejam compreens\u00edveis para a maioria dos desenvolvedores da Web, vale a pena observar o seguinte. noopener, noreferrer, e nofollow n\u00e3o s\u00e3o tags ou atributos. Eles s\u00e3o valores de atributos. rel n\u00e3o \u00e9 uma tag. \u00c9 um atributo da tag \u00e2ncora. &lt;a&gt; Como tal, tem [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5457,5586,569],"tags":[10461,10462,10463,10464,10465,10466,10115],"class_list":["post-33714","post","type-post","status-publish","format-standard","hentry","category-tecnologia-e-computacao","category-tutoriais","category-utilidade-publica","tag-explicando-follow-external-noopener-noreferrer","tag-external","tag-follow","tag-github","tag-noopener","tag-noreferrer","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/dannybia.com\/blog\/wp-json\/wp\/v2\/posts\/33714","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dannybia.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dannybia.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dannybia.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/dannybia.com\/blog\/wp-json\/wp\/v2\/comments?post=33714"}],"version-history":[{"count":0,"href":"https:\/\/dannybia.com\/blog\/wp-json\/wp\/v2\/posts\/33714\/revisions"}],"wp:attachment":[{"href":"https:\/\/dannybia.com\/blog\/wp-json\/wp\/v2\/media?parent=33714"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dannybia.com\/blog\/wp-json\/wp\/v2\/categories?post=33714"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dannybia.com\/blog\/wp-json\/wp\/v2\/tags?post=33714"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}