Stories by Panditya A. Putra on Medium


<p>The CAPTCHA provided challenges nowadays are improved so much that even make it hard to perform for bots or humans themselves which suppose to relatively easy. Back in old times, let’s create a simple CAPTCHA that easy to implement without using libraries and easy to perform by users.</p>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*ZsuvNnyWA_MS75ke"><figcaption>Photo by <a href="https://unsplash.com/@agk42?utm_source=medium&amp;utm_medium=referral">Alex Knight</a> on <a href="https://unsplash.com/?utm_source=medium&amp;utm_medium=referral">Unsplash</a></figcaption></figure><h3>The Issues</h3>
<p>When I was working as a frontend developer, creating a company website there was a request from the client that they want a security check each time visitor of their website wants to contact them by submitting a form. So I guess a CAPTCHA is required, I was thinking about using <a href="https://www.google.com/recaptcha/about/">reCAPTCHA</a> or <a href="https://www.hcaptcha.com/">hCaptcha</a> but the project manager refused. The reason those kinds of CAPTCHA are too difficult when they are forced to select multiple images of something, they <strong>hate it</strong> so much.</p>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*HmhW04S7vbihjchR"><figcaption>Photo by <a href="https://unsplash.com/@punttim?utm_source=medium&amp;utm_medium=referral">Tim Gouw</a> on <a href="https://unsplash.com/?utm_source=medium&amp;utm_medium=referral">Unsplash</a></figcaption></figure><p>I started looking for alternatives that easy to perform and implemented as well in my project but didn’t found any libraries that I want. Instead of wasting time searching, I thought that it was the same effort as writing on my own a simple security check that relies on client form validation.</p>
<h3>Solution</h3>
<p>In this case, I'm using React, first take look at this block of code,</p>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*NazuI_ezs4OprumU8-oE5A.png"><figcaption>generate random string function</figcaption></figure><p>Yep, just creating a normal state hook and a function to generate a random string, simple right I can just put the security code string that generated by calling it inside useEffect hook on input element then validate it when submitting the form. That’s gonna work except since the user could easily copy-paste the code or even if the select event is disabled by using a script or forced style in CSS the code still visible with inspect element.</p>
<p>So let's make some improvement, rendering the generated random string as an image. It could be done something like this,</p>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*aTaLzx6uIxEEYfcSci_20w.png"><figcaption>rendering image element</figcaption></figure><p>That’s it, and then replace the input previously used as displaying code to an image element with the same id that is called inside the function. After that, I can continue creating the rest of the form and validate the code on submit function simply looks like this,</p>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*wU7sIDZ8BSNGQEkJYGqrMg.png"><figcaption>security code check on submit</figcaption></figure><p>It’s important to recall generate function after submit to rerender the image with a new security code, and that how it works.</p>
<p>Here the complete example with form,</p>
<a href="https://medium.com/media/e15d92c512766a1e425492cad1c3d25e/href">https://medium.com/media/e15d92c512766a1e425492cad1c3d25e/href</a><h3>Last Words</h3>
<p>Maybe it’s very simple but some people don’t want to play an image game to make sure that they are human and clients don’t want to lose their visitors just because of using the CAPTCHA that really annoying. Remember it <strong>only runs validation on the client side</strong>. At some point, it has security issues for who knows it so please consider using another way especially when the form is very strict by using battle-tested libraries just like <a href="https://www.google.com/recaptcha/about/">reCAPTCHA</a> or its popular alternative <a href="https://www.hcaptcha.com/">hCaptcha</a>.</p>
<p>Thank you for reading!</p>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=26c4ee98ac04" width="1" height="1" alt="">


Getting annoyed by the CAPTCHA these days? Let’s create the simple one!