How It Works

Secure Input changes the paradigm of form handling by ensuring the raw text value never exists in the main thread's React state or the DOM in a way that is easily scannable by external scripts.

The Architecture Flow

  1. 1
    Keystroke CaptureAs the user types, each keystroke is intercepted immediately at the input level before typical React or Vanilla JS state updates occur.
  2. 2
    Worker IsolationThe plain text is sent to an isolated Web Worker. This means the sensitive processing occurs completely off the main thread, making it invisible to extensions inspecting the standard DOM or window object.
  3. 3
    WASM EncryptionInside the worker, a highly optimized, Rust-compiled WebAssembly module uses ChaCha20Poly1305 to instantly encrypt the payload.
  4. 4
    Safe OutputThe main thread only ever receives and holds the encrypted ciphertext. The plain text never touches the form's `value` attribute or the generic component state.

The Three Packages

The project is broken down into three modular packages to keep bundle sizes incredibly small:

@secure-input/core

The framework-agnostic engine that manages the Web Worker and encryption lifecycle. Use this in Vanilla JS or other frameworks.

@secure-input/react

Lightweight hooks and components wrapping the core for seamless React and Next.js integration.

@secure-input/wasm

The raw ChaCha20 encryption module. (You typically do not interact with this directly, it's used internally).

Security Notice

This library provides obfuscation, not absolute security. It raises the bar significantly against automated scrapers and basic extensions, making it annoying enough that standard bots fail. However, determined attackers with reverse-engineering skills, network traffic inspectors, or low-level OS keyloggers can still extract data. Always implement server-side validation and rate limiting.

PreviousIntroductionNextInstallation