Danas su CAPTCHA sastavni dio sigurnosti web stranica. Milijuni CAPTCHA testova svakodnevno se dovršavaju na mreži.

Ako niste implementirali CAPTCHA provjeru valjanosti na svojoj web stranici, to bi vam moglo stvoriti veliki problem postavljajući vas kao metu pošiljateljima neželjene pošte.

---

---

Evo svega što trebate znati o CAPTCHA -ovima i kako ih možete jednostavno implementirati na svoju web stranicu koristeći HTML, CSS i JavaScript.

Što je CAPTCHA?

CAPTCHA je kratica za 'Potpuno automatizirani javni Turingov test koji govori računalima i ljudima odvojeno.' Ovaj su izraz 2003. skovali Luis von Ahn, Manuel Blum, Nicholas J. Hopper i John Langford. To je vrsta testa izazova-odgovora koji se koristi za utvrđivanje je li korisnik čovjek ili nije.

CAPTCHA dodaju sigurnost web stranicama pružajući izazove koje je robotima teško izvesti, ali relativno lako ljudima. Na primjer, identificiranje svih slika automobila iz niza više slika teško je za robote, ali dovoljno jednostavno za ljudske oči.

Ideja o CAPTCHA -i potječe iz Turingova testa. Turingov test je metoda kojom se provjerava može li stroj razmišljati kao čovjek ili ne. Zanimljivo je da se CAPTCHA test može nazvati 'obrnutim Turingovim testom' jer u ovom slučaju računalo stvara test koji izaziva ljude.

Zašto je vašoj web stranici potrebna CAPTCHA provjera?

CAPTCHA se uglavnom koriste za sprječavanje robota da automatski šalju obrasce sa neželjenom poštom i drugim štetnim sadržajem. Čak ga i tvrtke poput Googlea koriste kako bi spriječile njihov sustav od neželjenih napada. Evo nekih razloga zašto vaša web stranica ima koristi od provjere valjanosti CAPTCHA -e:

---

---

• CAPTCHA -e pomažu u sprječavanju hakera i robota u neželjenoj pošti registracijskim sustavima stvaranjem lažnih računa. Ako nisu spriječeni, te račune mogu koristiti u zle svrhe.
• CAPTCHA-i mogu zabraniti napade prijavljivanja grubom silom s vaše web stranice koje hakeri pokušavaju prijaviti pomoću tisuća lozinki.
• CAPTCHA -i mogu ograničiti robote na neželjeno slanje neželjene pošte u odjeljak za recenzije davanjem lažnih komentara.
• CAPTCHA -e pomažu u sprječavanju inflacije karata jer neki ljudi kupuju veliki broj karata za preprodaju. CAPTCHA čak može spriječiti lažne registracije na besplatne događaje.
• CAPTCHA -i mogu ograničiti cyber prevarante na slanje neželjene pošte blogovima sa sumnjivim komentarima i vezama do štetnih web stranica.

Postoji mnogo više razloga koji podržavaju integriranje CAPTCHA provjere valjanosti u vašu web stranicu. To možete učiniti pomoću sljedećeg koda.

zašto moja traka zadataka ne radi windows 10

HTML CAPTCHA kôd

HTML ili jezik za označavanje hiperteksta opisuje strukturu web stranice. Za strukturiranje CAPTCHA obrasca za provjeru valjanosti upotrijebite sljedeći HTML kôd:

---

---










captcha text



Refresh








Ovaj se kod uglavnom sastoji od 7 elemenata:

• : Ovaj se element koristi za prikaz naslova CAPTCHA obrasca.

• : Ovaj se element koristi za prikaz CAPTCHA teksta.
• - Ovaj se element koristi za stvaranje okvira za unos za upis CAPTCHA.
• : Ovaj gumb šalje obrazac i provjerava jesu li CAPTCHA i otkucani tekst isti ili nisu.
• : Ovaj gumb se koristi za osvježavanje CAPTCHA -e.
• : Ovaj se element koristi za prikaz izlaza prema unesenom tekstu.
• : Ovo je nadređeni element koji sadrži sve ostale elemente.

CSS i JavaScript datoteke povezane su s ovom HTML stranicom putem i elemenata. Morate dodati veza oznaka unutar glava oznaka i skripta oznaka na kraju tijelo .

Ovaj kôd također možete integrirati s postojećim oblicima vaše web stranice.

Povezano: HTML Essentials Cheat Sheet: oznake, atributi i još mnogo toga

CSS CAPTCHA kod

CSS ili Cascading Style Sheets koristi se za oblikovanje HTML elemenata. Za oblikovanje gornjih HTML elemenata upotrijebite sljedeći CSS kôd:

@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;
}

Dodajte ili uklonite CSS svojstva iz ovog koda prema vašim željama. Kontejneru obrasca također možete dati elegantan izgled pomoću CSS box-shadow svojstvo .

JavaScript CAPTCHA kôd

JavaScript koristi se za dodavanje funkcionalnosti inače statičnoj web stranici. Upotrijebite sljedeći kôd za dodavanje potpune funkcionalnosti u obrazac za provjeru 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 = '';
});


Sada imate potpuno funkcionalan obrazac za provjeru CAPTCHA -e! Ako želite pogledati cijeli kod, možete ga klonirati GitHub spremište ovog CAPTCHA-Validator projekta . Nakon kloniranja spremišta, izvedite HTML datoteku i dobit ćete sljedeći izlaz:

najjeftiniji način da nabavite Windows 10

Kad u okvir za unos unesete ispravan CAPTCHA kôd, prikazat će se sljedeći izlaz:

Kad u okvir za unos unesete bilo koji pogrešan CAPTCHA kôd, prikazat će se sljedeći izlaz:

Učinite svoju web stranicu sigurnom pomoću CAPTCHA -a

U prošlosti su mnoge organizacije i poduzeća pretrpjele velike gubitke poput kršenja podataka, neželjenih napada itd. Zbog toga što nemaju CAPTCHA obrasce na svojim web stranicama. Preporučuje se dodavanje CAPTCHA -e na vašu web stranicu jer dodaje sigurnosni sloj kako bi spriječio web -lokaciju od cyber -kriminalaca.

Google je također pokrenuo besplatnu uslugu pod nazivom 'reCAPTCHA' koja pomaže u zaštiti web stranica od neželjene pošte i zlouporabe. CAPTCHA i reCAPTCHA izgledaju slično, ali nisu sasvim ista stvar. Ponekad se CAPTCHA -e osjećaju frustrirajuće i teško razumljive za mnoge korisnike. Iako, postoji važan razlog zašto su otežani.

Udio Udio Cvrkut E -pošta Kako funkcioniraju CAPTCHA -e i zašto su toliko teške?

CAPTCHA i reCAPTCHA sprečavaju neželjenu poštu. Kako oni rade? I zašto smatrate da je CAPTCHA -e tako teško riješiti?

Pročitajte Dalje Povezane teme

• Programiranje
• HTML
• JavaScript
• CSS

O autoru Yuvraj Chandra(Objavljeno 60 članaka)

Yuvraj je student preddiplomskog studija Računarstva na Sveučilištu u Delhiju u Indiji. Oduševljen je Full Stack web razvojem. Kad ne piše, istražuje dubinu različitih tehnologija.

Više od Yuvraja Chandre

Pretplatite se na naše obavijesti

Pridružite se našem biltenu za tehničke savjete, recenzije, besplatne e -knjige i ekskluzivne ponude!

Kliknite ovdje za pretplatu