feat: implement async nonce

Author: Sebastian Thulin

source/js/asyncNonce/asyncNonce.ts

@@ -0,0 +1,113 @@
+interface AsyncNonceInterface {
+  setup(form: HTMLFormElement): Promise<void>;
+}
+
+class AsyncNonce {
+  /**
+   * Constructor for AsyncNonce.
+   * @param modularityFrontendFormData The form data object containing API routes.
+   */
+  constructor(
+    private modularityFrontendFormData: ModularityFrontendFormData
+  ) {}
+
+  /**
+   * Fetch the nonce from the server.
+   * @returns The nonce string or null if not found.
+   */
+  public async get(): Promise<string | null> {
+    const url = this.modularityFrontendFormData?.apiRoutes?.nonceGet;
+
+    if (!url) {
+      console.error("Nonce URL is not defined.");
+      return null;
+    }
+
+    try {
+      const response = await fetch(url);
+      if (!response.ok) {
+        throw new Error(`HTTP error: ${response.status}`);
+      }
+
+      const json = await response.json();
+      return json?.nonce ?? null;
+    } catch (error: any) {
+      console.error("Nonce fetching failed:", error?.message || error);
+      return null;
+    }
+  }
+
+  /**
+   * Inject the nonce into the form as a hidden input field.
+   * @param form The form element to inject the nonce into.
+   * @param nonce The nonce value to inject.
+   */
+  public inject(form: HTMLFormElement, nonce: string, nonceElementId: string): void {
+    if (this.isNoncePresent(form, nonceElementId)) {
+      this.removeNonce(form, nonceElementId);
+    }
+
+    form.appendChild(
+      this.createNonceElement(nonce, nonceElementId)
+    );
+  }
+
+  /**
+   * Check if the nonce is already present in the form.
+   * @param form The form element to check.
+   * @returns True if the nonce is present, false otherwise.
+   */
+  public isNoncePresent(form: HTMLFormElement, nonceElementId: string): boolean {
+    return form.querySelector("#" + nonceElementId) !== null;
+  }
+
+  /**
+   * Remove the nonce from the form.
+   * @param form The form element to remove the nonce from.
+   */
+  public removeNonce(form: HTMLFormElement, nonceElementId: string): void {
+    const existingNonceInput = form.querySelector("#" + nonceElementId);
+    if (existingNonceInput) {
+      form.removeChild(existingNonceInput);
+    }   
+  }
+
+  /**
+   * Create a nonce element to be injected into the form.
+   * @param nonce The nonce value to inject.
+   * @param nonceElementId The ID for the nonce input element.
+   * @returns The created input element.
+   */
+  public createNonceElement(nonce: string, nonceElementId: string): HTMLInputElement {
+    const nonceInput = document.createElement("input");
+
+    nonceInput.id     = nonceElementId;
+    nonceInput.type   = "hidden";
+    nonceInput.name   = "nonce";
+    nonceInput.value  = nonce;
+
+    nonceInput.setAttribute("aria-hidden", "true");
+    nonceInput.setAttribute("autocomplete", "off");
+    nonceInput.setAttribute("autocorrect", "off");
+
+    return nonceInput;
+  }
+
+  /**
+   * Setup the nonce by fetching it and injecting it into the form.
+   * @param form The form element to inject the nonce into.
+   */
+  public async setup(
+    form: HTMLFormElement
+  ): Promise<void> {
+    console.log("Setting up nonce...");
+    const nonce = await this.get();
+    if (nonce) {
+      console.log("Nonce fetched successfully:", nonce);
+      this.inject(form, nonce, "async-nonce-element");
+    } else {
+      console.error("Nonce is not defined.");
+    }
+  }
+}
+export default AsyncNonce;

source/js/init.ts

@@ -8,7 +8,7 @@ import Submit from "./steps/submit/submit";
 import FieldBuilder from "./fields/fieldBuilder";
 import Fields from "./fields/fields";
 import ConditionBuilder from "./conditions/conditionBuilder";
-
+import AsyncNonce from "./asyncNonce/asyncNonce";
 
 declare const modularityFrontendFormData: ModularityFrontendFormData;
 declare const modularityFrontendFormLang: ModularityFrontendFormLang;
@@ -59,7 +59,8 @@ class Form {
                 steps,
                 new Submit(
                     this.form, 
-                    modularityFrontendFormData
+                    modularityFrontendFormData,
+                    new AsyncNonce(modularityFrontendFormData)
                 ),
             ),
             new StepUIManager(

source/js/steps/submit/submit.ts

@@ -1,10 +1,13 @@
+import AsyncNonce from "../../asyncNonce/asyncNonce";
 interface SubmitInterface {
     submit(event: Event): void | Promise<void>;
 }
+
 class Submit implements SubmitInterface {
     constructor(
       private form: HTMLFormElement,
-      private modularityFrontendFormData: ModularityFrontendFormData
+      private modularityFrontendFormData: ModularityFrontendFormData,
+      private asyncNonce: AsyncNonce
     ) {}
 
 
@@ -17,6 +20,9 @@ class Submit implements SubmitInterface {
         console.error("Submit URL is not defined.");
         return;
       }
+
+      //Init nonce by fetching nonce from endpoint and injecting it into the form
+      await this.asyncNonce.setup(this.form);
 
       try {
         const response = await fetch(url, {

source/php/Api/Nonce/Get.php

@@ -0,0 +1,62 @@
+<?php
+
+namespace ModularityFrontendForm\Api\Nonce;
+
+use ModularityFrontendForm\Api\RestApiEndpoint;
+use ModularityFrontendForm\Config\ConfigInterface;
+use WP_Error;
+use WP_REST_Request;
+use WP_REST_Response;
+use WP_REST_Server;
+use WpService\WpService;
+
+class Get extends RestApiEndpoint
+{
+    public const NAMESPACE = 'modularity-frontend-form/v1';
+    public const ROUTE     = 'nonce/get';
+    public const KEY       = 'nonceGet';
+
+    public function __construct(
+        private WpService $wpService,
+        private ConfigInterface $config
+    ) {}
+
+    /**
+     * Registers a REST route
+     *
+     * @return bool Whether the route was registered successfully
+     */
+    public function handleRegisterRestRoute(): bool
+    {
+      return register_rest_route(self::NAMESPACE, self::ROUTE, array(
+          'methods'             => WP_REST_Server::READABLE,
+          'callback'            => array($this, 'handleRequest'),
+          'permission_callback' => array($this, 'permissionCallback')
+      ));
+    }
+
+
+    /**
+     * Handles a REST request and sideloads an image
+     *
+     * @param WP_REST_Request $request The REST request object
+     *
+     * @return WP_REST_Response|WP_Error The sideloaded image URL or an error object if the sideload fails
+     */
+    public function handleRequest(WP_REST_Request $request): WP_REST_Response
+    {
+        return new WP_REST_Response([
+            'nonce' => $this->wpService->wpCreateNonce($this->config->getNonceKey()),
+        ]);
+    }
+
+    /**
+     * Callback function for checking if the current user has permission to get a nonce
+     *
+     * @return bool Whether the user has permission to get a nonce
+     */
+    public function permissionCallback(): bool
+    {
+        return true;
+    }
+}