Passei minhas últimas madrugadas fazendo testes de segurança com javascript, e descobri umas coisas que achei interessantes. Desde que mudei para São Paulo comecei a trabalhar apenas com interface, isso me fez aprender muito sobre javascript, tomar alguns cuidados com performance e agora resolvi dar uma olhada em "segurança no front-end", se é que isso existe.
Quando eu falo de "segurança no javascript" me refiro a possibilidade de manipular o script da página para fazer alguma coisa que ela não está aguardando que seja feita, por isso vale relembrar que todo o processo de segurança e validação deve ser feito no back-end.
Bem, você deve saber que é possível executar um código javascript em uma página através da URL, para isso você só precisa digitar no campo de URL do navegador o comando javascript antecedido por "javascript:".
Por exemplo, aqui mesmo no O Desenvolvedor, digite o seguinte na url do seu navegador:
javascript:alert("DONT PANIC!");
Qualqur código js será interpretado quando colocado na linha de url do site, seria como um link no site com o comando "javascript:". Sabendo disso você sabe que é possível:
- Chamar qualquer função do código do site
- Criar e manipular funções do js (validação,posts,etc.)
- Manipular o DOM (inputs,action,methods)
Aí entra a minha curiosidade: existem plataformas onde o javascript pode fazer requisições que executam funções no back-end (insert,delete,update) e se isso não for validado e o usuário tiver um pouco de conhecimento do sistema, poderá executar funções malignas, penso eu. Ainda não testei.
Mas o motivo do post não é mostrar que é possível executar comandos através da url do navegador, é mostrar que é possível carregar um javascript hospedado em qualquer lugar e fazer com que ele seja interpretado pelo site que você está navegando.
Carregando um javascript em qualquer site
Utilizando a url do navegador vamos manipular o <head> da página e fazer com que ela carregue o jQuery, por exemplo. Vou primeiro colocar o código do "load", depois transformar ele em uma única linha para que seja colocado no navegador.
//criamos um <script> e setamos o tipo e a url
var script=document.createElement("script");
script.type="text/javascript";
script.src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js";
//manipulamos o <head> do site para inserir o script
document.getElementsByTagName("head")[0].appendChild(script);
Simples, se você colocar isso em qualquer .js do seu site ele irá carregar o jQuery do Google libraries. Para fazer isso através em qualquer site que você esteja navegando é só digitar o seguinte no campo de url (com o site carregado no seu navegador):
javascript:var%20script=document.createElement("script");script.type="text/javascript";script.src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js";document.getElementsByTagName("head")[0].appendChild(script);void(0);
A única diferença do bloco de código anterior é o void(0);, que serve unicamente para o navegador não entender seu comando com uma chamada para uma url e tentar abrir uma nova página.
Pronto, agora o site que você está visualizando tem a biblioteca jQuery funcionando.
Algumas curiosidades que descobri:
- Se o caminho do javascript que você tentar carregar for no seu computador "///file…" OU em um localhost (rodando servidor na sua máquina) ele será carregado no DOM porém não será interpretado
- Para o problema anterior não adianta simular um domínio apontando para o localhost (através do hosts do Windows), ele vai continuar carregando o javascript no DOM mas não interpretando
Então o jeito para carregar um JS externo é hospedar em algum servidor e fazer a chamada para o arquivo hospedado. Todos os testes foram feitos no Windows Seven com Firefox 3.6.
Opinião
Agora eu quero a opinião dos leitores, o que vocês acham deste lance de segurança no front-end? Uma babaquice? Perigoso? É necessário se preocupar?
Comentem, estou curioso sobre estas coisas e queria saber até que ponto vocês acham que pode ser perigoso a manipulação de uma página por scripts externos…