WASM-Powered Protection

Protect your checkout from coupon-stealing extensions.

Stop extensions like Honey from scraping and leaking your discount codes. A lightweight WebAssembly library that obfuscates sensitive e-commerce inputs from client-side bots.

Get Started
~30KB Gzipped

Core Architecture

Designed for performance and isolation. Plain text never exists in the main thread or DOM.

WASM Encryption

Utilizes ChaCha20Poly1305 authenticated encryption compiled from Rust to WebAssembly for maximum performance and a higher barrier to reverse-engineering.

Worker Isolation

Sensitive processing occurs entirely in a separate Web Worker thread. Only the encrypted payload is accessible to browser extensions inspecting the DOM.

Framework Agnostic

Usable anywhere. Core library works in Vanilla JS, with first-class React hooks and components provided out of the box.

Packages

MODULE_01

@secure-input/core

Runtime Engine

The standalone orchestration layer. Handles secure communication with Web Workers, manages encryption lifecycles, and exposes a high-level API for any JS environment.

SIZE: ~15KBDEPS: ZERO
npm i @secure-input/core
MODULE_02

@secure-input/react

UI Adaptation

First-class React support. Includes hooks for managing worker state and optimized wrapper components that prevent DOM-based scraping out of the box.

SIZE: ~5KBTYPE: STRONGLY TYPED
npm i @secure-input/react
MODULE_03

@secure-input/wasm

Binary Core

The cryptographic heart. Contains the Rust-compiled ChaCha20Poly1305 implementation. Usually installed as a dependency of the core runtime.

SIZE: ~10KBRUNTIME: WASM32
Internal Dependency

Security Notice

This library provides obfuscation, not absolute security. It defeats basic extensions, DOM inspection, and simple JS injection. It does not protect against low-level keyloggers, network traffic inspection, or determined reverse-engineering. Always pair with robust server-side validation and rate limiting.

Implementation is minimal.

One component. Total isolation. Zero friction.

CouponForm.tsx
"text-accent">import { SecureInput } "text-accent">from "@secure-input/react";

"text-accent">export "text-accent">function CouponForm() {
  "text-accent">const handleSubmit = "text-accent">async (encryptedValue: string) => {
    // Plain text is never exposed here.
    "text-blue-400">await fetch("/api/validate", {
      method: "POST",
      body: encryptedValue,
    });
  };

  "text-accent">return (
    <SecureInput
      placeholder="Enter coupon code"
      onEncryptedSubmit={handleSubmit}
    />
  );
}

Frequently Asked Questions

Everything you need to know about protecting your checkout flow.