Quando um hiperlink abre uma nova janela ou guia do navegador, você deve adicionar o atributo rel=”noopener”ao ligação. Isso evita que a nova página volte a controlar a página inicial.
Sempre que você abrir uma nova janela usando o método window.open ou com um hiperlink usando o atributo target. Por padrão, a nova página tem acesso ao objeto window.opener, que pode ser usado para conduzir a página original.
É comum abrir links externos em uma nova janela do navegador. Isso significa que o visitante não”sai”do site para ir para o site de destino. As duas maneiras de fazer isso são usando tags de âncora com o atributo target definido para o nome da nova janela:
texto âncora
A outra maneira é via JavaScript usando window.open :
window.open (“url externo”);
Como você pode imaginar, isso abre uma variedade de possíveis problemas de segurança. Felizmente, você pode desativar essa propriedade adicionando o atributo rel=”noopener”aos hiperlinks.
Você também verá como a abertura de novas guias do navegador abre para problemas de desempenho porque está herdando os problemas de desempenho da página de destino.
O problema de segurança de abrir uma nova janela do navegador
Talvez você controle todos os páginas para as quais você tem links, com isso quero dizer que você só tem links para páginas nas quais sente que pode confiar. Mas assim que você permite conteúdo gerado pelo usuário, como comentários, você terceiriza o controle dessas páginas de destino para alguém que você realmente não conhece.
Eles podem ter um link para qualquer coisa, incluindo um site malicioso.
Com o tempo, as páginas vinculadas a você mudam. Os domínios expiram e os’bandidos’os compram. Agora você tem um link para um site ruim e, pior, ele pode ser usado para controlar sua página.
O problema número um é que a nova página pode retornar à sua página e acessar o objetonavigator.location . Isso significa que eles podem alterar a página carregada em sua janela.
Agora eles têm controle total sobre a página na guia em que você estava. Você pode ter vinculado ao que você acha que é uma página”limpa”, mas pode estar ocultando um script para alterar sua página para a página de malware deles.
Depois que eles mudarem sua página para a página deles, eles poderão fazer qualquer coisa eles querem e você é a porta de entrada para carregar a página.
Abrindo links externos com JavaScript window.open
Isso é um pouco mais complicado de se proteger contra esse ataque quando você abre páginas usando JavaScript.
Você poderia criar uma referência para a nova janela e definir a propriedade opener como nula assim:
var newWindow=window.open (); newWindow.opener=null; newWindow.location=url;
Neste exemplo, você cria uma referência a uma nova janela, define o abridor como nulo e, a seguir, define a localização da nova janela. Agora a nova página não terá acesso ao objeto abridor porque ele simplesmente não existe.
Você também pode criar um iframe temporário para abrir a nova guia. Assim que a nova guia for aberta, você poderá excluir o iframe. Isso remove a referência window.opener na nova página.
Impacto no desempenho
Alguns anos atrás, Jake Archibald escreveu sobre o mesmo tópico e discutiu como usar o noopener tem um ponto positivo e impacto no desempenho.
Para entender por que abrir uma nova janela apresenta problemas de desempenho, você precisa de algumas informações básicas sobre como os navegadores funcionam. Cada janela é mais ou menos com um único segmento. A nova janela aberta quando um link usando o atributo target é clicado é executado no mesmo thread.
Agora, a renderização da nova janela e a análise do script são executados no mesmo thread de sua página. Isso significa que você está permitindo que o código de outra pessoa diminua a capacidade da sua página de responder ao usuário.
Se você não souber, a maioria das páginas da web usa JavaScript excessivo e lento, especialmente páginas com solicitações de terceiros em cascata. Todos esses scripts são agora seus scripts.
Quando você usa o atributo rel=”noopener”, a segunda janela é executada em seu próprio thread, livrando sua página de sofrer de problemas de desempenho da página de destino.
Portanto, agora você não está apenas se protegendo contra um possível problema de segurança, mas também contra problemas de desempenho herdados da página de destino e talvez seus scripts maliciosos de terceiros.
Resumo
Pode parecer inócuo e simples, mas este pequeno truque pode evitar que você e seus clientes sofram mais no futuro. Certifique-se de que qualquer link em seu site que use o atributo target use o atributo rel=”noopener”.
Você também desejará ter certeza de que todas as páginas externas carregadas por meio do método JavaScript window.open também estão isoladas.
Mesmo se a página de destino não pertencer a um mau ator, você precisa se proteger contra o impacto no desempenho devido à arquitetura de página ruim.
Certifique-se de que suas páginas da web sempre usem rel=noopener ao abrir links externos em uma nova janela para impedir o acesso à sua janela.
