Refresh Turnstile and the CSRF token after a message is sent (#91)

Spencer14420 · Nov 29, 2024 · ee8d432 · ee8d432
1 parent b490f50
commit ee8d432
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 9 deletions.
diff --git a/api.php b/api.php
@@ -8,6 +8,10 @@
     case "sendMessage":
         require_once __DIR__ . "/dist/php/email-handler.php";
         break;
+
+    case "getCSRFToken":
+        require_once __DIR__ . "/dist/php/token-handler.php";
+        break;
 
     default:
         http_response_code(400);

diff --git a/dist/php/email-handler.php b/dist/php/email-handler.php
@@ -1,6 +1,5 @@
 <?php
 require_once __DIR__ . "/../../vendor/autoload.php";
-require_once __DIR__ . "/token-handler.php";
 
 use spencer14420\PhpEmailHandler\EmailHandler;
 
@@ -9,5 +8,5 @@
     $emailHandler = new EmailHandler(__DIR__ . "/email-config.php");
     $emailHandler->handleRequest();
 } catch(Exception $e) {
-    echo json_encode(['status' => 'error', 'message' => $e->getMessage()]); 
+    echo json_encode(['status' => 'error', 'message' => $e->getMessage()]);
 }
diff --git a/dist/php/token-handler.php b/dist/php/token-handler.php
@@ -1,4 +1,5 @@
 <?php
 require_once __DIR__ . "/../../vendor/autoload.php";
 use spencer14420\SpAntiCsrf\AntiCsrf;
-$tokenHandler = new AntiCsrf();
+$tokenHandler = new AntiCsrf();
+echo json_encode(['token' => $tokenHandler->generateToken()]);
diff --git a/index.php b/index.php
@@ -1,8 +1,3 @@
-<?php
-session_start();
-require_once __DIR__ . "/dist/php/token-handler.php";
-$token = $tokenHandler->generateToken();
-?>
 <!DOCTYPE html>
 <html lang="en">
 
@@ -266,7 +261,7 @@
                         <textarea class="form-control" id="message" name="message" rows="5"></textarea>
                     </div>
                     <div style="text-align: center;" id="turnstile-container"></div>
-                    <input type="hidden" id="SpCsrfToken" name="SpCsrfToken" value="<?php echo $token ?>">
+                    <input type="hidden" id="SpCsrfToken" name="SpCsrfToken" value="">
                     <div id="message-alert" class="alert alert-danger" role="alert"></div>
                 </div>
                 <div class="modal-footer">

diff --git a/src/main.ts b/src/main.ts
@@ -7,9 +7,14 @@ import { Modal } from "sp14420-modal";
 import { Utils } from "./utils/utils";
 
 document.addEventListener("DOMContentLoaded", () => {
+  //Sets the CSRF token in the contact form input field
+  Utils.setCsrfToken();
+
+  // Initialize the contact form
   const contactForm = new ContactForm(
     "api.php?action=sendMessage",
     "SpCsrfToken",
+    Utils.refreshContactForm(),
   );
 });
 

diff --git a/src/utils/utils.ts b/src/utils/utils.ts
@@ -54,6 +54,63 @@ export class Utils {
     });
   }
 
+  // Gets and a CSRF token from the server
+  static async getCsrfToken(): Promise<string | null> {
+    const apiEndpoint = "./api.php?action=getCSRFToken";
+
+    try {
+      const response = await fetch(apiEndpoint);
+
+      if (!response.ok) {
+        console.error(`Error, status: ${response.status}`);
+        return null;
+      }
+
+      const data = await response.json();
+
+      if (data && data.token) {
+        return data.token;
+      } else {
+        console.error("Token not found in the response.");
+        return null;
+      }
+    } catch (error) {
+      console.error("Error fetching the CSRF token:", error);
+      return null;
+    }
+  }
+
+  // Sets the CSRF token in the contact form input field
+  static async setCsrfToken(): Promise<void> {
+    const csrfTokenInput = document.getElementById(
+      "SpCsrfToken",
+    ) as HTMLInputElement;
+    if (!csrfTokenInput) {
+      console.error('Input element with id "SpCsrfToken" not found.');
+      return;
+    }
+
+    try {
+      const token = await Utils.getCsrfToken();
+      if (!token) {
+        console.error("Failed to fetch a valid CSRF token.");
+        return;
+      }
+
+      csrfTokenInput.value = token;
+    } catch (error) {
+      console.error("Error setting the CSRF token:", error);
+    }
+  }
+
+  //Reloads turnstile and regenerates the CSRF token for the contact form
+  static refreshContactForm(): (responseData: Record<string, any>) => void {
+    return (responseData: Record<string, any>) => {
+      this.updateTurnstileWidget();
+      this.setCsrfToken();
+    };
+  }
+
   static debounce<T extends (...args: any[]) => any>(
     func: T,
     delay: number,