Crea un modulo di convalida CAPTCHA utilizzando HTML, CSS e JavaScript

Crea un modulo di convalida CAPTCHA utilizzando HTML, CSS e JavaScript

Oggigiorno 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 crearti un grosso problema, configurandoti come bersaglio 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.





Che 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 challenge-response 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 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 di CAPTCHA nasce dal test di Turing. Un test di Turing è un metodo per verificare se una macchina può pensare come un essere umano o meno. È 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 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 usano per impedire al loro 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 a hacker e bot di inviare spam ai sistemi di registrazione creando account falsi. Se non vengono prevenuti, possono utilizzare tali 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 delle recensioni 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 prevenire false registrazioni a eventi gratuiti.
  • I CAPTCHA possono impedire ai criminali informatici di inviare spam ai blog con commenti dubbi e collegamenti a siti Web dannosi.

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

puoi aggiustare un pixel morto?

Codice CAPTCHA HTML

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












captcha text



Refresh






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 il e elementi rispettivamente. Devi aggiungere il collegamento tag all'interno del testa taggare e sceneggiatura tag alla fine del corpo .

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

Imparentato: Il cheat sheet di HTML Essentials: tag, attributi e altro



Codice CAPTCHA CSS

CSS, o fogli di stile a cascata, viene utilizzato per definire lo stile degli elementi HTML. Usa il seguente codice CSS per definire lo stile degli elementi HTML sopra:

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
body {
background-color: #232331;
font-family: 'Roboto', sans-serif;
}
#captchaBackground {
height: 220px;
width: 250px;
background-color: #2d3748;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
#captchaHeading {
color: white;
}
#captcha {
height: 80%;
width: 80%;
font-size: 30px;
letter-spacing: 3px;
margin: auto;
display: block;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.center {
display: flex;
flex-direction: column;
align-items: center;
}
#submitButton {
margin-top: 2em;
margin-bottom: 2em;
background-color: #08e5ff;
border: 0px;
font-weight: bold;
}
#refreshButton {
background-color: #08e5ff;
border: 0px;
font-weight: bold;
}
#textBox {
height: 25px;
}
.incorrectCaptcha {
color: #FF0000;
}
.correctCaptcha {
color: #7FFF00;
}

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

Codice CAPTCHA JavaScript

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

// document.querySelector() is used to select an element from the document using its ID
let captchaText = document.querySelector('#captcha');
var ctx = captchaText.getContext('2d');
ctx.font = '30px Roboto';
ctx.fillStyle = '#08e5ff';

let userText = document.querySelector('#textBox');
let submitButton = document.querySelector('#submitButton');
let output = document.querySelector('#output');
let refreshButton = document.querySelector('#refreshButton');

// alphaNums contains the characters with which you want to create the CAPTCHA
let 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 = [];
// This loop generates a random string of 7 characters using alphaNums
// Further this string is displayed as a CAPTCHA
for (let i = 1; i <= 7; i++) {
emptyArr.push(alphaNums[Math.floor(Math.random() * alphaNums.length)]);
}
var c = emptyArr.join('');
ctx.fillText(emptyArr.join(''),captchaText.width/4, captchaText.height/2);

// This event listener is stimulated whenever the user press the 'Enter' button
// 'Correct!' or 'Incorrect, please try again' message is
// displayed after validating the input text with CAPTCHA
userText.addEventListener('keyup', function(e) {
// Key Code Value of 'Enter' Button is 13
if (e.keyCode === 13) {
if (userText.value === c) {
output.classList.add('correctCaptcha');
output.innerHTML = 'Correct!';
} else {
output.classList.add('incorrectCaptcha');
output.innerHTML = 'Incorrect, please try again';
}
}
});
// This event listener is stimulated whenever the user clicks the 'Submit' button
// 'Correct!' or 'Incorrect, please try again' message is
// displayed after validating the input text with CAPTCHA
submitButton.addEventListener('click', function() {
if (userText.value === c) {
output.classList.add('correctCaptcha');
output.innerHTML = 'Correct!';
} else {
output.classList.add('incorrectCaptcha');
output.innerHTML = 'Incorrect, please try again';
}
});
// This event listener is stimulated whenever the user press the 'Refresh' button
// A new random CAPTCHA is generated and displayed after the user clicks the 'Refresh' button
refreshButton.addEventListener('click', function() {
userText.value = '';
let refreshArr = [];
for (let j = 1; j <= 7; j++) {
refreshArr.push(alphaNums[Math.floor(Math.random() * alphaNums.length)]);
}
ctx.clearRect(0, 0, captchaText.width, captchaText.height);
c = refreshArr.join('');
ctx.fillText(refreshArr.join(''),captchaText.width/4, captchaText.height/2);
output.innerHTML = '';
});

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

come cambiare lo sfondo in Photoshop

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. a causa della mancanza di moduli CAPTCHA sui propri 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. Anche se c'è un motivo importante per cui sono fatti per essere difficili.

Condividere Condividere Tweet E-mail 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 Argomenti correlati
  • Programmazione
  • HTML
  • JavaScript
  • CSS
Circa l'autore Yuvraj Chandra(60 articoli pubblicati)

Yuvraj è uno studente universitario di Informatica presso l'Università di Delhi, in India. È appassionato di sviluppo Web Full Stack. Quando non scrive, esplora la profondità di diverse tecnologie.

Altro da Yuvraj Chandra

Iscriviti alla nostra Newsletter

Iscriviti alla nostra newsletter per suggerimenti tecnici, recensioni, ebook gratuiti e offerte esclusive!

Clicca qui per iscriverti