2010-07-07 3 views
4

간단한 자바 스크립트/jquery 클라이언트 측 captcha를 만드는 방법은 무엇입니까?간단한 자바 스크립트/jquery 클라이언트 측 captcha를 만드는 방법은 무엇입니까?

+3

클라이언트 측 CAPTCHA의 포인트는 무엇입니까 : 이것 좀있으세요?!? CAPTCHA의 모든 목적은 서버가 사람이 아닌 사람의 요청에 응답하지 못하게하는 것입니다. 무엇을 성취하려고합니까? 스팸 봇은 자바 스크립트를 실행하지 않습니다. 인간은. 스팸봇은 화를 내지 않을 것입니다. 인간도 할 수 있고 의지 할 수 있습니다. – Amadan

답변

10

reCAPTCHA을 사용하지 않으시겠습니까? 무료이며 매우 효율적이며 접근성 기능을 제공합니다.

여기
+6

아니요, reCapthca 서버의 종속이기 때문에 –

+0

나는이 상자가 가지고있는 정말 못생긴 모양으로 인해 그것을 고려하지 않습니다. 그러나 그들 자신의 captcha 클론을 구현하지 않는 이유가 없습니다.힌트를 주셔서 감사합니다 :) –

+2

그리고 reCAPTCHA는 구글에서 호스팅되고 있습니다. 구글과 다른 애플 리케이션은 구글에서 호스팅되고 있습니다. – kedomonzter

2

클라이언트 측 캡쳐는 해결 된 captcha가 올바르게 해결되었는지 확인할 수 없기 때문에 서버에서 생성 한 captcha를 보호하지 않습니다.

1

그건 불가능합니다.

보안 문자처럼 보이지만 필요없는 경우 (예 : 브라우저에 페이지가 표시 될 때)에만 실행할 수 있습니다. 필요한 경우 프로그램이 중단되어 클라이언트 측 스크립트가 실행되지 않으므로 실행되지 않습니다.

+0

"그건 불가능합니다." - 그런 강한 문구, 시간이 지나면 잘못된 시간을 증명하는 것 –

+1

@ Fabiano : 이와 같은 강한 구절은 이와 같은 경우에 보증됩니다. 클라이언트 측 보안 문자는 보안에 대한 잘못된 인식을 제공하기 때문에 실제로는 아무것도 아닌 것보다 실제로 악화되지만 실제 보안은 제공하지 않습니다. – Guffa

+0

귀하의 의견을보고 귀하의 의견에 동의합니다. 그러나 * 가능하지 않을 수도 있습니다 * 가능성이 있습니다, 맞지 않습니다 –

0

대부분의 로봇을 편향시키는 것이 목적이라면 무작위로 2 개의 숫자를 선택하고 사용자에게 추가하도록 요청하는 간단한 스크립트로 벗어날 수 있습니다.

+1

Ок, 스팸 봇이 form을 사용하는 경우 .Submit() 유효성 검사가 부도덕하지 않은 경우 form.Submit()보다 상태를 확인하는 방법 회원이 버튼을 클릭 할 때만 제출 hadree 경우 –

+1

바로 그게 모두가 지키는 것입니다. 말하기 - 그건 불가능합니다. 당신은'form.submit()'을 잡을 수 없다. 특히 웹 페이지를 구문 분석하고 POST 요청을 구성하며 프로그래밍 방식으로 서버에 접속하는 사람은 catch 할 수 없습니다 (브라우저없이 JavaScript없이). – Amadan

3

당신이)

<html> 
    <head> 
    <title>TestPage</title> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
    <script type="text/javascript"> 
    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> 
    </head> 
    <body> 
    <pre id="captcha">hi</pre> 
    Please type what you see: <input id="captchaCheck"/> <input type="button" value="Check" onclick="check()"/> 
    </body> 
</html> 
+0

이것은 재미 있지만 문자를 나타 내기 위해 실제 글자를 사용한다면 요점은 무엇입니까? : P 또한 그는 봇을 피하기 위해이 작업을 수행하여 양식의 제출 버튼과 href가 성공적인 captcha에 작성되어야한다고 생각합니다. –

+0

예 TODO입니다. –

+0

@Fabiano : 그것은 중요하지 않습니다. 농담. – Guffa

-1

이 ajaxaction.php에서

<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> 

다음 코드

<?php 
    session_start(); 
    $val=$_POST['loadval']; 
    $message= $_SESSION['random_number']; 
    if($val==$message) { 
     echo "1"; 
    }else{ 
     echo "2"; 
    } 
?> 
+1

OP가 PHP를 사용할 수 있는지 확실하지 않습니다. –

2

그것은 HTML과 함께 할 수에게 넣어주십시오 시도하십시오 간단한 자바 스크립트 코드.

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', 
 
\t \t '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', 
 
    \t  \t '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 
 
\t \t 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{ 
 
\t background-color:grey; 
 
\t width: 300px; 
 
\t height:100px; 
 
\t 
 
} 
 

 
#mainCaptcha{ 
 
\t position: relative; 
 
\t left : 60px; 
 
\t top: 5px; 
 
\t 
 
} 
 

 
#refresh{ 
 
\t position:relative; 
 
\t left:230px; 
 
\t width:30px; 
 
\t height:30px; 
 
\t bottom:45px; 
 
\t background-image: url(rpt.jpg); 
 
} 
 

 
#txtInput, #Button1{ 
 
\t position: relative; 
 
\t left:40px; 
 
\t 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>

+0

텍스트가 거기에서 _ 나온 것처럼 보일지라도 나는 봇에 비해 안전하다고는 생각하지 않습니다. –

+0

멋진 예제 덕분에 감사합니다. – Sarfaraj

-1
$(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(''); 
} 
관련 문제