Pare os bots com o Google Recaptcha

Manter os bots sempre é um jogo de números - infelizmente, a disponibilidade de bibliotecas de aprendizagem de máquina fáceis de usar feita rachando muitos tipos clássicos de captcha simples. O Google fica na vanguarda da tempestade de botting - afinal, algo existe apenas se ele puder ser encontrado (proeminentemente) nos índices de Grandes G.

Devido a isso, os engenheiros do Google dedicam quantidades significativas de esforço para projetar sistemas e soluções anti-bot. Eles são disponibilizados para terceiros por meio de um produto chamado reCAPTCHA, que iremos juntos durante os seguintes passos. Para mais ferramentas não relacionadas a bots, veja o nosso Web Design Tools. publicar.

Antes de começar, no entanto, algumas coisas básicas devem ser esclarecidas. Primeiro de tudo: manter os bots é sempre um jogo do lado do servidor. Inspecionar os valores de retorno da sua medida anti-bot no cliente é idiota. Um invasor pode analisar o código-fonte ou simplesmente trabalha em torno dele corrigindo a validação de retorno.

Secundariamente, tenha em mente que nem todos os bots são criados iguais. Bloquear o Googlebot, por exemplo, leva ao seu site não sendo indexado mais. Problemas semelhantes podem ocorrer com outros bots específicos do setor que muitas vezes mais bons que os danos. Finalmente, os bots podem ser um mal menor em alguns casos - quando o tráfego é tudo que você precisa, um bot clique para ser apenas um clique.

• 8 APIs incríveis do Google (e como usá-los)

01. Inscreva-se um Go-Go!

O Google mantém um olho próximo nos usuários do Recaptcha. Cabeça aqui e use sua conta do Google para entrar. Adicionar "localhost" além do seu domínio favorito em domínios. Escolha o tipo de caixa de seleção "Eu não sou um robô", pois é a medida anti-bot mais conhecida.

02. Site e chaves do servidor

O Google recompensa persistência em trabalhar através do processo de configuração exibindo um servidor e uma chave do site. Enquanto o último pode ser compartilhado com terceiros, assegure-se de que a chave secreta nunca deixe os limites do ambiente do seu servidor.

03. Entenda a verificação do site

O Google usa uma variação do processo de resposta ao desafio para garantir a integridade do resultado. Instâncias CAPTCHA Retornam um valor criptográfico que o servidor é "ligar" para um sistema de verificação hospedado pelo Big G - se os resultados acabarem a ser válidos, uma resposta HTTP correta será retornada à sua lógica de back-end.

04. Configurar express.js

É importante demonstrar uma solução de chave de turno, mostrando todo o fluxo de autenticação. Devido a isso, precisamos começar com um "servidor" de tipos - expressa JS foi um tópico frequente recentemente, então implantá-lo para um projeto de projeto recém-criado.

 Tamhan @ Tamhan-ThinkPad: ~ / Nodespace / Nodeverify $
npm init --y.
Escreveu para /home/tamhan/nodespace/nodeverify/package.json:
  . . .
Tamhan @ Tamhan-ThinkPad: ~ / Nodespace / Nodeverify $
NPM instalar o pedido do parser do corpo expresso --Save
. . .
+ [email protected].
+ solicitaçã[email protected].
+ [email protected] 

05. Prepare-se para servir

Carregando a caixa de seleção "Eu não é um robô" conhecida requer um arquivo HTML. Dado que esta é uma amostra demonstrando o fluxo de interação, comece com um documento estático contendo a marcação mostrada acompanhando esta etapa.

 & lt; html & gt;
& lt; head & gt;
& lt; title & gt; reCAPTCHA Demo: página simples
& lt; / title & gt;
& lt; script src = "https://www.google.com/recaptcha/api.js" async adferior & gt; & lt; / script & gt;
& lt; / head & gt;
& lt; corpo e gt;
& lt; formar ação = "?" Método = "Post" & GT;
& lt; div class = "g-reCAPTCHA" Data-site-site-site = "your_site_key" & gt; & lt; / div & gt;
& lt; br / & gt;
& lt; Tipo de entrada = "Enviar" Valor = "Enviar" & GT;
& lt; / form & gt;
& lt; / corpo & gt;
& lt; / html & gt; 

06. Entenda e teste

O Google fornece um arquivo API contendo a lógica CAPTCHA. Quando a API.JS é carregada, o código contido nele analisa o DOM e substitui qualquer & lt; div & gt; Tags contendo a tag de classe correta. & lt; envio & gt; As tags são deixadas sozinhas a partir dessa escrita. De qualquer forma, execute o código em um navegador de opção para ver os resultados mostrados acima.

07. Carregue alguns elementos

Criar uma cadeia de entrega em Express.js requer um pouco de inteligência. Um ajudante realmente útil é o Bodyparser. Quando incorporado em um fluxo de trabalho de renderização, os campos individuais retornados do servidor podem ser acessados ​​usando padrões de design orientados a objetos que simplificam muito o manuseio.

 var express = requer ("expresso");
var bodyparser = requer ("parser corporal");
Var solicitação = requer ("solicitação");

var myapp = express ();

myapp.use (bodyparser.json ());
myapp.use (bodyparser.urlencoded ({estendido: verdadeiro})); 

08. Prepare-se para verificar ...

A caixa de seleção do Google faz sua mágica no fundo - quando terminar, um novo campo chamado g-reatptcha-resposta é adicionado aos atributos do formulário. Esses dados devem ser enviados aos servidores do Google para verificação. A corda longa no código que acompanha esta etapa é substituída por um Google designado para você.

 myapp.post ("/ tamstest", função (solicitação, resposta) {
var reCAPTCHA_URL = "https://www.google.com/recaptcha/api/siteverify?";
reCAPTCHA_URL + = "Secret = 6lewmzguaaaAirsB2GV5KKX2CWYFULKZRMD7WS & AMP;";
reCAPTCHA_URL + = "Response =" + solicitação.body ["g-reatptcha-resposta"] + "& amp;";
recaptcha_url + = "RemayIP =" + solicitação.connection.remoteaddress; 

09. E perguntar nos servidores do Google

O próximo ato envolve disparar o URL para o servidor. Isso é realizado através de uma solicitação JSON tradicional com base no endereço criado na etapa anterior. Seus resultados são analisados ​​- se um erro for lançado, uma falha será retornada ao aplicativo do lado do cliente.

 Solicitação (recaptcha_url, função (erro,
resp, corpo) {
corpo = json.parse (corpo);
if (body.success! == indefinido e amp; e amp;
sucesso) {
Retornar Response.Send ({"Message":
"Validação CAPTCHA falhou"});
}
Response.Header ("Tipo de conteúdo",
"Aplicação / JSON"). Enviar (corpo);
});
}); 

10. Defina solto

O servidor HTTP do Express.js precisa ser desencadeado. Isso é melhor realizado usando a estrutura do aplicativo. Tenha em mente que as portas com um número menor que 1024 são restritas ao usuário raiz em sistemas operacionais Unixoid - 3000 é, portanto, uma aposta segura.

 var servidor = myapp.listen (3000, função () {
console.log ("Ouvindo" + Server.
endereço (). Porto);
}); 

11. Ajuste o formulário

Finalmente, nosso formulário precisa ser colocado em contato com o servidor local em execução dentro do Node.js. Isso é melhor realizado ajustando a cadeia de ação - Certifique-se de apontar o destino para um domínio válido, especialmente se você não usar um servidor Express.js local.

 & lt; corpo e gt;
& lt; formar ação = "http: // localhost: 3000 / tamstest" método = "post" & gt;
& lt; div Class = "g-reCAPTCHA" Data-Site-Site-site = "6LewmzguaAAEAPSWPVP6HLULNJXA_SCWTHYHGE" & gt; & lt; / div & gt;
& lt; br / & gt; 

12. Traga-o!

Testar nosso sistema cliente-Server requer dois servidores devido à verificação de origem do Google. Felizmente, o Python fornece um servidor HTTP rápido - use-o para fornecer index.htm, enquanto o Express.js é alistado para executar a verificação da resposta retornada.

 Tamhan @ Tamhan-ThinkPad: ~ / Nodespace / Nodeverify $
nó index.js.
Ouvindo em 3000.
Tamhan @ Tamhan-ThinkPad: ~ / Nodespace / Nodeverify $
python3 -m http.server.
Servindo HTTP na porta 0,0.0.0 8000 ... 

13. Realize uma corrida seca

Ao executar, verifique a caixa de seleção e cumpra quaisquer desafios, o Big G pode jogar em você. O servidor geralmente não exige muito em termos de verificação e prossegue para exibir o conteúdo exibido acima.

14. Desativar o botão Enviar

Os exemplos do Google ignoram o botão de envio do lado do cliente, já que um invasor sempre pode reaparecer com algum javascript. Ao desativar o botão de envio em relação ao CAPTCHA, não melhora a segurança, ela tem efeitos positivos sobre a usabilidade. Vamos começar desativando o botão após o arranque.

& lt; formar ação = "http: // localhost: 3000 / tamstest" método = "post" & gt;
& lt; div Class = "g-reCAPTCHA" Data-Site-Site-site = "6LewmzguaAAEAPSWPVP6HLULNJXA_SCWTHYHGE" & gt; & lt; / div & gt;
& lt; br / & gt;
& lt; Tipo de entrada = "Enviar" Valor = "Enviar" Desativado e GT;
& lt; / form & gt; 

15. Lidar com eventos CAPTCHA

Em seguida, um manipulador de eventos deve ser adicionado. A API CAPTCHA do Google irá invocar sempre que o usuário passasse uma tentativa de verificação do ponto de vista do lado do cliente.

 & lt; html & gt;
& lt; head & gt; . . .
& lt; script & gt;
função onDcfired (valor) {
console.log (valor);
}
& lt; / script & gt;
& lt; / head & gt;
& lt; corpo e gt;
& lt; formar ação = "http: // localhost: 3000 /
tamstest "método =" post "& gt;
& lt; div class = "g-reCAPTCHA" Data-Site-Site-site = "6Lewmzguaaaaepswpp6hlulnjxa_scwtwhyhge" Data-Callback =
"Ondcfired" & gt; & lt; / div & gt; 

16. Excursão: Renderização dinâmica de CAPTCHA

O Google não limita os desenvolvedores a desovar elementos da Recaptcha durante a carga da página. O render () método encontrado na API Recaptcha permite que você designe um ou mais & lt; div & gt; Tags no site que devem ser transformados em widgets Recaptcha.

 Var MyCallback = Função (Val) {Console.
log (val); };
Grecaptcha.Render (
document.getElementsByID ('My-ID'),
{
Callback: MyCallback,
Sitekey: Mysitekey.
}); 

17. Ativar botão se necessário ...

Com isso, uma questão principal permanece. O botão Enviar deve ser reativado quando o evento de clique fornecido pela Recaptcha chega em nosso código de aplicativo. Carregar jQuery em um exemplo tão simples é desnecessário, então caia de volta para algum javascript simples.

 & lt; script & gt;
função onDcfired (valor) {
document.getelementbyid.
("Botão"). Desativado = falso;
}
& lt; / script & gt; 

 & lt; Tipo de entrada = "Enviar" ID = "botão"
Valor = "Enviar" Desativado e GT; 

18. ... e limpar depois de nós

O Google não pode armazenar dados de resposta ao desafio para sempre. Devido a isso, a verificação é bastante rápida - por padrão, nosso programa não descobre sobre isso. Felizmente, a API contém um campo adicional que pode ser usado para notificar.

 função ondcexpired (valor) {
document.getElementByID ("botão").
desativado = true;
} 

 & lt; div class = "g-reCAPTCHA" Data-Site-SiteKey = "6LewmzGuaAAEPSWPVP6HLULNJXA_SCWTHYHGE"
Data-Callback = "OnDcFired" Data-Expired-Callback = "OndCexpired" & GT; & lt; / div & gt; 

19. Use atributos adicionais

Cabeça aqui Para encontrar uma lista de propriedades incluídas na API JavaScript. Eles permitem que você ajuste vários comportamentos - por exemplo, o widget Recaptcha também pode ser renderizado em um esquema de cores amigável!

20. Trabalhe de forma transparente ...

O Google recentemente introduziu uma terceira versão da API Recaptcha, que não requer interação explícita do usuário. Em vez disso, você simplesmente carregá-lo durante a inicialização da página - o código monitora automaticamente o comportamento do usuário que está sendo executado no site.

 & lt; script src = "https://www.google.com/recaptcha/api.js?render=recaptcha_site_key" & gt; & lt; / script & gt;
& lt; script & gt;
grecaptcha.ready (função () {
grecaptcha.execute ('recaptcha_site_key',
{Ação: 'Homepage'}).
então (função (token) {
...
});
});
& lt; / script & gt; 

21. ... e fornecer informações adicionais

Os lucros do plug-in de mais dados sobre a ação que está sendo realizada no site. O snippet que acompanha esta etapa anunciará que o usuário visita atualmente sua página inicial. Mais informações sobre a API podem ser encontradas na documentação.

 & lt; script & gt;
grecaptcha.ready (função () {
grecaptcha.execute ('recaptcha_site_key',
{Ação: 'Homepage'});
});
& lt; / script & gt; 

Junte-se a nós em Rich Mix, Shoreditch em 26 de setembro para gerar CSS, uma conferência sob medida para web designers trazidos a você pelo Creative Bloq, Net e Web Designer. Reserve seu bilhete de madrugada antes de 15 de agosto em www.generateconf.com. .

Este artigo foi originalmente publicado em emissão 287 da revista Creative Web Design Web designer . Comprar edição 287 aqui ou Inscreva-se no web designer aqui .

Artigos relacionados:

• 8 Segredos Essenciais de Segurança do WordPress
• Como o codepen se tornou seguro
• 9 dicas de segurança para proteger seu site de hackers