Captcha Challenge

Ask the community
,
1

Dear All @brainstorrrm @yisrael-wix @givemeawhisky

I have been writing my own captcha code that is run server side, what I am trying to do is now create an image out of the below “return data” and then return the image to client side with the returned data.

I can get the returned data to client side but that is missing the point, I feel as the data would then be available client side for malitious individuals or computers to read and would then make the captcha worthless?

I am sure there is a way in the backend to create an image out of the data as I have created SVG QRCodes in the back but this was using the qrCode module, If you could help in anyway of how to convert the data to an image and return the image to client side that would be greatly appreciated.

I also have a way of checking the code on server side but need to know how to utilise the returned data from the below function and use this in the check function? if that is possible?

Best regards

Si

export function createCaptcha() {
 let captcha = "";
 var length = 20;
 var possible = "23456789ABCDEFGHJKLMNPQRSTUVWXYZ@!#$%^&*";
 for (var i = 0; i < length; i++)
        captcha += possible.charAt(Math.floor(Math.random() * possible.length))

 var a = captcha.split('');
 var l = a.length;
 var i = 0;
 var h = {};
 var v = "";

 while (i < l) {
        h[a[i]] = (h[a[i]] || 0) + 1;

        i += 1;
    }

 for (var c in h) {
 if (h[c] === 1) {
            v += c;
        }
    }

 var str = v;
 var A = str.slice(1, 2);
 var B = str.slice(2, 3);
 var C = str.slice(3, 4);
 var D = str.slice(4, 5);
 var E = str.slice(5, 6);
 var F = str.slice(6, 7);

 var string = A + B + C + D + E + F;

 let rgb = "";

 var r = Math.floor(Math.random() * 255);

 var g = Math.floor(Math.random() * 255);

 var b = Math.floor(Math.random() * 255);

    rgb = 'rgb(' + r + ', ' + g + ' , ' + b + ')';

 var data = {
        numberOne: A,
        numberTwo: B,
        numberThree: C,
        numberFour: D,
        numberFive: E,
        numberSix: F,
        code: string,
        colour: rgb
    };

 return data;
}
2

Have you seen this previous post about it?
https://www.wix.com/corvid/forum/community-discussion/recaptcha
https://girizano.wixsite.com/codecorner/post/google-recaptcha

3

Hi @givemeawhisky ,

I have indeed looked at this, I am trying to stay away from google recaptcha, and implement an internal one, I have found recently that within the wix documents there is the ability to utilise:

public:

public/amodule.js

export let myObject = {
prop1: "here",
prop2: "there"
}

clientside:

import myObject from 'public/amodule.js';

console.log(myObject.prop1)
// Logs: "here"

I have attempted to utilise the same code but changed public for backend and utilised a JSW for this however, in client side it is logging as undefined?

any help on this or a provision of some kind of work around would be fantastic, at present I am utilising global variables within a JSW file to move data from one function to another but it is not seemingly achieving my desired out come.

best regards

Si

4

For anybody who’s interested in this feature: the reCAPTCHA Editor Element has been released .

@simonadams why are you trying to stay away from Google reCAPTCHA?

5

Because of users privacy, I want it to be internal so that users know that their actions and previous actions are not tracked in anyway, I want it to be secure and flexible. an example is within this article where they talk about the downsides of the new recaptcha V3: https://www.fastcompany.com/90369697/googles-new-recaptcha-has-a-dark-side

6

@simonadams Thanks!