Setting up CAPTCHA with Single Page Apps

Single page application are web pages that are populated with content that is returned via AJAX or Fetch. Using a captcha with single page applications with Distil can be a challenge because the content that is returned in the AJAX or Fetch calls is typically JSON and Distil returns a text/html page for the captcha or Drop pages. The client side browser application will then return an error in this situation instead of render the captcha page. This article is intended to provide guidance for rendering a captcha page in the browser when a single page application is used.

Below are the high level modification.

  1. Customize the HTML on the single page application
  2. Use a Custom CAPTCHA page

Customize the HTML on the Single Page Application

The single page application needs to be customized to display the Distil CAPTCHA page on top of the main browser canvas to avoid disrupting the existing user session and to allow the user to solve the CAPTCHA. Below is the full code snippet for the customized single page app page.

<!DOCTYPE html>
<style type="text/css">
iframe {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;

<script type="text/javascript">
window.addEventListener('message', function(text){
try {
console.log('Got message');
document.getElementById('captchaFrame').style.visibility = 'hidden';
} catch (e){
}, false);

window.onload = function(){

document.getElementById('button').addEventListener('click', function(){
var xhr = new XMLHttpRequest();'GET', "", true);
xhr.withCredentials = true;

xhr.onreadystatechange = function(){
console.log(xhr.readyState + ' ' + xhr.status)
if ((xhr.readyState == 4) && (xhr.status == 456)){
alert("Received a 456 from origin. Show CAPTCHA form");

if (document.getElementById('captchaFrame')){

var iframe = document.createElement('IFRAME'); = 'captchaFrame'
iframe.src = ""

} else if (xhr.readyState == 4){
alert('Response: ' + xhr.status)


<input type="submit" id="button" name="Click me" value="Click me" style="width: 400px; height: 100px">
<input type="text" name="input_headers"/>


Use a Custom Captcha page

The customized captcha page has a before unload event listener. This event listener will sent a message to the parent page which will then tell the parent page to hide the iFrame containing the captcha page. Below is the full code snippet for the customized captcha page.

<!DOCTYPE html>
<title>Pardon Our Interruption</title>
<link rel="stylesheet" type="text/css" href="//" media="all">
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=1000" />
<META NAME="robots" CONTENT="noindex, nofollow">
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />
<script type="text/javascript">
window.addEventListener('beforeunload', function(){
window.parent.postMessage('Hello!!!', '*')
}, false)

<body class='block-page'>
<div class='container'>
<div class='row'>
<div class='sidebar col-lg-4 col-sm-5'>
<img src="//" alt="0">
<div class='content col-lg-8 col-sm-7'>
<h1>Pardon Our Interruption...</h1>
As you were browsing <strong><!-- DISTIL HTTP HOST --></strong> something about your browser made us think you were a bot. There are a few reasons this might happen:
<li>You're a power user moving through this website with super-human speed.</li>
<li>You've disabled JavaScript in your web browser.</li>
<li>A third-party browser plugin, such as Ghostery or NoScript, is preventing JavaScript from running. Additional information is available in this <a title='Third party browser plugins that block javascript' href='' target='_blank'>support article</a>.</li>

<p>After completing the CAPTCHA below, you will immediately regain access to <!-- DISTIL HTTP HOST -->.</p>



Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request