Botdetect Captcha HTML <taglib>

1.2k Views Asked by At

I want to add Botdetect Captcha to my html file.But in the website of the Botdetect captcha, there is example only for jsp. In this jsp file, <taglib> is used like that:

<%@taglib prefix="botDetect" uri="https://captcha.com/java/jsp"%>
....
<botDetect:captcha id="basicExample" userInputID="captchaCode" />

  <div class="validationDiv">
    <input name="captchaCode" type="text" id="captchaCode" value="${basicExample.captchaCode}" />
    <input type="submit" name="validateCaptchaButton" value="Validate" id="validateCaptchaButton" />
    <span class="correct">${basicExample.captchaCorrect}</span>
    <span class="incorrect">${basicExample.captchaIncorrect}</span>
  </div>

Is there any alternative for <%@taglib> in HTML files. How can I solve this problem?

2

There are 2 best solutions below

0
On

I'm facing this problem because I use Thymeleaf instead of JSP so I can't use the taglib but I still have "dynamic HTML". I'm answering assuming this is your case.

I saw a possible solution on the help pages here: https://captcha.com/doc/java/jsp-captcha.html at section 2:

<%
  // Adding BotDetect Captcha to the page
  Captcha captcha = Captcha.load(request, "exampleCaptcha");
  captcha.setUserInputID("captchaCode");

  String captchaHtml = captcha.getHtml();
  out.write(captchaHtml);
%>

This is JSP code but can be easily adapted to Thymeleaf. This in the @Controller that opens the page:

Captcha captcha = Captcha.load(request, "exampleCaptcha");
captcha.setUserInputID("captchaCode");

String captchaHtml = captcha.getHtml();
model.addAttribute("captchaHtml", captchaHtml);

and the html is like

<th:block th:utext="${captchaHtml}"></th:block>

The code for captcha checking is the same as for JSP, but placed in the @Controller that handles the form:

 // validate the Captcha to check we're not dealing with a bot
 boolean isHuman = captcha.validate(request.getParameter("captchaCode"));
 if (isHuman) {
  // TODO: Captcha validation passed, perform protected action
 } else {
  // TODO: Captcha validation failed, show error message
 }

To finish you also need to edit web.xml (if you have it) and import the java libs as by the official docs. I'm using Gradle and importing 'com.captcha:botdetect-servlet:4.0.beta3.7'

Warning: your server should be on HTTPS or you might get this error when using version 4.0.beta3.7:

Captcha.UserInputID is not set. Your implementation of BotDetect is not completely secure yet

0
On
<%@taglib prefix="botDetect" uri="https://captcha.com/java/jsp"%>
....
<botDetect:captcha id="basicExample" userInputID="captchaCode" />

  <div class="validationDiv">
    <input name="captchaCode" type="text" id="captchaCode" value="${basicExample.captchaCode}" />
    <input type="submit" name="validateCaptchaButton" value="Validate" id="validateCaptchaButton" />
    <span class="correct">${basicExample.captchaCorrect}</span>
    <span class="incorrect">${basicExample.captchaIncorrect}</span>
  </div>

That is wrong, with HTML (HyperText Markup Language) you have to list the version of HTML in this case it is Doctype HTML so the following one should be correct...

<!DOCTYPE html>
<%@taglib prefix="botDetect" uri="https://captcha.com/java/jsp"%>
....
<botDetect:captcha id="basicExample" userInputID="captchaCode" />

  <div class="validationDiv">
    <input name="captchaCode" type="text" id="captchaCode" value="${basicExample.captchaCode}" />
    <input type="submit" name="validateCaptchaButton" value="Validate" id="validateCaptchaButton" />
    <span class="correct">${basicExample.captchaCorrect}</span>
    <span class="incorrect">${basicExample.captchaIncorrect}</span>
  </div>