{"id":63521,"date":"2024-05-04T03:01:04","date_gmt":"2024-05-03T17:01:04","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=63521"},"modified":"2024-05-04T14:40:45","modified_gmt":"2024-05-04T04:40:45","slug":"colour-coded-form-captcha-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/colour-coded-form-captcha-tutorial\/","title":{"rendered":"Colour Coded Form Captcha Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/colour_code_captcha.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Colour Coded Form Captcha Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/colour_code_captcha.gif\" title=\"Colour Coded Form Captcha Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Colour Coded Form Captcha Tutorial<\/p><\/div>\n<blockquote><p>\nAre you human?\n<\/p><\/blockquote>\n<p>This is not such a silly question, in the online world.  There are ways to access software with no real human intervention among &#8230;<\/p>\n<ul>\n<li>legitimately<\/li>\n<li>usefully<\/li>\n<li>unintendedly<\/li>\n<li>maliciously<\/li>\n<\/ul>\n<p> &#8230; and if you design a web application looking after details entered by a user, often you want to ensure the processing is being done by a real user, in the first two ways.<\/p>\n<p>Years ago, with this in mind, came <a target=_blank title='CAPTCHA information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/CAPTCHA'>CAPTCHA<\/a> logic &#8230;<\/p>\n<blockquote cite='https:\/\/en.wikipedia.org\/wiki\/CAPTCHA'><p>\nA CAPTCHA (\/\u02c8k\u00e6p.t\u0283\u0259\/ KAP-ch\u0259) is a type of challenge\u2013response test used in computing to determine whether the user is human in order to deter bot attacks and spam.\n<\/p><\/blockquote>\n<p>Those ones with the segmented images and you are asked to click in all parts containing a bike, for instance, yours truly finds very tricky.  Yes, today&#8217;s idea from us is a lot simpler.  It just involves &#8230;<\/p>\n<ul>\n<li>colour coding<\/li>\n<li>a Dutch artistic genius &#8230; <a target=_blank title='Piet Mondrian information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Piet_Mondrian'>Piet Mondrian<\/a> &#8230;<\/li>\n<li><a target=_blank href='https:\/\/pixabay.com\/illustrations\/mondrian-red-blue-yellow-1504681\/'>Pixabay<\/a>&#8216;s access to that genius &#8230; thanks, all concerned &#8230;<\/li>\n<li>a love of simplicity (and mostly, primary colours) &#8230;<\/li>\n<li>HTML<sub>5<\/sub> <a target=_blank title='HTML Canvas element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ref_canvas.asp'>canvas<\/a> element &#8230; especially it&#8217;s method &#8230;<\/li>\n<li><a target=_blank title='HTML Canvas element getImageData method information from w3schools' href='https:\/\/www.w3schools.com\/tags\/canvas_getimagedata.asp'>getImageData()<\/a> method<\/li>\n<\/ul>\n<p> &#8230; allowing us to scrutinize image pixel colours at a clicked position.  And just in case users are colour blind, we diss any colour names and use background comparison question reasoning in the code.<\/p>\n<p>As seemingly silly as this sounds, it&#8217;s insertion into an HTML webpage <a target=_blank title='HTML form element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_form.asp'>form<\/a> element&#8217;s <a target=_blank title='Javascript onsubmit event information from W3schools' href='https:\/\/www.w3schools.com\/tags\/ev_onsubmit.asp'><i>onsubmit<\/i><\/a> event logic (and we found out, we needed to force an <a target=_blank title='HTML input type=submit button information from W3schools' href='https:\/\/www.w3schools.com\/tags\/att_input_type_submit.asp'>input type=submit<\/a> button, if not there), is an extra step to deter processes not being run by a real user accessing the form.<\/p>\n<p>Today, we&#8217;ve supplied a really simple parent overseer <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/colour_code_captcha.html_GETME\">colour_code_captcha.html<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/colour_code_captcha.html\">example usage<\/a> (that just writes a personalized <font size=1>(but <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=cfNzZre-sIU'>not gift wrapped<\/a>, alas)<\/font> welcome message near the top of the webpage)<\/a> &#8230;<\/p>\n<p><code><br \/>\n&lt;html&gt;<br \/>\n&lt;head&gt;<br \/>\n<font color=blue>&lt;script type='text\/javascript' src='\/\/www.rjmprogramming.com.au\/colour_code_captcha.js' defer&gt;&lt;\/script&gt;<\/font><br \/>\n&lt;script type='text\/javascript'&gt;<br \/>\n var fname=location.search.split('fname=')[1] ? decodeURIComponent(location.search.split('fname=')[1].split('&')[0]) : \"\";<br \/>\n var lname=location.search.split('lname=')[1] ? decodeURIComponent(location.search.split('lname=')[1].split('&')[0]) : \"\";<br \/>\n&lt;\/script&gt;<br \/>\n&lt;\/head&gt;<br \/>\n&lt;body onload=\"if ((fname + lname).trim() != '' && document.referrer.indexOf('\/colour_code_captcha.') != -1) { document.getElementById('welcome').innerHTML='&lt;h2&gt;Welcome to ' + fname + ' ' + lname + ' at ' + ('' + new Date()) + ' ...&lt;\/h2&gt;';  }\"&gt;<br \/>\n&lt;div id=welcome&gt;&lt;\/div&gt;<br \/>\n&lt;form data-onsubmit=\"return onsubmitreturn('');\" action='.\/colour_code_captcha.html' method=GET&gt;<br \/>\n&lt;input style=text placeholder=\"First name\" name=fname type=text&gt;&lt;\/input&gt;&lt;br&gt;<br \/>\n&lt;input style=text placeholder=\"Last name\" name=lname type=text&gt;&lt;\/input&gt;&lt;br&gt;<br \/>\n&lt;br&gt;&lt;input id=mysub type=submit value=\"Say hello ...\"&gt;&lt;\/input&gt;<br \/>\n&lt;\/form&gt;<br \/>\n&lt;\/body&gt;<br \/>\n&lt;\/html&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; of that <font color=blue>one external Javascript script<\/font> tool doing just about all the CAPTCHA work insinuated into the parent webpage&#8217;s first such HTML form element found, via <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/colour_code_captcha.js_GETME\">colour_code_captcha.js<\/a> first draft external Javascript you can also try below &#8230;<\/p>\n<p><iframe src=\"https:\/\/www.rjmprogramming.com.au\/colour_code_captcha.html\" style=\"width:100%;height:1000px;\"><\/iframe><\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d63521' onclick='var dv=document.getElementById(\"d63521\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/captcha\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d63521' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Are you human? This is not such a silly question, in the online world. There are ways to access software with no real human intervention among &#8230; legitimately usefully unintendedly maliciously &#8230; and if you design a web application looking &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/colour-coded-form-captcha-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,37],"tags":[2367,174,184,1502,211,224,4742,4506,2988,400,409,452,2800,576,578,4419,590,599,652,3373,4740,830,861,870,1712,1918,1988,4741,997,2085,4743,1105,1114,2334,3536,2005,1319,1891,1358,1418],"class_list":["post-63521","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-answer","tag-button","tag-canvas","tag-captcha","tag-click","tag-colour","tag-colour-blindness","tag-colour-code","tag-defer","tag-event","tag-external-javascript","tag-form","tag-getimagedata","tag-html","tag-html5","tag-human","tag-image","tag-img","tag-javascript","tag-logic","tag-mondrian","tag-navigation","tag-onclick","tag-onload","tag-onsubmit","tag-pixel","tag-position","tag-primary-colours","tag-programming","tag-question","tag-real-person","tag-script","tag-security","tag-submit","tag-test","tag-tool","tag-tutorial","tag-user","tag-validation","tag-webpage"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/63521"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=63521"}],"version-history":[{"count":13,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/63521\/revisions"}],"predecessor-version":[{"id":63534,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/63521\/revisions\/63534"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=63521"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=63521"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=63521"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}