Al giorno d'oggi i CAPTCHA sono parte integrante della sicurezza del sito web. Milioni di test CAPTCHA vengono completati online ogni giorno.

Se non hai implementato la convalida CAPTCHA sul tuo sito web, potrebbe creare un grosso problema per te, configurandoti come obiettivo per gli spammer.

Ecco tutto ciò che devi sapere sui CAPTCHA e su come implementarli facilmente sul tuo sito web utilizzando HTML, CSS e JavaScript.

Cos'è il CAPTCHA?

CAPTCHA sta per "Test di Turing pubblico completamente automatizzato per distinguere i computer e gli esseri umani". Questo termine è stato coniato nel 2003 da Luis von Ahn, Manuel Blum, Nicholas J. Hopper e John Langford. È un tipo di test di risposta alla sfida che viene utilizzato per determinare se l'utente è umano o meno.

I CAPTCHA aggiungono sicurezza ai siti Web fornendo sfide difficili da eseguire per i bot ma relativamente facili per gli esseri umani. Ad esempio, identificare tutte le immagini di un'auto da un insieme di più immagini è difficile per i robot ma abbastanza semplice per gli occhi umani.

L'idea del CAPTCHA nasce dal test di Turing. Un test di Turing è un metodo per verificare se una macchina può pensare come un essere umano oppure no. È interessante notare che un test CAPTCHA può essere chiamato "test di Turing inverso" poiché in questo caso, il computer crea il test che sfida gli esseri umani.

Perché il tuo sito web ha bisogno della convalida CAPTCHA?

I CAPTCHA vengono utilizzati principalmente per impedire ai bot di inviare automaticamente moduli con spam e altri contenuti dannosi. Anche aziende come Google lo utilizzano per impedire al proprio sistema di attacchi di spam. Ecco alcuni dei motivi per cui il tuo sito web trarrà vantaggio dalla convalida CAPTCHA:

• I CAPTCHA aiutano a impedire che hacker e bot inviino spam ai sistemi di registrazione creando account falsi. Se non vengono impediti, possono utilizzare quegli account per scopi nefasti.
• I CAPTCHA possono vietare gli attacchi di accesso di forza bruta dal tuo sito Web che gli hacker utilizzano per provare ad accedere utilizzando migliaia di password.
• I CAPTCHA possono impedire ai bot di inviare spam alla sezione di revisione fornendo commenti falsi.
• I CAPTCHA aiutano a prevenire l'inflazione dei biglietti poiché alcune persone acquistano un gran numero di biglietti per la rivendita. CAPTCHA può anche impedire false registrazioni a eventi gratuiti.
• I CAPTCHA possono impedire ai criminali informatici di inviare spam ai blog con commenti e collegamenti sospetti a siti Web dannosi.

Ci sono molti altri motivi che supportano l'integrazione della convalida CAPTCHA nel tuo sito web. Puoi farlo con il codice seguente.

Codice CAPTCHA HTML

HTML, o HyperText Markup Language, descrive la struttura di una pagina web. Utilizza il seguente codice HTML per strutturare il tuo modulo di convalida CAPTCHA:

Captcha Validator utilizzando HTML, CSS e JavaScript



testo captcha




ricaricare

Questo codice è composto principalmente da 7 elementi:

• : Questo elemento viene utilizzato per visualizzare l'intestazione del modulo CAPTCHA.
• : Questo elemento viene utilizzato per visualizzare il testo CAPTCHA.
• - Questo elemento viene utilizzato per creare una casella di input per digitare il CAPTCHA.
• : Questo pulsante invia il modulo e controlla se il CAPTCHA e il testo digitato sono uguali o meno.
• : Questo pulsante viene utilizzato per aggiornare il CAPTCHA.
• : Questo elemento viene utilizzato per visualizzare l'output in base al testo inserito.
• : Questo è l'elemento genitore che contiene tutti gli altri elementi.

I file CSS e JavaScript sono collegati a questa pagina HTML tramite e elementi rispettivamente. Devi aggiungere il file collegamento tag all'interno del testa tag e script alla fine del tag corpo.

Puoi anche integrare questo codice con i moduli esistenti del tuo sito web.

Relazionato: Cheat Sheet di HTML Essentials: tag, attributi e altro

Codice CAPTCHA CSS

CSS, o Cascading Style Sheets, viene utilizzato per definire gli elementi HTML. Utilizza il seguente codice CSS per definire lo stile degli elementi HTML sopra:

@import url (' https://fonts.googleapis.com/css2?family=Roboto&display=swap');
body {
colore di sfondo: # 232331;
famiglia di caratteri: "Roboto", sans-serif;
}
#captchaBackground {
altezza: 200 px;
larghezza: 250px;
colore di sfondo: # 2d3748;
display: flex;
elementi di allineamento: centro;
giustificare-contenuto: centro;
flex-direction: colonna;
}
#captchaHeading {
colore bianco;
}
#captcha {
margine inferiore: 1em;
dimensione del carattere: 30px;
spaziatura lettere: 3px;
colore: # 08e5ff;
}
.center {
display: flex;
flex-direction: colonna;
elementi di allineamento: centro;
}
#submitButton {
margin-top: 2em;
margine inferiore: 2em;
colore di sfondo: # 08e5ff;
bordo: 0px;
spessore del carattere: grassetto;
}
#refreshButton {
colore di sfondo: # 08e5ff;
bordo: 0px;
spessore del carattere: grassetto;
}
#casella di testo {
altezza: 25px;
}
.CAPTCHA errato {
colore: # FF0000;
}
.correctCaptcha {
colore: # 7FFF00;
}

Aggiungi o rimuovi le proprietà CSS da questo codice in base alle tue preferenze. Puoi anche dare un aspetto elegante al contenitore del modulo usando il Proprietà box-shadow CSS.

Codice CAPTCHA JavaScript

JavaScript viene utilizzato per aggiungere funzionalità a una pagina Web altrimenti statica. Utilizza il codice seguente per aggiungere funzionalità complete al modulo di convalida CAPTCHA:

// document.querySelector () viene utilizzato per selezionare un elemento dal documento utilizzando il suo ID
let captchaText = document.querySelector ('# captcha');
let userText = document.querySelector ('# textBox');
let submitButton = document.querySelector ('# submitButton');
let output = document.querySelector ('# output');
lascia refreshButton = document.querySelector ('# refreshButton');
// alphaNums contiene i caratteri con cui si desidera creare il CAPTCHA
lascia alphaNums = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L "," M "," N "," O "," P "," Q "," R "," S "," T "," U "," V "," W "," X ", "Y", "Z", "a", "b", "c", 'd', 'e', ​​'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p ',' q ',' r ',' s ',' t ',' u ',' v ',' w ',' x ',' y ',' z ',' 0 ',' 1 ', "2", "3", "4", "5", "6", "7", "8", '9'];
let emptyArr = [];
// Questo ciclo genera una stringa casuale di 7 caratteri utilizzando alphaNums
// Inoltre questa stringa viene visualizzata come CAPTCHA
per (sia i = 1; i <= 7; i ++) {
emptyArr.push (alphaNums [Math.floor (Math.random () * alphaNums.length)]);
}
captchaText.innerHTML = emptyArr.join ('');
// Questo ascoltatore di eventi viene stimolato ogni volta che l'utente preme il pulsante "Invio"
// "Corretta!" o il messaggio "Non corretto, riprova" è
// visualizzato dopo aver convalidato il testo di input con CAPTCHA
userText.addEventListener ('keyup', function (e) {
// Il valore del codice chiave del pulsante "Invio" è 13
if (e.keyCode 13) {
if (userText.value captchaText.innerHTML) {
output.classList.add ("correctCaptcha");
output.innerHTML = "Corretto!";
} altro {
output.classList.add ("wrongCaptcha");
output.innerHTML = "Non corretto, riprova";
}
}
});
// Questo listener di eventi viene stimolato ogni volta che l'utente fa clic sul pulsante "Invia"
// "Corretta!" o il messaggio "Non corretto, riprova" è
// visualizzato dopo aver convalidato il testo di input con CAPTCHA
submitButton.addEventListener ('click', function () {
if (userText.value captchaText.innerHTML) {
output.classList.add ("correctCaptcha");
output.innerHTML = "Corretto!";
} altro {
output.classList.add ("wrongCaptcha");
output.innerHTML = "Non corretto, riprova";
}
});
// Questo listener di eventi viene stimolato ogni volta che l'utente preme il pulsante "Aggiorna"
// Un nuovo CAPTCHA casuale viene generato e visualizzato dopo che l'utente fa clic sul pulsante "Aggiorna"
refreshButton.addEventListener ('click', function () {
userText.value = "";
let refreshArr = [];
per (sia j = 1; j <= 7; j ++) {
refreshArr.push (alphaNums [Math.floor (Math.random () * alphaNums.length)]);
}
captchaText.innerHTML = refreshArr.join ('');
output.innerHTML = "";
});

Ora hai un modulo di convalida CAPTCHA completamente funzionante! Se vuoi dare un'occhiata al codice completo, puoi clonare il file Archivio GitHub di questo progetto di convalida CAPTCHA. Dopo aver clonato il repository, esegui il file HTML e otterrai il seguente output:

Quando inserisci il codice CAPTCHA corretto nella casella di input, verrà visualizzato il seguente output:

Quando inserisci un codice CAPTCHA errato nella casella di input, verrà visualizzato il seguente output:

Rendi sicuro il tuo sito web con i CAPTCHA

In passato, molte organizzazioni e aziende hanno subito pesanti perdite come violazioni dei dati, attacchi di spam, ecc. come risultato di non avere moduli CAPTCHA sui loro siti web. Si consiglia vivamente di aggiungere CAPTCHA al tuo sito Web, poiché aggiunge un livello di sicurezza per impedire al sito Web di criminali informatici.

Google ha anche lanciato un servizio gratuito chiamato "reCAPTCHA" che aiuta a proteggere i siti web da spam e abusi. CAPTCHA e reCAPTCHA sembrano simili, ma non sono proprio la stessa cosa. A volte i CAPTCHA risultano frustranti e difficili da capire per molti utenti. Tuttavia, c'è una ragione importante per cui sono fatte per essere difficili.

Come funzionano i CAPTCHA e perché sono così difficili?

CAPTCHA e reCAPTCHA prevengono lo spam. Come funzionano? E perché trovi i CAPTCHA così difficili da risolvere?

Leggi Avanti

Circa l'autore