From da45b99c05498aed0a1226ecbd16e21d2deef79d Mon Sep 17 00:00:00 2001
From: Jerry Ng <ngshiheng@gmail.com>
Date: Wed, 5 Oct 2022 23:52:39 +0800
Subject: [PATCH 1/2] feat: add Cloudflare Turnstile to site

---
 src/handlers/createShortUrl.js   |  2 +-
 src/handlers/redirectShortUrl.js |  2 +-
 src/index.html                   | 51 ++++++++++++++++++++++----------
 src/index.js                     |  5 ++--
 src/middleware/shortUrlCache.js  |  4 +--
 src/middleware/turnstile.js      | 24 +++++++++++++++
 6 files changed, 67 insertions(+), 21 deletions(-)
 create mode 100644 src/middleware/turnstile.js

diff --git a/src/handlers/createShortUrl.js b/src/handlers/createShortUrl.js
index b526927..6dfc835 100644
--- a/src/handlers/createShortUrl.js
+++ b/src/handlers/createShortUrl.js
@@ -54,6 +54,6 @@ export const createShortUrl = async (request, event) => {
         return response
     } catch (error) {
         console.error(error, error.stack)
-        return new Response('Unexpected Error', { status: 500 })
+        return new Response('Internal Server Error', { status: 500 })
     }
 }
diff --git a/src/handlers/redirectShortUrl.js b/src/handlers/redirectShortUrl.js
index 0d5d74d..cab2102 100644
--- a/src/handlers/redirectShortUrl.js
+++ b/src/handlers/redirectShortUrl.js
@@ -16,5 +16,5 @@ export const redirectShortUrl = async ({ params }) => {
     if (originalUrl) {
         return Response.redirect(originalUrl, 301)
     }
-    return new Response(NOT_FOUND_PAGE, { headers: { 'content-type': 'text/html;charset=UTF-8' } })
+    return new Response(NOT_FOUND_PAGE, { headers: { 'Content-Type': 'text/html;charset=UTF-8' }, status: 404 })
 }
diff --git a/src/index.html b/src/index.html
index 2dba6da..939dc38 100644
--- a/src/index.html
+++ b/src/index.html
@@ -14,10 +14,25 @@
         <script src="https://kit.fontawesome.com/15181efa86.js" crossorigin="anonymous"></script>
         <link rel="stylesheet" href="https://unpkg.com/bulma@0.9.0/css/bulma.min.css" />
         <script async defer data-website-id="9860fa16-de2e-4eaa-b0b4-f11c471ad4d6" src="https://umami.jerrynsh.com/umami.js"></script>
+        <script src="https://challenges.cloudflare.com/turnstile/v0/api.js?onload=onloadTurnstileCallback" async defer></script>
         <script>
-            const submitURL = () => {
-                let statusElement = document.getElementById('status')
-                let originalUrlElement = document.getElementById('url')
+            let sitekey = '0x4AAAAAAAAujdqolLL946vD'
+            let turnstileToken
+
+            window.onloadTurnstileCallback = function () {
+                const turnstileOptions = {
+                    sitekey,
+                    theme: 'light',
+                    callback: function (token) {
+                        turnstileToken = token
+                    },
+                }
+                turnstile.render('#cf-turnstile-widget', turnstileOptions)
+            }
+
+            const submitURL = async () => {
+                const statusElement = document.getElementById('status')
+                const originalUrlElement = document.getElementById('url')
 
                 if (!originalUrlElement.reportValidity()) {
                     throw new Error('Invalid URL.')
@@ -26,19 +41,20 @@
                 statusElement.classList.add('is-loading')
 
                 const originalUrl = originalUrlElement.value
-                const body = JSON.stringify({ originalUrl })
+                const body = JSON.stringify({ originalUrl, turnstileToken })
+
+                const res = await fetch('/api/url', { method: 'POST', body })
+                statusElement.classList.remove('is-loading')
+
+                if (res.status === 200) {
+                    const { shortUrl } = await res.json()
+                    statusElement.innerHTML = shortUrl
+                } else {
+                    statusElement.innerHTML = `⛔ ${res.statusText}`
+                }
 
-                fetch('/api/url', { method: 'POST', body })
-                    .then((data) => data.json())
-                    .then((data) => {
-                        statusElement.classList.remove('is-loading')
-                        statusElement.innerHTML = data.shortUrl
-                    })
-                    .catch((error) => {
-                        statusElement.classList.remove('is-loading')
-                        statusElement.innerHTML = '⛔ To Err is Human'
-                    })
                 originalUrlElement.value = ''
+                turnstile.reset('#cf-turnstile-widget')
             }
 
             const copyToClipboard = (elementId) => {
@@ -93,12 +109,17 @@ <h1 class="title is-4">Shorten A URL</h1>
                                     <input
                                         class="input is-link is-primary is-medium is-rounded"
                                         type="url"
-                                        placeholder="https://jerrynsh.com/"
+                                        placeholder="https://jerrynsh.com"
                                         id="url"
                                         required
                                     />
                                 </div>
                             </div>
+                            <div class="checkbox mb-3">
+                                <!-- The Turnstile widget will be injected in the following div. -->
+                                <div id="cf-turnstile-widget"></div>
+                                <!-- end. -->
+                            </div>
                             <button id="submit" class="button is-block is-primary is-rounded is-fullwidth is-medium" onclick="submitURL()">Shorten</button>
                             <br />
                             <button class="button is-info is-rounded is-small" onclick="copyToClipboard('status')">
diff --git a/src/index.js b/src/index.js
index fa62621..f71e474 100644
--- a/src/index.js
+++ b/src/index.js
@@ -5,17 +5,18 @@ import { createShortUrl } from './handlers/createShortUrl'
 import { redirectShortUrl } from './handlers/redirectShortUrl'
 import { shortUrlCacheMiddleware } from './middleware/shortUrlCache'
 import { siteFilterMiddleware } from './middleware/siteFilter'
+import { turnstileMiddleware } from './middleware/turnstile'
 
 const router = Router()
 
 // GET landing page html
-router.get('/', () => new Response(LANDING_PAGE_HTML, { headers: { 'content-type': 'text/html;charset=UTF-8' } }))
+router.get('/', () => new Response(LANDING_PAGE_HTML, { headers: { 'Content-Type': 'text/html;charset=UTF-8' } }))
 
 // GET redirects short URL to its original URL.
 router.get('/:text', redirectShortUrl)
 
 // POST creates a short URL that is associated with its an original URL.
-router.post('/api/url', shortUrlCacheMiddleware, siteFilterMiddleware, createShortUrl)
+router.post('/api/url', turnstileMiddleware, shortUrlCacheMiddleware, siteFilterMiddleware, createShortUrl)
 
 // All incoming requests are passed to the router where your routes are called and the response is sent.
 addEventListener('fetch', (e) => {
diff --git a/src/middleware/shortUrlCache.js b/src/middleware/shortUrlCache.js
index 8d8c36a..79b1496 100644
--- a/src/middleware/shortUrlCache.js
+++ b/src/middleware/shortUrlCache.js
@@ -1,7 +1,7 @@
 /*
 A cache middleware that checks if `originalUrl` is present in the `URL_CACHE` cache.
 
-Do note that Cache API is not enabled on `workers.dev` 
+Do note that Cache API is not enabled on `workers.dev`.
 
 You will need to deploy this over a custom domain to see it work.
 */
@@ -9,7 +9,7 @@ export const shortUrlCacheMiddleware = async (request) => {
     const { originalUrl } = await request.clone().json()
 
     if (!originalUrl) {
-        return new Response('Invalid Request Body', {
+        return new Response('Bad Request', {
             status: 400,
         })
     }
diff --git a/src/middleware/turnstile.js b/src/middleware/turnstile.js
new file mode 100644
index 0000000..ca385db
--- /dev/null
+++ b/src/middleware/turnstile.js
@@ -0,0 +1,24 @@
+const TURNSTILE_SITEVERIFY_ENDPOINT = 'https://challenges.cloudflare.com/turnstile/v0/siteverify'
+
+/*
+Turnstile is Cloudflare's smart CAPTCHA alternative.
+
+A middleware that calls Cloudflare's siteverify endpoint to validate the Turnstile widget response.
+
+Do note to set `TURNSTILE_SECRET` accordingly.
+*/
+export const turnstileMiddleware = async (request) => {
+    /* eslint-disable no-undef */
+    const { turnstileToken } = await request.clone().json()
+
+    const response = await fetch(TURNSTILE_SITEVERIFY_ENDPOINT, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+        body: `response=${turnstileToken}&secret=${TURNSTILE_SECRET}`,
+    })
+
+    const verification = await response.json()
+    if (!verification.success) {
+        return new Response('Too Many Requests', { status: 429 })
+    }
+}

From d5ef6cfd44490762840dd242853c47d6d54f86ac Mon Sep 17 00:00:00 2001
From: Jerry Ng <ngshiheng@gmail.com>
Date: Thu, 6 Oct 2022 09:03:00 +0800
Subject: [PATCH 2/2] test: skip turnstile verification

---
 .eslintignore               | 3 ++-
 scripts/test.js             | 2 +-
 src/middleware/turnstile.js | 7 ++++++-
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/.eslintignore b/.eslintignore
index c6fd7e2..9164e44 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -3,4 +3,5 @@
 .vscode
 dist
 node_modules
-worker
\ No newline at end of file
+test.js
+worker
diff --git a/scripts/test.js b/scripts/test.js
index 36ecbe7..75f7cbc 100644
--- a/scripts/test.js
+++ b/scripts/test.js
@@ -12,7 +12,7 @@ export const options = {
 
 let shortenLink
 
-const BASE_URL = 'https://atomic-url-staging.jerrynsh.workers.dev/'
+const BASE_URL = __ENV.TEST_URL
 const DUMMY_ORIGINAL_URL = 'https://jerrynsh.com/i-built-my-own-tiny-url/'
 
 export default function () {
diff --git a/src/middleware/turnstile.js b/src/middleware/turnstile.js
index ca385db..7048e64 100644
--- a/src/middleware/turnstile.js
+++ b/src/middleware/turnstile.js
@@ -5,10 +5,15 @@ Turnstile is Cloudflare's smart CAPTCHA alternative.
 
 A middleware that calls Cloudflare's siteverify endpoint to validate the Turnstile widget response.
 
-Do note to set `TURNSTILE_SECRET` accordingly.
+Do note to set `TURNSTILE_SECRET` and `TEST_URL` accordingly.
 */
 export const turnstileMiddleware = async (request) => {
     /* eslint-disable no-undef */
+    if (request.url == TEST_URL) {
+        console.log('Skipping Turnstile verification for tests.')
+        return
+    }
+
     const { turnstileToken } = await request.clone().json()
 
     const response = await fetch(TURNSTILE_SITEVERIFY_ENDPOINT, {