Vanilla JavaScript Core

If you are using Vue, Svelte, Angular, or building a traditional server-rendered application without a heavy frontend framework, you can use the barebones @secure-input/core class.

Basic Implementation

The SecureInput class initializes the Web Worker and compiles the WebAssembly module behind the scenes. It handles all thread communication securely.

checkout.js
import { SecureInput } from "@secure-input/core";

async function setupSecureCheckout() {
  // 1. Create a new instance
  const secureInput = new SecureInput({
    debug: process.env.NODE_ENV === "development",
    onError: (err) => console.error("Encryption failed:", err)
  });

  try {
    // 2. Wait for the Web Worker and WASM module to initialize
    await secureInput.initialize();
    
    const checkoutBtn = document.getElementById("checkout-btn");
    const inputField = document.getElementById("coupon-input");

    checkoutBtn.addEventListener("click", async (e) => {
      e.preventDefault();
      
      const plainText = inputField.value;
      
      // 3. Encrypt the value. This happens off the main thread.
      const encryptedPayload = await secureInput.encrypt(plainText);
      
      // Clear the input immediately
      inputField.value = "";
      
      // Send ciphertext to server
      await fetch("/api/checkout", {
        method: "POST",
        body: JSON.stringify({ coupon: encryptedPayload })
      });
    });

  } catch (error) {
    // Fallback if WASM is not supported by the browser
    console.error("Secure Input unavailable:", error);
  }
}

setupSecureCheckout();

Cleanup & Memory Management

Because this library spans up a dedicated Web Worker, it consumes memory. If you are building a Single Page Application (SPA), it is critical to destroy the instance when the component unmounts or the user navigates away to prevent memory leaks.

// When the user navigates away from the checkout page
window.addEventListener("beforeunload", () => {
  secureInput.destroy(); 
});

Note on Vite / Webpack

Modern bundlers like Vite and Webpack 5 handle Web Worker files automatically. The @secure-input/core package utilizes standard new Worker(new URL('...', import.meta.url)) syntax so it should work out-of-the-box with zero custom bundler configuration required.

PreviousReact ImplementationNextServer-Side Decryption