All geek questions in one place

How to create a simple javascript / jquery captcha client side?

How to create a simple javascript / jquery captcha client side?

+5
source share
10 answers

Why don't you use reCAPTCHA ? It is free, very efficient, and provides accessibility functionality.

+10
source

This can be done using HTML and simple JavaScript code. Look at this:

function Captcha(){ var alpha = new Array('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'); var i; for (i=0;i<6;i++){ var a = alpha[Math.floor(Math.random() * alpha.length)]; var b = alpha[Math.floor(Math.random() * alpha.length)]; var c = alpha[Math.floor(Math.random() * alpha.length)]; var d = alpha[Math.floor(Math.random() * alpha.length)]; var e = alpha[Math.floor(Math.random() * alpha.length)]; var f = alpha[Math.floor(Math.random() * alpha.length)]; var g = alpha[Math.floor(Math.random() * alpha.length)]; } var code = a + ' ' + b + ' ' + ' ' + c + ' ' + d + ' ' + e + ' '+ f + ' ' + g; document.getElementById("mainCaptcha").innerHTML = code document.getElementById("mainCaptcha").value = code } function ValidCaptcha(){ var string1 = removeSpaces(document.getElementById('mainCaptcha').value); var string2 = removeSpaces(document.getElementById('txtInput').value); if (string1 == string2){ return true; }else{ return false; } } function removeSpaces(string){ return string.split(' ').join(''); } 
 .capt{ background-color:grey; width: 300px; height:100px; } #mainCaptcha{ position: relative; left : 60px; top: 5px; } #refresh{ position:relative; left:230px; width:30px; height:30px; bottom:45px; background-image: url(rpt.jpg); } #txtInput, #Button1{ position: relative; left:40px; bottom: 40px; } 
 <link rel="stylesheet" type="text/css" href="estilo.css" /> <script type="text/javascript" src="script.js"></script> <body onload="Captcha();"> <div class="capt"> <h2 type="text" id="mainCaptcha"></h2> <p><input type="button" id="refresh" onclick="Captcha();"/></p> <input type="text" id="txtInput"/> <input id="Button1" type="button" value="Check" onclick="alert(ValidCaptcha());"/> </div> </body>
+6
source

Where are you ;)

 var captchaText; $(function() { var pre = $('#captcha'); captchaText = pre.text(); pre.text(''); var lines = ['', '', '', '', ''] for (var ixLetter = 0; ixLetter < captchaText.length; ixLetter++) { var letter = captchaText.substr(ixLetter, 1); var letterLines = letters[letter]; for (var ix = 0; ix < 5; ix++) { lines[ix] = lines[ix] + ' ' + letterLines[ix]; } } for (var ix = 0; ix < 5; ix++) { pre.append(lines[ix] + '\n'); } }); function check() { if ($('#captchaCheck').val() == captchaText) { alert('you are probably human'); } else { alert('you probably made a mistake. Don\'t worry. To err is also human.'); } } var letters = { h: [ 'HH HH', 'HH HH', 'HHHHHH', 'HH HH', 'HH HH' ], i: [ 'II', 'II', 'II', 'II', 'II' ] // etc } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <pre id="captcha">hi</pre> Please type what you see: <input id="captchaCheck" /> <input type="button" value="Check" onclick="check()" />
+3
source

Client cards do not provide protection created by the server, because the server cannot check whether the resolved error is resolved correctly.

+2
source

It's impossible.

You can create something similar to CAPTCHA, but it will only work when it is not needed, i.e. when the page is displayed in the browser. When necessary, it will not be launched, since a program trying to break will not run the client side of the script.

+1
source

if your goal is to simply reject most of the bots, you can leave with a simple script that selects 2 numbers in random order and asks the user to add them.

0
source

I agree with all the comments that the client’s captcha is fundamentally wrong, and I don’t know how difficult the obstacles should be to reduce any amount of spam ...

To get an idea of ​​what you're up against, check out xRumer and GSA in action: YouTube: xEvil vs GSA Captcha Breaker

The software is also capable of collecting and decrypting artificial intelligence, such as security issues (that is, what is 2 + 2?), Often used by forums during registration. Starting with the latest version of XRumer, software is able to collect such security issues from multiple sources and overcome them much more effectively.

wikipedia.org/wiki/XRumer

Recommendations:

So, aside, here is a trivial alternative using HTML5 validation, which is probably as inefficient as the other posts here! Allegedly, spam bots simply added formnovalidate before submitting and identified the bait field.

 <form class="input"> <label for="number" class="title"> What is three plus four? </label> <br> <input name="number" required="required" pattern="(7|seven)" oninvalid="this.setCustomValidity('Sorry, please enter the correct answer')" oninput="this.setCustomValidity('')" > <!-- Bonus honeypot field, hidden from the user. The server should discard this response if it contains any input --> <input name="decoy" style="display: none;" /> <input type="submit"> </form>
0
source 
  function Captcha(){ var alpha = new Array('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'); var i; for (i=0;i<6;i++){ var a = alpha[Math.floor(Math.random() * alpha.length)]; var b = alpha[Math.floor(Math.random() * alpha.length)]; var c = alpha[Math.floor(Math.random() * alpha.length)]; var d = alpha[Math.floor(Math.random() * alpha.length)]; var e = alpha[Math.floor(Math.random() * alpha.length)]; var f = alpha[Math.floor(Math.random() * alpha.length)]; var g = alpha[Math.floor(Math.random() * alpha.length)]; } var code = a + ' ' + b + ' ' + ' ' + c + ' ' + d + ' ' + e + ' '+ f + ' ' + g; document.getElementById("mainCaptcha").innerHTML = code document.getElementById("mainCaptcha").value = code } function ValidCaptcha(){ var string1 = removeSpaces(document.getElementById('mainCaptcha').value); var string2 = removeSpaces(document.getElementById('txtInput').value); if (string1 == string2){ return true; }else{ return false; } } function removeSpaces(string){ return string.split(' ').join(''); } <h1 This works pretty well. </h1>
0
source

try it

 <script type="text/javascript"> $('#submitcapt').click(function(){ var captval = "This will not do nothing"; $.ajax({ type : "POST", url : "externals/reCaptcha/ajaxaction.php", data : {loadval:captval}, success : function( msg ) { if(msg=="1"){ }else{ } } }) }); </script>

In ajaxaction.php enter the following code

 <?php session_start(); $val=$_POST['loadval']; $message= $_SESSION['random_number']; if($val==$message) { echo "1"; }else{ echo "2"; } ?>
-1
source 
 $(document).ready(function() { DrawCaptcha(); }); function refreshCap() { DrawCaptcha(); } function DrawCaptcha() { var a = Math.ceil(Math.random() * 10) + ''; var b = Math.ceil(Math.random() * 10) + ''; var c = Math.ceil(Math.random() * 10) + ''; var d = Math.ceil(Math.random() * 10) + ''; var e = Math.ceil(Math.random() * 10) + ''; var f = Math.ceil(Math.random() * 10) + ''; var g = Math.ceil(Math.random() * 10) + ''; var code = a + ' ' + b + ' ' + ' ' + c + ' ' + d + ' ' + e + ' ' + f + ' ' + g; var test = document.getElementById("ContentPlaceHolder1_txtCapcha").value = code; alert(test); } function ValidCaptcha() { var str1 = removeSpaces(document.getElementById('ContentPlaceHolder1_txtCapcha').value); var str2 = removeSpaces(document.getElementById('ContentPlaceHolder1_txtinputCapcha').value); if (str1 != str2) { alert("Properly enter the Security code."); document.getElementById('ContentPlaceHolder1_txtinputCapcha').focus() return false; } } function removeSpaces(string) { return string.split(' ').join(''); }
-1
source

Source: https://habr.com/ru/post/1314966/

More articles:


All Articles