CAPTCHA

[nicholasngai]

I’ve been playing around with the Claptcha library in Python and created a rough prototype of what a CAPTCHA thing could look like. It’s built on top of the #2 PR, so it adds an additional token that’s needed above 100 WPM before the leaderboard posting will go through.

This token is actually stored as a cookie so that it’s persistent across sessions (and has a maximum age of 24 hours), and the client will automatically prompt to complete a CAPTCHA upon receiving a flag for the server along with the wpm_token, which will only work in conjunction with the cookie.

The CAPTCHA works by generating a specified number of CAPTCHA images on the server and sending it to the client along with a CAPTCHA token which is just a Fernet-encrypted copy of the text (so the client won’t be able to read it). This token is timestamped, so when the client sends the token and the typed text back to the server, the server calculates the CAPTCHA’s WPM based on the server’s current time and the timestamp of the token, so it can’t be modified by the client. If the accuracy of the words is greater than 80%, the client receives another token as a Set-Cookie header, which is the user’s “verified” WPM encrypted under Fernet. This “verified” WPM is just the server’s calculated WPM scaled by 1.5 to account for random variation and the more-difficult-to-read words as well as network latency.

Since it’s a cookie, it will automatically be sent to the server for /record_wpm and will persist across sessions, and the server will verify both wpm_token (to ensure the WPM was validly sent by the server) and the verification token (to ensure that the user is truly able to type that fast).

There are still a couple things that need to be worked on, such as pre-generating the images to reduce CAPTCHA request latency and polishing the actual CAPTCHA dialog, but I figured I’d get this out there first so you can take a look.

Also, I am new to React and JSX, so bear with me if the code is a little odd. Feel free to make changes to it.

Finally, I would avoid merging this until the other PRs (namely #1 and #2) are merged, since this builds on top of that.

[rahularya50]

Hi Nicholas,

Wow, this looks awesome so far! One thing to be aware of is that we are submitting Cats to SIGCSE, so I'd like to keep cats.cs61a.org in its current known-stable state, rather than risk breaking submitted files.

I'll merge all your PRs in at some point in the future, though, certainly before we use the project against next semester!

Thanks once again for all your contributions! After 61A, if you ever want to work on 61A software development for the OH queue, 61A Code, or any of the other course tools in this repo, just let me know!

[nicholasngai]

Cool! It’d be good to have some more pairs of eyes on the PRs before it gets merged, though, since I’m new to all the languages the CATS project uses except for vanilla JavaScript.