یک فرم اعتبار سنجی CAPTCHA با استفاده از HTML، CSS و جاوا اسکریپت ایجاد کنید

وب سایت های خود را با اعتبار سنجی CAPTCHA ایمن کنید.

CAPTCHA ها بخشی جدایی ناپذیر از امنیت وب سایت هستند. مردم روزانه میلیون ها تست CAPTCHA را به صورت آنلاین انجام می دهند.

اگر اعتبار CAPTCHA را در وب سایت خود پیاده سازی نکرده اید، می تواند مشکل بزرگی برای شما ایجاد کند و شما را به عنوان یک هدف برای ارسال کنندگان هرزنامه قرار دهد.

در اینجا همه چیزهایی است که باید در مورد CAPTCHA بدانید و چگونه می توانید آنها را به راحتی با HTML، CSS و جاوا اسکریپت پیاده سازی کنید.

CAPTCHA چیست؟

CAPTCHA مخفف «آزمون تورینگ عمومی کاملاً خودکار برای تشخیص رایانه‌ها و انسان‌ها» است. لوئیس فون آن، مانوئل بلوم، نیکلاس جی. هاپر و جان لنگفورد این اصطلاح را در سال 2003 ابداع کردند. این یک نوع تست چالش-پاسخ است که وب سایت ها برای تعیین اینکه آیا کاربر انسان است یا نه، از آن استفاده می کنند.

CAPTCHA ها با ارائه چالش هایی که برای ربات ها دشوار است اما برای انسان ها نسبتا آسان است، امنیت وب سایت ها را افزایش می دهند. به عنوان مثال، شناسایی تمام تصاویر یک ماشین از مجموعه ای از تصاویر متعدد برای ربات ها دشوار است، اما برای چشم انسان به اندازه کافی ساده است.

ایده CAPTCHA از آزمون تورینگ سرچشمه می گیرد. تست تورینگ روشی برای آزمایش این است که آیا یک ماشین می تواند مانند یک انسان فکر کند یا خیر. شما می توانید تست CAPTCHA را به عنوان یک “تست تورینگ معکوس” در نظر بگیرید زیرا انسان را به چالش می کشد تا ثابت کند کامپیوتر نیست.

چرا وب سایت شما به اعتبار سنجی CAPTCHA نیاز دارد؟

CAPTCHA ها به دلایل زیادی مهم هستند. می توانید از آنها برای جلوگیری از ارسال هرزنامه و محتوای مضر در فرم ها توسط ربات ها استفاده کنید. آنها همچنین می توانند به توقف برخی از اشکال حملات هک کمک کنند.

حتی شرکت هایی مانند گوگل از CAPTCHA برای محافظت از سیستم های خود در برابر حملات هرزنامه استفاده می کنند.

کد HTML CAPTCHA

کد مورد استفاده در این پروژه در a موجود است
مخزن GitHub
و استفاده از آن تحت مجوز MIT برای شما رایگان است. اگر می خواهید نگاهی به نسخه زنده این پروژه بیندازید، می توانید این را بررسی کنید
نسخه ی نمایشی
.

در این پروژه، CAPTCHA را به یک فرم HTML اضافه می کنید. برای افزودن CAPTCHA در HTML از کد زیر استفاده کنید:

<!DOCTYPE html>
<html>

<head>
    <linkrel="stylesheet"type="text/css"href="styles.css">
</head>

<body>
    <divclass="center">
        <h1id="captchaHeading">
            Captcha Validator Using HTML, CSS and JavaScript
        </h1>

        <divid="captchaBackground">
            <canvasid="captcha">captcha text</canvas>
            <inputid="textBox"type="text"name="text">

            <divid="buttons">
                <inputid="submitButton"type="submit">
                <buttonid="refreshButton"type="submit">Refresh</button>
            </div>

            <spanid="output"></span>
        </div>
    </div>

    <scriptsrc="script.js"></script>
</body>

</html>

این کد عمدتاً از هفت عنصر تشکیل شده است:

: این عنصر عنوان فرم CAPTCHA را نمایش می دهد.
: این عنصر متن CAPTCHA را نمایش می دهد.
– این عنصر یک کادر ورودی برای ورود به CAPTCHA ایجاد می کند.
: این دکمه فرم را ارسال می کند و بررسی می کند که آیا CAPTCHA و متن تایپ شده یکسان هستند یا خیر.
: این دکمه CAPTCHA را تازه می کند.
: این عنصر خروجی را پس از اعتبارسنجی متن وارد شده با CAPTCHA نمایش می دهد.
: این عنصر والد است که همه عناصر دیگر را در خود دارد.

این الگوی HTML CAPTCHA به ترتیب از طریق عناصر پیوند و اسکریپت به فایل‌های CSS و JavaScript پیوند می‌دهد. باید تگ لینک را داخل head و تگ اسکریپت را در انتهای بدنه اضافه کنید.

تگ ها و ویژگی های HTML زیادی وجود دارد، و به خاطر سپردن همه آنها می تواند بسیار سخت باشد. همیشه می‌توانید به یک برگه تقلب HTML مراجعه کنید تا به‌روزرسانی سریعی درباره برچسب‌ها و ویژگی‌های HTML دریافت کنید.

همچنین می توانید این کد را با فرم های موجود در وب سایت خود ادغام کنید.

کد CSS CAPTCHA

می‌توانید از CSS—Cascading Style Sheets—برای استایل دادن به عناصر HTML استفاده کنید. از کد CSS زیر برای استایل دادن به فرم اعتبار سنجی CAPTCHA استفاده کنید:

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

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

ویژگی های CSS را با توجه به اولویت خود از این کد اضافه یا حذف کنید. همچنین می توانید با استفاده از ویژگی CSS box-shadow ظاهری زیبا به ظرف فرم بدهید.

اعتبار سنجی CAPTCHA با استفاده از جاوا اسکریپت

برای افزودن قابلیت به یک صفحه وب باید از جاوا اسکریپت استفاده کنید. با واکشی ارجاع به عناصری که باید با آنها کار کنید، از جمله بوم و جعبه ورودی، شروع کنید. برای انجام این کار از تابع document.getElementById() استفاده کنید:

let captchaText = document.getElementById('captcha');
var ctx = captchaText.getContext("2d");
ctx.font = "30px Roboto";
ctx.fillStyle = "#08e5ff";

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

در اینجا، شما از document.getElementById() برای انتخاب یک عنصر از سند با شناسه آن استفاده می کنید.

برای تولید متن CAPTCHA، باید چند کاراکتر تصادفی انتخاب کنید، و روش‌های مختلفی وجود دارد که می‌توانید در پیش بگیرید. یکی از ساده ترین آنها این است که مجموعه ای از کاراکترهای بالقوه را در یک آرایه ذخیره کنید تا از بین آنها انتخاب کنید:

var captchaStr = "";

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'];

یک تابع برای تولید یک CAPTCHA جدید بنویسید. شما می توانید بلافاصله این تابع را برای ایجاد یک CAPTCHA هنگام بارگیری صفحه فراخوانی کنید. همچنین اگر کاربر دکمه Refresh را فشار دهد، می‌توانید برای بازسازی CAPTCHA آن را فراخوانی کنید.

با ساختن یک آرایه جدید از کاراکترهای تصادفی در alphaNums شروع کنید. تعداد ثابتی بار (در این مورد 7) حلقه بزنید و در هر تکرار یک کاراکتر تصادفی جدید از alphaNums اضافه کنید. سپس می توانید آرایه نهایی را به صورت رشته ای با استفاده از fillText روی بوم بنویسید:

functiongenerate_captcha() {
   let emptyArr = [];

   for (let i = 1; i <= 7; i++) {
       emptyArr.push(alphaNums[Math.floor(Math.random() * alphaNums.length)]);
   }

   captchaStr = emptyArr.join('');

   ctx.clearRect(0, 0, captchaText.width, captchaText.height);
   ctx.fillText(captchaStr, captchaText.width/4, captchaText.height/2);

   output.innerHTML = "";
}

generate_captcha();

توجه داشته باشید که این تابع بوم را پاک می‌کند و خروجی‌ها را بازنشانی می‌کند، که هر دوی آنها برای تازه کردن متن CAPTCHA مهم هستند.

با بررسی ورودی کاربر در برابر متن اصلی CAPTCHA، عملکرد اصلی را تکمیل کنید. برای این کار می توانید یک تابع تعریف کنید:


functioncheck_captcha() {
    if (userText.value === captchaStr) {
        output.className = "correctCaptcha";
        output.innerHTML = "Correct!";
    } else {
        output.className = "incorrectCaptcha";
        output.innerHTML = "Incorrect, please try again!";
    }
}

و در پاسخ به کلید Enter یا فشار دادن دکمه ارسال، آن تابع را فراخوانی کنید:

userText.addEventListener('keyup', function(e) {
    if (e.key === 'Enter') {
       check_captcha();
    }
});

submitButton.addEventListener('click', check_captcha);

در نهایت، عملکرد تازه سازی را مدیریت کنید. برای انجام این کار، فقط رویداد ارسال دکمه را به تابع generate_captcha() متصل کنید:

refreshButton.addEventListener('click', generate_captcha);

خروجی پروژه CAPTCHA Validator

اکنون یک فرم اعتبار سنجی CAPTCHA کاملاً کاربردی دارید. همچنین می توانید مخزن GitHub این پروژه CAPTCHA Validator را کلون کنید. پس از شبیه سازی مخزن، پروژه را اجرا کنید و خروجی زیر را مشاهده خواهید کرد:

هنگامی که کد CAPTCHA صحیح را در کادر ورودی وارد کنید، خروجی زیر نمایش داده می شود:

هنگامی که یک کد CAPTCHA نادرست را در کادر ورودی وارد می کنید، خروجی زیر را نمایش می دهد:

وب سایت خود را با CAPTCHA ایمن کنید

در گذشته، بسیاری از سازمان‌ها و کسب‌وکارها متحمل خسارات سنگینی مانند نقض داده‌ها، حملات هرزنامه‌ها و غیره شده‌اند که دلیل آن نبود فرم‌های CAPTCHA در وب‌سایت‌هایشان است. به شدت توصیه می شود که CAPTCHA را به وب سایت خود اضافه کنید، زیرا یک لایه امنیتی برای جلوگیری از ورود مجرمان سایبری به وب سایت اضافه می کند.

گوگل همچنین یک سرویس رایگان به نام “reCAPTCHA” راه اندازی کرد که به محافظت از وب سایت ها در برابر هرزنامه و سوء استفاده کمک می کند. CAPTCHA و reCAPTCHA به نظر شبیه هستند، اما کاملاً یکسان نیستند. گاهی اوقات CAPTCHA برای بسیاری از کاربران ناامید کننده و دشوار است. اگرچه، دلیل مهمی وجود دارد که چرا آنها سخت هستند.

مطلب مرتبط: چگونه یک URL را با استفاده از عبارات منظم اعتبار سنجی کنیم