captcha for hcl domino xpages in 30 minutes


HCL Notes and Domino: Tips & Tricks

CAPTCHA for HCL Domino XPages in 30 minutes
May 4, 2023

By Lance Zakin, HCL CASA, CAAD
Notes and Domino
NotesMail - HCL BP
This article instructs Domino Developers how to add CAPTCHA to a XPage design element. Domino web apps which allow ACL Anonymous access running on the public internet are susceptible to spam data submission especially if the web validation relies soley on JavaScript (CSJS).

Example: CAPTCHA - Security image generator

Domino Developer Instructions



1. Type a message at the bottom of the XPage as seen above where you would like the security image to appear. i.e. "Are you a robot? (CAPTCHA): Enter image text above or reload page."

2. Create a computed field control as seen above and name it, for example: txt_SubmitCodeImages
Click Value tab, then click JavaScript and click "Compute on page load".
Copy/Paste the formula code in attachment below as the JavaScript (SSJS) value. NOTE: The 2 variable values at the top of the formula code can be changed to specify the minimum and maximum images to display (supports 1 to 27 images).

Domino-CAPTCHA-XPages-Code1.txt.zipDomino-CAPTCHA-XPages-Code1.txt.zip

3. Create an edit box control as seen above and name it: txt_SubmitCodeInput
Click Validation tab, then select "Required field" as seen below and add a field error message as seen in example below.



3. Create a Hidden input control adjacent to edit box control as seen above and name it: txt_SubmitCodeAnswer
Click Validation tab, then select "Required field" as seen below and add a field error message as seen in example below. Note: This error message will never display to end user, but rather just for the Domino developer to see.
Click the Source tab, then copy/paste the validation code in the middle section as seen below. Note: The code should be inserted between the code seen below in small grey font.





value="#{document1.txt_SubmitCodeAnswer}" required="true">
<xp:this.validators>
<xp:validateRequired message="CAPTCHA failed due to a robot attack.">
</xp:validateRequired>

<xp:validateExpression
message="'Are you a robot?' field contains incorrect image text.">
<xp:this.expression><![CDATA[#{javascript:
tmp1 = getComponent("txt_SubmitCodeInput").getValue();
tmp2 = getComponent("txt_SubmitCodeAnswer").getValue();
encodeAnswer = new Array();
encodeAnswer = @Explode(tmp2, "; ");
decodeAnswer = "";
for(var i = 0; i < @Elements(encodeAnswer); i++) {
decodeAnswer = decodeAnswer + @Char(encodeAnswer[i]);
}
if (@UpperCase(tmp1) == decodeAnswer) return true; else return false;
}]]></xp:this.expression>
</xp:validateExpression>

<xp:validateLength>
<xp:this.message><![CDATA[Domino Designer: Click Source tab to see <xp:ValidateExpression> code.]]></xp:this.message>
</xp:validateLength>
</xp:this.validators>

5. Add a button control as seen above and select submit button type as seen below.



.