I dag er CAPTCHAer en integrert del av nettsikkerheten. Millioner av CAPTCHA-tester gjennomføres online hver dag.

Hvis du ikke har implementert CAPTCHA-validering på nettstedet ditt, kan det skape et stort problem for deg og sette deg opp som et mål for spammere.

Her er alt du trenger å vite om CAPTCHAer og hvordan du enkelt kan implementere dem på nettstedet ditt ved hjelp av HTML, CSS og JavaScript.

Hva er CAPTCHA?

CAPTCHA står for "Completely Automated Public Turing test to tell Computers and Humans Apart." Dette begrepet ble laget i 2003 av Luis von Ahn, Manuel Blum, Nicholas J. Hopper og John Langford. Det er en type utfordring-respons test som brukes til å avgjøre om brukeren er menneskelig eller ikke.

CAPTCHAs gir sikkerhet til nettsteder ved å tilby utfordringer som er vanskelige for roboter å utføre, men relativt enkle for mennesker. For eksempel er det vanskelig for roboter å identifisere alle bildene av en bil fra et sett med flere bilder, men enkelt nok for menneskers øyne.

Ideen om CAPTCHA stammer fra Turing Test. En Turing Test er en metode for å teste om en maskin kan tenke som et menneske eller ikke. Interessant, en CAPTCHA-test kan kalles en "omvendt Turing-test" siden datamaskinen i dette tilfellet lager testen som utfordrer mennesker.

Hvorfor nettstedet ditt trenger CAPTCHA-validering?

CAPTCHA brukes hovedsakelig for å forhindre at roboter automatisk sender inn skjemaer med spam og annet skadelig innhold. Selv selskaper som Google bruker det for å forhindre at systemet deres mot spamangrep. Her er noen av grunnene til at nettstedet ditt drar nytte av CAPTCHA-validering:

• CAPTCHAs hjelper til med å forhindre at hackere og bots spammer registreringssystemene ved å opprette falske kontoer. Hvis de ikke forhindres, kan de bruke disse kontoene til skjemmende formål.
• CAPTCHAs kan forby brute force-påloggingsangrep fra nettstedet ditt som hackere bruker for å prøve å logge på med tusenvis av passord.
• CAPTCHA kan begrense bots fra å spamme gjennomgangsseksjonen ved å gi falske kommentarer.
• CAPTCHAs hjelper til med å forhindre billettinflasjon ettersom noen kjøper et stort antall billetter for videresalg. CAPTCHA kan til og med forhindre falske registreringer til gratis arrangementer.
• CAPTCHAs kan begrense cyber-skurker fra å spamme blogger med tøffe kommentarer og lenker til skadelige nettsteder.

Det er mange flere grunner som støtter integrering av CAPTCHA-validering på nettstedet ditt. Du kan gjøre det med følgende kode.

HTML CAPTCHA-kode

HTML, eller HyperText Markup Language, beskriver strukturen til en webside. Bruk følgende HTML-kode for å strukturere CAPTCHA-valideringsskjemaet:

Captcha Validator ved hjelp av HTML, CSS og JavaScript



captcha-tekst




Forfriske

Denne koden består hovedsakelig av 7 elementer:

• : Dette elementet brukes til å vise overskriften til CAPTCHA-skjemaet.
• : Dette elementet brukes til å vise CAPTCHA-teksten.
• - Dette elementet brukes til å lage en inndataboks for å skrive CAPTCHA.
• : Denne knappen sender inn skjemaet og sjekk om CAPTCHA og den skrevne teksten er den samme eller ikke.
• : Denne knappen brukes til å oppdatere CAPTCHA.
• : Dette elementet brukes til å vise utdataene i henhold til den angitte teksten.
• : Dette er det overordnede elementet som inneholder alle de andre elementene.

CSS- og JavaScript-filer er koblet til denne HTML-siden gjennom og elementer henholdsvis. Du må legge til lenke tag inne i hode tag og manus tag på slutten av kropp.

Du kan også integrere denne koden med eksisterende former for nettstedet ditt.

I slekt: HTML Essentials Cheat Sheet: Tags, attributter og mer

CSS CAPTCHA-kode

CSS, eller Cascading Style Sheets, brukes til å style HTML-elementer. Bruk følgende CSS-kode for å style HTML-elementene ovenfor:

@import url (' https://fonts.googleapis.com/css2?family=Roboto&display=swap');
kropp {
bakgrunnsfarge: # 232331;
font-familie: 'Roboto', sans-serif;
}
#captchaBackground {
høyde: 200px;
bredde: 250px;
bakgrunnsfarge: # 2d3748;
skjerm: flex;
align-items: sentrum;
rettferdiggjøre innhold: sentrum;
flex-retning: kolonne;
}
#captchaHeading {
farge: hvit;
}
#captcha {
margin-bunn: 1 em;
skriftstørrelse: 30px;
avstand mellom bokstaver: 3px;
farge: # 08e5ff;
}
.senter {
skjerm: flex;
flex-retning: kolonne;
align-items: sentrum;
}
#submitButton {
margin-top: 2em;
margin-bunn: 2em;
bakgrunnsfarge: # 08e5ff;
grense: 0px;
skriftvekt: fet;
}
#refreshButton {
bakgrunnsfarge: # 08e5ff;
grense: 0px;
skriftvekt: fet;
}
#tekstboks {
høyde: 25px;
}
.incorrectCaptcha {
farge: # FF0000;
}
.correctCaptcha {
farge: # 7FFF00;
}

Legg til eller fjern CSS-egenskaper fra denne koden i henhold til dine preferanser. Du kan også gi et elegant utseende til skjemabeholderen ved hjelp av CSS box-shadow-egenskap.

JavaScript CAPTCHA-kode

JavaScript brukes til å legge til funksjonalitet til en ellers statisk webside. Bruk følgende kode for å legge til full funksjonalitet i CAPTCHA-valideringsskjemaet:

// document.querySelector () brukes til å velge et element fra dokumentet ved hjelp av ID-en
la captchaText = document.querySelector ('# captcha');
la userText = document.querySelector ('# textBox');
la submitButton = document.querySelector ('# submitButton');
la output = document.querySelector ('# output');
la refreshButton = document.querySelector ('# refreshButton');
// alphaNums inneholder tegnene du vil opprette CAPTCHA med
la 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'];
la tommeArr = [];
// Denne sløyfen genererer en tilfeldig streng på 7 tegn ved bruk av alphaNums
// Videre vises denne strengen som en CAPTCHA
for (la i = 1; i <= 7; i ++) {
emptyArr.push (alphaNums [Math.floor (Math.random () * alphaNums.length)]);
}
captchaText.innerHTML = emptyArr.join ('');
// Denne hendelseslytteren stimuleres når brukeren trykker på "Enter" -knappen
// "Riktig!" eller "Feil, prøv igjen" meldingen er
// vises etter validering av inngangsteksten med CAPTCHA
userText.addEventListener ('keyup', funksjon (e) {
// Nøkkelkodeverdien for "Enter" -knappen er 13
hvis (e.keyCode 13) {
hvis (userText.value captchaText.innerHTML) {
output.classList.add ("correctCaptcha");
output.innerHTML = "Riktig!";
} annet {
output.classList.add ("incorrectCaptcha");
output.innerHTML = "Feil, prøv igjen";
}
}
});
// Denne hendelseslytteren stimuleres når brukeren klikker på "Send" -knappen
// "Riktig!" eller "Feil, prøv igjen" meldingen er
// vises etter validering av inngangsteksten med CAPTCHA
submitButton.addEventListener ('klikk', funksjon () {
hvis (userText.value captchaText.innerHTML) {
output.classList.add ("correctCaptcha");
output.innerHTML = "Riktig!";
} annet {
output.classList.add ("incorrectCaptcha");
output.innerHTML = "Feil, prøv igjen";
}
});
// Denne hendelseslytteren stimuleres når brukeren trykker på "Oppdater" -knappen
// En ny tilfeldig CAPTCHA genereres og vises etter at brukeren klikker på "Oppdater" -knappen
refreshButton.addEventListener ('klikk', funksjon () {
userText.value = "";
la refreshArr = [];
for (la j = 1; j <= 7; j ++) {
refreshArr.push (alphaNums [Math.floor (Math.random () * alphaNums.length)]);
}
captchaText.innerHTML = refreshArr.join ('');
output.innerHTML = "";
});

Nå har du et fullt funksjonelt CAPTCHA-valideringsskjema! Hvis du vil se på hele koden, kan du klone GitHub-depot for dette CAPTCHA-Validator-prosjektet. Etter kloning av depotet, kjør du HTML-filen, og du får følgende utdata:

Når du skriver inn riktig CAPTCHA-kode i inntastingsboksen, vises følgende utdata:

Når du skriver inn feil CAPTCHA-kode i inndataboksen, vises følgende utdata:

Gjør nettstedet ditt sikkert med CAPTCHA

Tidligere har mange organisasjoner og virksomheter lidd store tap som databrudd, spamangrep osv. som et resultat av ikke å ha CAPTCHA-skjemaer på sine nettsteder. Det anbefales på det sterkeste å legge til CAPTCHA på nettstedet ditt, da det legger til et sikkerhetslag for å forhindre nettstedet fra nettkriminelle.

Google lanserte også en gratis tjeneste kalt "reCAPTCHA" som hjelper til med å beskytte nettsteder mot spam og misbruk. CAPTCHA og reCAPTCHA virker like, men de er ikke helt det samme. Noen ganger føles CAPTCHAs frustrerende og vanskelig å forstå for mange brukere. Selv om det er en viktig grunn til at de er vanskelige.

Hvordan fungerer CAPTCHA og hvorfor er de så vanskelige?

CAPTCHAs og reCAPTCHAs forhindrer spam. Hvordan fungerer de? Og hvorfor synes du CAPTCHAer er så tøffe å løse?

Les Neste

Om forfatteren