JavaScript

LINK

A) Link seguro apenas em HTML (forma correta e explícita).

Este é o padrão canônico. Todo desenvolvedor sério precisa reconhecê-lo de imediato.

                HTML
                <a href="https://exemplo.com" target="_blank" rel="noopener noreferrer"> Acessar site externo </a>
            

• target="_blank" - abre em nova aba;
• rel="noopener" - impede que a página aberta controle a aba original;
• rel="noreferrer" - impede vazamento da URL de origem.

Observação semântica importante:

• Não é “estilo”.
• Não é “boa prática estética”.
• É controle de comportamento e segurança.

B) Link seguro automatizado com JavaScript (HTML limpo)

Aqui você simplifica o HTML e garante que ninguém esqueça os atributos.

HTML (simples e legível)

                <a href="https://exemplo.com" target="_blank"> Acessar site externo </a>
            

JavaScript (corrige automaticamente)

                <script>
                document.addEventListener("DOMContentLoaded", function () {
                    const externalLinks = document.querySelectorAll('a[target="_blank"]');
                
                    externalLinks.forEach(link => {
                        link.setAttribute("rel", "noopener noreferrer");
                    });
                });
                </script>
            

O que isso ensina?

• Separação de responsabilidades;
• Automação de segurança;
• Redução de erro humano;
• HTML continua semântico e simples.

Nota crítica:
Se o JavaScript não carregar, o link ainda funciona — só perde a proteção extra.
Por isso, HTML explícito ainda é o mais robusto.

C) Link seguro criado 100% via JavaScript

Aqui o HTML é gerado pelo navegador, não só escrito.

HTML

                <div id="links"></div>
            

JavaScript

                <script>
                const container = document.getElementById("links");
                
                const link = document.createElement("a");
                link.href = "https://exemplo.com";
                link.target = "_blank";
                link.rel = "noopener noreferrer";
                link.textContent = "Acessar site externo";
                
                container.appendChild(link);
                </script>
            

Quando isso faz sentido?

• Conteúdo dinâmico;
• Sistemas;
• Aplicações;
• Dados vindos de banco ou API.

*Não para páginas simples — e isso é importante deixar claro.

D) A versão didática perfeita para o site

❌ Forma insegura (exemplo negativo):

                <a href="https://exemplo.com" target="_blank"> Acessar site externo </a>
            

*Abre em nova aba, mas permite que a página externa manipule a aba original.

✅ Forma correta (HTML)

                
                    <a href="https://exemplo.com" target="_blank" rel="noopener noreferrer"> Acessar site externo </a>
                
            

✅ Forma correta (automatizada com JavaScript)

                
                    <script>
                    document.addEventListener("DOMContentLoaded", () => {
                        document
                            .querySelectorAll('a[target="_blank"]')
                            .forEach(link =>
                                link.rel = "noopener noreferrer"
                            );
                    });
                    </script>