The DeGoogling: Pure JavaScript reCaptcha Alternative To Validate Email
Published:
By: Kevin from CipherSanctum.comToday I'm going to show you a reCaptcha demo example you can use on your site
The goal is to Google free your life and boycott them, since they ban everyone for nearly anything now.... Minor disagreement with facts??? FEAR THE ALMIGHTY BAN HAMMER!!! __commence_sarcasm.exe__ And when armed with expert arguments like "do as I say, not as I do": celebrities, mainstream media, and Goolag all know what's best for us! __end_sarcasm.exe__. So boycott Goolag today!
Everything that follows is easy to abuse if the user knows JS, HTML, and CSS, because all of those things can be edited in the browser. So know that the following only demonstrates front end validation, and front end validation is very easy to beat. The only safe way to do validation safely is on the back end with values hidden to the user. The following only shows the PRINCIPLES of front end validation, and you ought to use these principles on your backend too. So if your backend function was expecting a name and email, all a user has to do is do a POST request to the url with those variables, and anything else it looks like it requires. Eventually, they can get it, and spam you with fake info (it's happened to me). And because your backend is likely different from mine, I will not show how to do that. Just know that front end validation is pretty much as useless as dust, except for actual users who are honest and good.
To fix this problem: your HTML on the front end and validation on the back end should have some extra hidden fields that add certain values from your database via AJAX once a user clicks an event handler. Add more than you need. They should act as honey pots for bots. Example: user clicks a button??? Start a timer, then get some random value from your database based on certain criteria (image?? random string?? etc). Once you get it, check certain checkboxes via JS, and fill out specific fields associated with the value you got. And when the POST request is made to your backend, make sure it sends those hidden values, and processes it based on your function, only sending an email if the correct fields and values from your database, etc. are included in the form.
So if the time the user spent filling out the form has a value instead of nothing, and you required a very specific hidden checkbox to be checked, and it is, with none others selected???? Then allow your function to go through. But if they were all checeked, or none of them checked, and having no values??? That's a red flag, and you'd make your function not go through. That way, you understand if the user is real (0.5 seconds spent vs 30 seconds, etc). All this extra stuff makes it much harder for bots to spam you, and thus ruin your mail servers reputation (which can be built back up over time, but it's not fun).
So remember to add in some extra check boxes and input fields. Add more than you need as honey pots for bots
Check it out
Test it
Note: this test has been changed slightly from the original code below, solely to demonstrate the main principle as many times as you want.
What is the largest number below??
Open source code
HTML and CSS
<!DOCTYPE html>
<html lang="en">
<head>
<title>How to JS Captcha</title>
<style>
#email_signup_form label { margin-top: 0px; display: none; }
.disp_none { display: none; }
</style>
</head>
<body>
<form id="email_signup_form" method="POST" action="">
<div id="users_email_info">
<h2>Sign up to my email list?</h2>
<p>
<label for="id_name">Name:</label>
<input type="text" name="email_subscriber_name" placeholder="optional name" maxlength="255">
</p>
<p>
<label for="user_email">Your Email:</label>
<input type="email" name="user_email" placeholder="your@email.com" maxlength="254" required="" id="user_email">
</p>
<button id="prove_human_button" class="submitbox" type="button">Prove I'm human</button>
</div>
<div id="captcha_container" class="disp_none">
<h2 class="margintop50px">What is the largest number below??</h2>
<p id="largest_num_container"></p>
<p>
<label for="id_name">Enter it here:</label>
<input type="number" name="email_largest_num_answer" placeholder="Highest number?" id="largest_num_answer">
</p>
</div>
<input id="submit_button" type="submit" class="submitbox disp_none" value="Submit!" disabled>
</form>
<script src="your_script file.js"></script>
</body>
</html>
JavaScript
var user_email = document.getElementById('user_email');
var prove_human_button = document.getElementById('prove_human_button');
var captcha_container = document.getElementById('captcha_container');
var largest_num_container = document.getElementById('largest_num_container');
var largest_num_answer = document.getElementById('largest_num_answer');
var submit_button = document.getElementById('submit_button');
var numbers = [];
function hide_prove_human_button_and_show_random_numbers() {
prove_human_button.classList.add('disp_none');
captcha_container.classList.remove('disp_none');
if (numbers.length >= 3) {
return 0;
} else {
for (var i = 0; i < 4; i++) {
var create_random_num = Math.round(Math.random() * 10000);
var span = document.createElement('span');
numbers.push(create_random_num);
span.innerHTML = create_random_num + ', ';
largest_num_container.appendChild(span);
};
};
};
function check_answer() {
if (Math.max.apply(null, numbers) === parseInt(largest_num_answer.value)) {
submit_button.classList.remove('disp_none');
submit_button.removeAttribute('disabled');
} else {
submit_button.classList.add('disp_none');
submit_button.setAttribute('disabled', 'disabled');
};
};
user_email.addEventListener('keypress', function(e) {
if (e.which == 13 || e.keyCode == 13) {
hide_prove_human_button_and_show_random_numbers();
};
});
prove_human_button.onclick = hide_prove_human_button_and_show_random_numbers;
largest_num_answer.onkeyup = check_answer;
largest_num_answer.onmouseup = check_answer;
Free yourself fren! You can do it! Every bit helps!
༼ຈل͜├┬┴┬┴ Psst! Hey kid, consider signing up to my email list and RSS feed, Brighteon / BitChute channels, or following me on my social medias.
--Kevin
