How CloudFlare client-side DDOS detection works

I was looking through Hacker News today, and upon clicking one of the links a screen popped up, pictured below:

This is interesting. What kind of technique does CloudFlare employ to detect potential DDOS attacks inside the browser?

The answer turned out to be simple – let’s dive in.

The page consists of two parts, a form:

<form id="ChallengeForm" action="http://evasi0n.com/" method="POST">
<input type="hidden" name="act" value="jschl"/>
<input type="hidden" name="jschl_vc" value="afc458a1300ed9eb1a853d757eadd306"/>
<input type="hidden" id="jschl_answer" name="jschl_answer"/>
</form>

And a small piece of JavaScript:

$('#challenge').show();
    $(function(){setTimeout(
        function(){
            $('#jschl_answer').val(9+50*1);
            $('#ChallengeForm').submit();
        },
       5850
)});

The form has a unique hidden value (jschl_vc) and an empty hidden value (jschl_answer).

The Javascript snippet calculates a mathematical challenge – in our case 9+50*1, which it inserts into jschl_answer and submits the form.

The jschl_vc form field uniquely identifies the challenge to CloudFlare, so that the backend knows what the answer should be. If jschl_answer is interpreted as being the correct result, a cookie called cf_clearance is created with a unique id that identifies the user as having verified the challenge.

In summary

The Cloudflare page checks whether the user has JavaScript enabled.

This looks like a really effective technique against primitive DDOS floods, which issue simple GET requests to a server.

Below are links to the full source of the page:

Pastebin
Link