How Custom CAPTCHA Enhances Security in Salesforce Environments

// CAPTCHA GENERATOR
num1 = Math.mod(Math.abs(Crypto.getRandomInteger()), 10);
num2 = Math.mod(Math.abs(Crypto.getRandomInteger()), 10);

<b>Solve this:</b> {!num1} + {!num2} = ?
<br/>s
<apex:inputText value="{!userAnswer}" style="width:100px"/>

// CUSTOM CAPTCHA VALIDATION
if(userAnswer == null || userAnswer != (num1 + num2)){
errorMessage = 'Invalid Captcha';
createInitialLog('Failed');
// regenerate captcha
num1 = Math.mod(Math.abs(Crypto.getRandomInteger()), 10);
num2 = Math.mod(Math.abs(Crypto.getRandomInteger()), 10);
return null;
}

LWC HTML:

<template>
<div class="captcha-box">
<p><b>Solve this:</b> {num1} + {num2} = ?</p>
<lightning-input type="number" label="Enter Answer" value={userAnswer}
onchange={handleChange}>
</lightning-input>
<lightning-button label="Submit" variant="brand" onclick={validateCaptcha}>
</lightning-button>
<p class="error">{errorMessage}</p>
</div>
</template>

LWC JavaScript:

import { LightningElement, track } from 'lwc';
import generateCaptcha from '@salesforce/apex/CaptchaController.generateCaptcha';
export default class CaptchaLwc extends LightningElement {
@track num1;
@track num2;
@track userAnswer = '';
@track errorMessage = '';
connectedCallback() {
this.loadCaptcha();
}
loadCaptcha() {
generateCaptcha()
.then(result => {
this.num1 = result.num1;
this.num2 = result.num2;
this.errorMessage = '';
this.userAnswer = '';
})
.catch(error => {
console.error('Error loading captcha', error);
});
}
handleChange(event) {
this.userAnswer = event.target.value;
}
validateCaptcha() {
let correctAnswer = this.num1 + this.num2;
if (parseInt(this.userAnswer) === correctAnswer) {
this.errorMessage = '✅ CAPTCHA Verified Successfully!';
} else {
this.errorMessage = '❌ Wrong Answer. Try Again!';
this.loadCaptcha(); // regenerate on failure
}
}
}