Migrate captcha to cloudflare (#314)

* Migrate captcha to cloudflare

* Fix headers

package.json

@@ -12,8 +12,7 @@
     "lint-fix": "eslint src/**/*.{ts,tsx} --fix",
     "generateDictionary": "ts-node -r tsconfig-paths/register ./src/services/generateDictionary.ts",
     "build": "cross-env NODE_ENV=production webpack --config webpack.config.prod.js",
-    "build-api": "webpack --config webpack.config.api.js",
-    "deploy-api": "wrangler publish"
+    "deploy-api": "wrangler deploy ./src/server/index.ts --name api --compatibility-date 2024-11-12"
   },
   "jest": {
     "transform": {

src/components/Modals/WordErrorModal/WordErrorModal.tsx

@@ -63,7 +63,7 @@ export const WordErrorModal = () => {
 
     useEffect(() => {
         if (online) {
-            grecaptcha.render('recaptcha-element', {
+            grecaptcha.render('#recaptcha-element', {
                 sitekey: captchaSiteKey,
                 theme: 'light',
                 callback: (token) => {

src/components/ResultsCard/ResultsCard.tsx

@@ -253,7 +253,7 @@ export const ResultsCard =
                             {short ? <ShareIcon /> : t('shareWord')}
                         </button>
                         <button
-                            className="results-card__action-button hide"
+                            className="results-card__action-button"
                             type="button"
                             aria-label={t('reportWordError')}
                             onClick={showWordErrorModal}

src/consts.ts

@@ -107,6 +107,6 @@ export const wordErrorsTypes = [
     'interslavic',
 ]
 
-export const captchaSiteKey = '6Lccu5kdAAAAACvN1Cnl5THInIZPEmqIyJOMjkpe';
+export const captchaSiteKey = '0x4AAAAAAAz3DWhwL4ABSW4W';
 export const wordErrorTextMaxLength = 120;
 export const REP_LINK = 'https://github.com/sonic16x/interslavic'

src/custom.d.ts

@@ -4,9 +4,5 @@ declare module '*.svg' {
     export default content;
 }
 
-declare const GOOGLE_CAPTCHA_SECRET_KEY: string;
-declare const GOOGLE_WORD_ERRORS_TABLE_ID: string;
-declare const GOOGLE_SERVICE_ACCOUNT_EMAIL: string;
-declare const GOOGLE_PRIVATE_KEY: string;
 declare const FB: any;
 declare const IS_COM: boolean;

src/index.html.ejs

@@ -29,8 +29,7 @@
       ga('send', 'pageview');
     </script>
   <% } %>
-  <script src="https://www.google.com/recaptcha/api.js?render=explicit" async defer>
-  </script>
+  <script src="https://challenges.cloudflare.com/turnstile/v0/api.js?compat=recaptcha" async defer></script>
   <script src="is_com.js"></script>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">

src/server/checkCaptcha.ts

@@ -1,13 +1,10 @@
-import { toQueryString } from 'utils/toQueryString';
-
-export async function checkCaptcha(secret, response) {
-    const captchaParams = toQueryString({
-        secret,
-        response,
-    });
-
-    const captchaResponse = await fetch(`https://www.google.com/recaptcha/api/siteverify?${captchaParams}`, {
+export async function checkCaptcha(secret, response, remoteip) {
+    const captchaResponse = await fetch(`https://challenges.cloudflare.com/turnstile/v0/siteverify`, {
         method: 'POST',
+        body: JSON.stringify({ secret, response, remoteip }),
+        headers: {
+            'Content-Type': 'application/json'
+        }
     });
 
     const captchaResponseData = await captchaResponse.json();

src/server/googleAuth.ts

@@ -123,8 +123,8 @@ export async function googleAuth(googleServiceAccountEmail, googlePrivateKey) {
     });
 
     // Grab the JSON from the response
-    const { access_token } = await response.json();
+    const res: any = await response.json();
 
     // Capture the access token
-    return access_token;
+    return res.access_token;
 }

src/server/index.ts

@@ -4,22 +4,15 @@ import { getTableHeader } from 'server/getTableHeader';
 import { googleAuth } from 'server/googleAuth';
 import { validateData } from 'server/validateData';
 
-addEventListener('fetch', (event) => {
-    // eslint-disable-next-line
-    // @ts-ignore
-    event.respondWith(
-        // eslint-disable-next-line
-        // @ts-ignore
-        handleRequest(event.request).catch(
-            (err) => new Response(err.stack, { status: 500 })
-        )
-    );
-});
 
-const responseHeaders = {
+const corsHeaders = {
     'Access-Control-Allow-Origin': '*',
     'Access-Control-Allow-Methods': 'GET,HEAD,POST,OPTIONS',
     'Access-Control-Max-Age': '86400',
+}
+
+const responseHeaders = {
+    ...corsHeaders,
     'Content-Type': 'application/json',
 }
 
@@ -30,7 +23,32 @@ function responseError(error) {
     });
 }
 
-async function handleRequest(request) {
+function handleOptions (request) {
+    if (
+        request.headers.get("Origin") !== null &&
+        request.headers.get("Access-Control-Request-Method") !== null &&
+        request.headers.get("Access-Control-Request-Headers") !== null
+    ) {
+        return new Response(null, {
+            headers: {
+                ...corsHeaders,
+                "Access-Control-Allow-Headers": request.headers.get("Access-Control-Request-Headers"),
+            },
+        })
+    } else {
+        return new Response(null, {
+            headers: {
+                Allow: "GET, HEAD, POST, OPTIONS",
+            },
+        })
+    }
+}
+
+async function handleRequest(request, env) {
+    if (request.method === "OPTIONS") {
+        return handleOptions(request)
+    }
+
     const data = await request.json();
     const { pathname } = new URL(request.url);
 
@@ -44,19 +62,20 @@ async function handleRequest(request) {
         return responseError('invalidData');
     }
 
-    const captchaIsOk = await checkCaptcha(GOOGLE_CAPTCHA_SECRET_KEY, data.captchaToken);
+    const ip = request.headers.get('CF-Connecting-IP');
+    const captchaIsOk = await checkCaptcha(env.GOOGLE_CAPTCHA_SECRET_KEY, data.captchaToken, ip);
 
     if (!captchaIsOk) {
         return responseError('invalidCaptcha');
     }
 
-    const googleAccessToken = await googleAuth(GOOGLE_SERVICE_ACCOUNT_EMAIL, GOOGLE_PRIVATE_KEY);
+    const googleAccessToken = await googleAuth(env.GOOGLE_SERVICE_ACCOUNT_EMAIL, env.GOOGLE_PRIVATE_KEY);
 
     if (!googleAccessToken) {
         return responseError('invalidGoogleAccessToken');
     }
 
-    const tableHeader = await getTableHeader(GOOGLE_WORD_ERRORS_TABLE_ID, googleAccessToken);
+    const tableHeader = await getTableHeader(env.GOOGLE_WORD_ERRORS_TABLE_ID, googleAccessToken);
 
     if (!tableHeader || !tableHeader.length) {
         return responseError('invalidTableHeader');
@@ -70,14 +89,22 @@ async function handleRequest(request) {
         return data[fieldName];
     });
 
-    const addRowResponse = await addRow(GOOGLE_WORD_ERRORS_TABLE_ID, newRow, googleAccessToken);
+    const addRowResponse = await addRow(env.GOOGLE_WORD_ERRORS_TABLE_ID, newRow, googleAccessToken);
 
     if (addRowResponse.status === 200) {
-        return new Response(JSON.stringify({}), {
+        return new Response(JSON.stringify({ error: null }), {
             status: addRowResponse.status,
             headers: responseHeaders,
         });
     } else {
         return responseError('invalidAddRow');
     }
 }
+
+export default {
+    async fetch(request, env) {
+        return handleRequest(request, env).catch(
+            (err) => responseError(err.stack)
+        )
+    }
+}