🏂 😓 🎻 तंत्रिका नेटवर्क का उपयोग करके एक मूल कैप्चा बनाएं। भाग 1 📹 ⛲️ 👨‍👦‍👦

सभी प्रोग्रामर की तरह, हाल ही में मुझे अपनी खुद की "साइकिल" का आविष्कार करने की इच्छा हुई। तो अपने खुद के सीएमएस, फ्रेमवर्क आदि का आविष्कार कैसे करें। अब प्रासंगिक नहीं है, फिर मेरा टकटकी कैप्चा में बदल गया। ऐसा लगता है कि यहां आप मूल के साथ आ सकते हैं, जिसमें केवल कैप्चा मौजूद नहीं है: 2 डी-चित्र, 3 डी-चित्र, ध्वनि कैप्चा, "सही" तस्वीर का विकल्प। लेकिन मेरे साथ यह हुआ कि कैप्चा के निर्माता किसी तरह एकतरफा सोचते हैं, अर्थात्, हर कोई उपयोगकर्ता (और आमतौर पर परीक्षण क्षेत्र में) से एक विशिष्ट सही उत्तर प्राप्त करना चाहता है, और एक सरल रूप में, सर्वर को मूल डेटा के साथ उत्तर की तुलना करने की आवश्यकता होती है! इसलिए मैंने इस चीज़ को ठीक करने और अपना "स्मार्ट" कैप्चा बनाने का फैसला किया।

प्रविष्टि

मेरा विचार सरल है: सरल आकार, जैसे कि एक वर्ग, सर्कल, त्रिकोण, को कैप्चा के रूप में उपयोगकर्ता को प्रदर्शित करें, और उपयोगकर्ता से इन समान आकृतियों को खींचने के लिए कहें। बेशक, 3 आंकड़े पर्याप्त नहीं हैं, लेकिन उन्हें किसी भी मात्रा में संयुक्त और प्रदर्शित किया जा सकता है। और सर्वर पर, उपयोगकर्ता की प्रतिक्रिया को स्वीकार करें (और जैसा कि आप पहले से ही अनुमान लगाते हैं), इन चित्रों को तंत्रिका नेटवर्क का उपयोग करके पहचानें (इसीलिए मैंने केवल 3 आउटपुट का उपयोग करके तंत्रिका नेटवर्क की सुविधा के लिए 3 आंकड़ों पर रोक दिया है)।
दो बार सोचने के बिना, मैंने इस विचार को लागू करना शुरू कर दिया, और मैं इस प्रक्रिया का वर्णन लेखों में करने जा रहा हूं ...

कार्यान्वयन

चलो ग्राहक पक्ष से कार्यान्वयन शुरू करते हैं।
फैशन के लिए श्रद्धांजलि अर्पित करते हुए, मैं जावास्क्रिप्ट jQuery फ्रेमवर्क का उपयोग करूंगा, और मैं मानता हूं, यह हमारे कार्य को बहुत सुविधाजनक बनाएगा। कार्य को और सुविधाजनक बनाने के लिए ड्राइंग के लिए एक कंटेनर के रूप में उपयोग किया जाएगा।
चूंकि मैंने पहले ही कोड की सुंदरता और सुविधा के लिए, jQuery का उपयोग करने का फैसला किया है, हम सब कुछ प्लग-इन के रूप में व्यवस्थित करेंगे, और एक ही समय में, यह अनुभव शुरुआती के लिए उपयोगी होगा। अपने अंतिम रूप में, यह कुछ इस तरह दिखाई देगा:

<!DOCTYPE html> <html> <head> <title>Demo NNCaptcha</title> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" src="nnCaptcha.js"></script> </head> <body> <div id="nnCaptcha"></div> <script type="text/javascript"> $(document).ready(function(){ //  $("#nnCaptcha").nnCaptcha(); }); </script> </body> </html>

चलो प्लगइन के लिए एक खाली "रिक्त" के साथ शुरू करते हैं।

 (function($) { //    var methods = { //   init:function(params) { var options = $.extend({}, defaults, params); } }; $.fn.nnCaptcha = function(method){ if (this.length != 1) { $.error('not 1 element!'); return; } //   if ( methods[method] ) { //    ,    //  ,       // this      return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 )); } else if ( typeof method === 'object' || ! method ) { //     ,    //    return methods.init.apply( this, arguments ); } else { //     $.error( ' "' + method + '"  ' ); } }; })(jQuery);

यहां jquery के लिए एक विशिष्ट प्लगइन है, जो आपको आंतरिक तरीकों को कॉल करने और उनके लिए पैरामीटर पास करने की अनुमति देता है, उदाहरण के लिए:

 $("#nnCaptcha").nnCaptcha('reset',1); //  reset   1 (   “”)

आइए हमारी मुख्य इनिट विधि लें। इसमें हम एन कॉलम के साथ एक तालिका बनाएंगे, और दो पंक्तियों में, शीर्ष पर हम चित्रों को प्रदर्शित करेंगे, और सबसे नीचे उपयोगकर्ता उन्हें खींचेगा। हम सभी आवश्यक हैंडलर लटकाते हैं और दस्तावेज़ के डोम में सब कुछ डालते हैं।

आइए एक टेबल बनाकर शुरुआत करें। मैंने आसान तरीका नहीं अपनाया (तैयार HTML कोड सम्मिलित करें), यह जानकर कि $ () फ़ंक्शन सक्षम है, मैंने मक्खी पर तालिका बनाई। परिणाम एक गैर-तुच्छ तरीका था जिसमें स्तंभों की एक चर संख्या के साथ एक तालिका बनाई गई थी:

  //     table this.append('<table class="tbCaptcha"><tbody></tbody></table>'); //   2   countCanvas  this.find("table.tbCaptcha").find('tbody') .append(function($){ var tr = $('<tr>'); for (i=0;i<countCanvas;i++) tr.append($('<td>') .append($('<img>') .attr('src', 'nnCaptcha.php?image=get') ) ) return tr; }($) ).append(function($){ var tr = $('<tr>'); for (i=0;i<countCanvas;i++) tr.append($('<td>') .append($('<canvas>') .attr('class', 'captcha') ) ) return tr; }($) );

मुझे उम्मीद है कि मेरी विधि किसी के लिए उपयोगी होगी, खासकर यदि आप कोड को समाप्त करते हैं ताकि किसी भी संख्या में लाइनें जोड़ी जा सकें।

अब सबसे दिलचस्प बात: कैनवास में आकर्षित करने की क्षमता को लागू करना।
मुख्य बात कैनवास संदर्भ वस्तु प्राप्त करना है:

 var ctx = canvas.getContext("2d");

और फिर रेखाएँ खींचने के लिए हमें केवल इन विधियों की आवश्यकता है:

 beginPath(); //         moveTo(x, y); //      lineTo(x, y); //       stroke(); //

यह केवल उन्हें सही ढंग से मूसडाउन, माउसअप, मूसमोव की घटनाओं में सम्मिलित करने के लिए रहता है, जो हम करते हैं, जिस तरह से, कुछ अन्य क्रियाएं करते हैं:

  //     canvas this.find("canvas.captcha").each(function(i) { this.width = width; this.height = height; var ctx = this.getContext("2d"); var elem = this; elCanvas[i] = elem; var drawing = false; pixCanvas[i] = createArrayPix(); //      $(this).bind("mousedown.nnCaptcha",function(e){ //    canvas var offset = $(elem).offset(); var x = e.pageX - offset.left; var y = e.pageY - offset.top; //      canvas pixCanvas[i][x][y] = 1; ctx.beginPath(); ctx.strokeStyle = options.selectedColor; ctx.lineWidth = options.selectedWidth; ctx.moveTo(x, y); drawing = true; elem.style.cursor = 'crosshair'; }); $(this).bind("mouseup.nnCaptcha",function(e){ if (drawing) { var offset = $(elem).offset(); var x = e.pageX - offset.left; var y = e.pageY - offset.top; ctx.lineTo(x, y); drawing = false; pixCanvas[i][x][y] = 1; } }); $(this).bind("mousemove.nnCaptcha",function(e){ if (drawing) { var offset = $(elem).offset(); var x = e.pageX - offset.left; var y = e.pageY - offset.top; ctx.lineTo(x, y); ctx.stroke(); ctx.moveTo(x, y); pixCanvas[i][x][y] = 1; } elem.style.cursor = 'crosshair'; }); });

अब हमारे प्लगइन का init तरीका तैयार है, ताकि सब कुछ काम करे, हम प्लगइन में वैश्विक चर और एक फ़ंक्शन जोड़ते हैं:

  //    var defaults = { selectedColor:'#000000',selectedWidth:1 }; var countCanvas = 3; var elCanvas = []; var width = 100; var height = 100; var pixCanvas = []; function createArrayPix(){ var a=new Array (width); for (i = 0; i < width; i++) { a[i]=new Array (height); for (j = 0; j < height; j++) { a[i][j] = 0; } } return a; }

मैं समझाऊंगा कि ये क्यों जोड़ते हैं। क्रियाएं तब होती हैं जब उपयोगकर्ता एक कैनवस में आ जाता है, सभी निर्देशांक जिसके साथ खींचा गया था (माउस चला गया) बाइनरी मैट्रिक्स में प्रवेश किया जाता है - pixCanvas [Ncanvas] [x] [y] ("1" - "ड्रा", "0" - समन्वय) कोई)
बेशक, इस विधि का उपयोग करके PNG में कैनवास में एक चित्र को सहेजना बहुत आसान था:

 canvas.toDataURL("image/png");

यह डेटा के रूप में, बेस 64 में कैनवास छवि देता है: एक URL जिसे सर्वर को भेजा जा सकता है और डीकोड किया जा सकता है, लेकिन यह पता चलता है कि सर्वर पर PNG छवि को अभी भी हमारे तंत्रिका नेटवर्क पर इनपुट प्राप्त करने के लिए संसाधित करने की आवश्यकता है।
क्लाइंट पक्ष पर बाइनरी मैट्रिक्स को तुरंत बनाना और इसे लगभग उसी तरह से सर्वर पर भेजना आसान है:

 ajax:function(n) { $.post("test.php", { matrix: JSON.stringify(pixCanvas[n]) } ); }

हालांकि, बेशक, आप अजाक्स के बिना कर सकते हैं - फॉर्म पर एक छिपा हुआ इनपुट बनाएं और वहां जैसन स्ट्रिंग डालें।
अब हम सभी प्लगइन कोड एक साथ जमा करते हैं:

 (function($) { //    var defaults = { selectedColor:'#000000',selectedWidth:1 }; var countCanvas = 3; var elCanvas = []; var width = 100; var height = 100; var pixCanvas = []; function createArrayPix(){ var a=new Array (width); for (i = 0; i < width; i++) { a[i]=new Array (height); for (j = 0; j < height; j++) { a[i][j] = 0; } } return a; } //    var methods = { //   init:function(params) { //  ,      var options = $.extend({}, defaults, params); //     table this.append('<table class="tbCaptcha"><tbody></tbody></table>'); //   2   countCanvas  this.find("table.tbCaptcha").find('tbody') .append(function($){ var tr = $('<tr>'); for (i=0;i<countCanvas;i++) tr.append($('<td>') .append($('<img>') .attr('src', 'nnCaptcha.php?image=get') ) ) return tr; }($) ).append(function($){ var tr = $('<tr>'); for (i=0;i<countCanvas;i++) tr.append($('<td>') .append($('<canvas>') .attr('class', 'captcha') ) ) return tr; }($) ); //     canvas this.find("canvas.captcha").each(function(i) { this.width = width; this.height = height; var ctx = this.getContext("2d"); var elem = this; elCanvas[i] = elem; var drawing = false; pixCanvas[i] = createArrayPix(); $(this).bind("mousedown.nnCaptcha",function(e){ var offset = $(elem).offset(); var x = e.pageX - offset.left; var y = e.pageY - offset.top; pixCanvas[i][x][y] = 1; ctx.beginPath(); ctx.strokeStyle = options.selectedColor; ctx.lineWidth = options.selectedWidth; ctx.moveTo(x, y); drawing = true; elem.style.cursor = 'crosshair'; }); $(this).bind("mouseup.nnCaptcha",function(e){ if (drawing) { var offset = $(elem).offset(); var x = e.pageX - offset.left; var y = e.pageY - offset.top; ctx.lineTo(x, y); drawing = false; pixCanvas[i][x][y] = 1; } }); $(this).bind("mousemove.nnCaptcha",function(e){ if (drawing) { var offset = $(elem).offset(); var x = e.pageX - offset.left; var y = e.pageY - offset.top; ctx.lineTo(x, y); ctx.stroke(); ctx.moveTo(x, y); pixCanvas[i][x][y] = 1; } elem.style.cursor = 'crosshair'; }); }); return this; }, test:function(n,x,y) { alert(pixCanvas[n][x][y]); }, ajax:function(n) { $.post("test.php", { name: JSON.stringify(pixCanvas[n]) } ); }, //  reset:function(n) { //alert(n); if (n !== undefined){ var c = elCanvas[n]; var ctx = c.getContext("2d"); ctx.clearRect(0, 0, c.width, c.height); pixCanvas[n] = createArrayPix(); } else { $.each(elCanvas,function(i) { var ctx = this.getContext("2d"); ctx.clearRect(0, 0, this.width, this.height); pixCanvas[i] = createArrayPix(); }); } } }; $.fn.nnCaptcha = function(method){ if (this.length != 1) { $.error('not 1 element!'); return; } //   if ( methods[method] ) { //    ,    //  ,       // this      return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 )); } else if ( typeof method === 'object' || ! method ) { //     ,    //   init return methods.init.apply( this, arguments ); } else { //     $.error( ' "' + method + '"  ' ); } }; })(jQuery);

बेशक, अभी भी "कच्चा" है, और मैं लगातार सब कुछ खत्म कर रहा हूं, लेकिन मुझे लगता है कि विचार स्पष्ट है। आप यहां प्लगइन का लाइव काम देख सकते हैं। इस कोड का एक और "दोष" यह है कि यह केवल वर्तमान और आधुनिक ब्राउज़रों में काम करता है (उदाहरण के लिए, एक ही कैनवास या "JSON.stringify ()") के कारण, हालांकि यदि आप चाहते हैं कि आप IE8 जैसे ब्राउज़रों के लिए सब कुछ आसानी से रीमेक कर सकते हैं ...

सामान्यकरण

जैसा कि आगे के अभ्यास से पता चला है, 100x100 वर्ग का विकल्प तंत्रिका नेटवर्क के इनपुट की संख्या देता है - 10,000, जो कि बहुत अधिक है। सबसे अधिक संभावना है, कैप्चा के लिए वर्ग छोटा होगा (हाँ, कम से कम 50x50), सब कुछ सर्वर पर प्रसंस्करण की गति पर निर्भर करेगा ...

Google में तंत्रिका नेटवर्क के कार्यान्वयन के रूप में, मुझे "ANN - कृत्रिम तंत्रिका नेटवर्क PHP 5.x के लिए" मिला।
पहले यह नामस्थानों का उपयोग करके PHP 5.3 में "लाइव" उदाहरण के कार्यान्वयन का उपयोग करने के लिए दिलचस्प था, लेकिन जब मैंने 10 इनपुट और 3 आउटपुट के साथ एक नेटवर्क को प्रशिक्षित करने की कोशिश की, तो 10 मिनट से अधिक समय लगा, मैं कल्पना कर सकता हूं कि वास्तविक नमूना कितना प्रशिक्षित होगा। सामान्य तौर पर, आपको अपनी बाइक को यहां पुन: स्थापित करना पड़ सकता है। बेशक, आप सभी के लिए प्रसिद्ध FANN लाइब्रेरी ले सकते हैं, लेकिन सबसे पहले यह PHP 5.3 के साथ शायद ही दोस्त है, दूसरे, विंडोज पर कोई संकलित समाधान नहीं हैं (और यह वास्तव में आवश्यक नहीं है), और होस्टिंग प्रदाता इसे होस्टिंग के लिए स्थापित नहीं करता है, लेकिन अभी तक कोई वीडीएस नहीं है। और यदि आप कैप्चा वितरित करते हैं, तो FANN को आवश्यकताओं में रखना होगा।
हालांकि सर्वर पर PHP को बांधना आवश्यक नहीं है, अन्य सर्वर भाषाओं का लाभ पर्याप्त है ...
लेकिन हमारे कैप्चा पर वापस, यह स्पष्ट है कि इस रूप में यह बॉट्स के साथ आसानी से टूट जाता है - बस सर्वर को 3 "सही" बाइनरी मैट्रिसेज भेजें (मैं आंकड़ा पहचान का उल्लेख नहीं करता हूं, क्योंकि कार्य काफी सरल है)। यद्यपि, बेशक, सर्वर पर, आप परिणाम की संभावनाओं को 0.95 से अधिक से बाहर कर सकते हैं (उपयोगकर्ताओं को पिकासो को आकर्षित करने की संभावना नहीं है और केवल एक माउस के साथ सही ढंग से बॉट आकर्षित कर सकते हैं), लेकिन विश्वसनीयता के लिए, मुझे लगता है कि हमें कुंजी फ़ंक्शन के साथ मैट्रिक्स को एन्क्रिप्ट करने की आवश्यकता है जो सर्वर जारी करेगा ( और जरूरी नहीं कि एक ही), स्वाभाविक रूप से एक अपठनीय और पैक रूप में।
अब, भले ही बॉट छवि को सही ढंग से पहचानता है, लेकिन यह सर्वर को सही बाइनरी मैट्रिक्स नहीं भेज पाएगा!
तो फिर तुम बहुत अधिक के साथ आ सकते हैं:

तैयार किए जाने वाले आंकड़ों की विकृति;
विभिन्न ब्लॉकों में अलग-अलग रंग;
ख़त्म करने से सत्र सुरक्षा;
नेस्टेड आकृतियाँ (और आपको एक आकर्षित करने की आवश्यकता है);

और अन्य विशेषताएं।
बेशक, यह पहले से ही है कि उत्तर का गठन जावास्क्रिप्ट द्वारा किया गया है, आदिम स्पैम बॉट्स से कम से कम कुछ सुरक्षा पहले से ही है। जब तक कोई व्यक्ति इस विशेष कैप्चा को हैक करने में उद्देश्यपूर्ण रूप से शामिल नहीं हो जाता है, तब तक यह संभावना नहीं है कि कुछ स्पैम बॉट इसे बायपास करेंगे, खासकर यदि आप क्रिप्टो एल्गोरिथ्म के हैकिंग प्रतिस्थापन / गणना के लिए प्रदान करते हैं (जो आप एक महान आविष्कार कर सकते हैं)।

निष्कर्ष

लेख निश्चित रूप से क्रूड निकला, फिर भी कैप्चा लिखने की प्रक्रिया अभी भी जारी है और मेरे दिमाग में नए विचार लगातार उठ रहे हैं। इसलिए यह लेख निश्चित रूप से अंतिम नहीं है, और मैं कैप्चा, "सही" कार्यान्वयन, साथ ही इसे हैक करने के तरीकों पर सुरक्षा को मजबूत करने के लिए आपकी टिप्पणियों और सुझावों को सुनने के लिए तैयार हूं।

कैप्चा पर PS चित्र सिर्फ एक उदाहरण के लिए Paint'e में तैयार किए गए हैं! पीढ़ी के एल्गोरिथ्म का अभी तक आविष्कार नहीं हुआ है।

तंत्रिका नेटवर्क का उपयोग करके एक मूल कैप्चा बनाएं। भाग 1

प्रविष्टि

कार्यान्वयन

सामान्यकरण

निष्कर्ष

More articles: