Drop-in replacement for HTML inputs. Passwords, credit cards, medical records. encrypted at the keystroke level. Invisible to JavaScript, trackers, and hackers.

Try Live Demo See Use Cases
AES-256
Encryption per keystroke
RSA-2048
Key exchange
0
Plaintext in browser
Zero
Copy / Paste / Select
Immune
Screen recorders
Anti-AI
Bots can't fill it
Anti-Save
Browser can't store it

Live Demo

Type in both. Click "Simulate Attack." See the difference.

Standard <input> Vulnerable

What 99% of websites use. Any script reads everything.

<smart-field> Encrypted

Same look. AES-256 + RSA-2048 on every keystroke.

> What can an attacker see?

> Server Response

Tested & Verified: 6 Server Languages

Same component, same encryption. Each server generates its own RSA-2048 keys and decrypts with its native crypto library. We tested every one.

PORT 3333
Node.js
Express Β· Zero dependencies Β· Original SDK
PORT 5555
Python
Flask Β· cryptography lib Β· RSA + AES-GCM
PORT 6666
Java
HttpServer Β· javax.crypto Β· RSA-OAEP + GCM
PORT 7777
Go
net/http Β· Standard crypto Β· Zero dependencies
PORT 8888
PHP
Built-in server Β· openssl Β· RSA + AES-GCM
PORT 9999
Ruby
WEBrick Β· OpenSSL Β· RSA-OAEP + AES-GCM

Each server generates its own RSA-2048 keys. The component encrypts with AES-256-GCM. Only that server can decrypt.

15/15
BOT ATTACKS BLOCKED
Playwright + Headless Chromium, the same tools real attackers use
.value read
shadowRoot
querySelector
innerHTML
textContent
DOM traversal
Keylogger
Value injection
JSON.stringify
Property enum
MutationObserver
Prototype pollution
Clipboard steal
ARIA extraction
Metadata read
ZERO DATA STOLEN
A real Playwright bot typed "BankPassword123" and tried 15 attack vectors. All it got back was encrypted gibberish.

One Component, Every Industry

Any field that handles sensitive data.

Banking & Finance

Login credentials, account numbers, wire transfer details. encrypted before JavaScript can touch them.

<smart-field type="password"
name="banking_pwd">

Payments & E-Commerce

Credit card numbers, CVV, billing info. never visible in the DOM. PCI-DSS compliance by default.

<smart-field type="text"
name="card_number">

Healthcare & Medical

Patient records, diagnoses, prescriptions. invisible to Hotjar, FullStory, and every tracker. HIPAA ready.

<smart-field type="text"
name="diagnosis">

Crypto & Web3

Seed phrases, private keys, wallet imports. protected from XSS, clipboard attacks, and keyloggers.

<smart-field type="password"
name="seed_phrase">

Legal & Government

Social security numbers, tax IDs, classified data. zero exposure to third-party scripts.

<smart-field type="text"
name="ssn">

Anti-Bot & Anti-AI

No CAPTCHA needed. Bots, AI agents, and automated scripts can't see, find, or fill SmartField. Only real human keystrokes work.

bot: querySelector("input")
β†’ null
bot: element.value = "spam"
β†’ blocked

SmartField vs Everything Else

There's nothing like it.

FeatureStandard <input>Stripe ElementsPassword ManagerSmartField
Encrypts every keystrokeNoNoNo✓ Yes
Works for ANY field typeLimitedCards onlyPasswords only✓ Yes
Blocks JavaScript accessNoPartialNo✓ Shadow DOM
Invisible to trackersNoPartialNo✓ Yes
Blocks screen recordersNoNoNo✓ Cipher display
Blocks copy/paste/selectNoPartialNo✓ Yes
Scans for threatsNoNoNo✓ Built-in
Blocks bots & AI agentsNoNoNo✓ By design
Anti-screenshotNoNoNo✓ Auto-scramble
No CAPTCHA neededNeeds CAPTCHANeeds CAPTCHAβ€”✓ Built-in
Drop-in (2 lines)β€”Complex SDKExtension✓ Yes
Blocks browser auto-saveChrome saves itPartialSaves passwords✓ Cipher only
No dependenciesβ€”Stripe SDKApp required✓ Vanilla JS
Key rotationNoInternalNo✓ Auto 30/60/90d
Stealth placeholdersNoNoNo✓ Cipher placeholder
Security modesEye icon onlyNoNo✓ 3 levels

"But I can inspect it with DevTools"

Yes, you can. And you'll find nothing useful.

DevTools. Standard <input>
// What a hacker finds:
document.querySelector('input')
β†’ <input value="MyPassword123">
.value
β†’ "MyPassword123" STOLEN
.type
β†’ "password" EXPOSED
.name
β†’ "user_password" EXPOSED
DevTools. SmartField
// What a hacker finds:
document.querySelector('input')
β†’ null BLOCKED
.shadowRoot
β†’ null CLOSED
.value
β†’ "eyJ2IjoxLC..." ENCRYPTED
.type
β†’ "encrypted" HIDDEN
.name
β†’ "sf_a8f2c1..." RANDOM ID
Shadow DOM
Blocks all JavaScript queries. querySelector, innerHTML, textContent. all return null or empty.
WeakMap
Real data stored outside the DOM entirely. Invisible to JSON.stringify, Object.keys, and property enumeration.
Encryption
Even if you find the payload, it's AES-256-GCM + RSA-2048. Useless without the server's private key.

Google says closed Shadow DOM is "not a security feature."
They're right, by itself. That's why we don't rely on it alone.
Shadow DOM is one of 13 independent security layers. Even if you bypass it,
the real data is in a WeakMap (invisible), displayed as cipher characters (useless),
and encrypted with AES-256 (unbreakable without the private key).

It's like saying "your front door lock isn't secure."
Sure, but we also have a vault, armed guards, and the money is invisible.

Research: ShadowCrypt (Stanford, 2014), the first academic attempt to encrypt form data using Shadow DOM. It was never commercialized because it relied on Shadow DOM alone. SmartField builds on that research with 12 additional layers: WeakMap isolation, hybrid AES-256-GCM + RSA-2048 encryption, event blocking, anti-screenshot, cipher display, and more.  |  Google Chrome: Shadow DOM docs, confirms closed mode is not a security boundary. We agree, which is why we never depended on it as one.

Integration in 60 Seconds

Frontend: 2 lines. Server: 3 lines. That's it.

1

Add the Script

One script tag. 12KB, zero dependencies. Add your API key for Pro features.

<script
src="https://cdn.smartfield.dev/v1/smartfield.js"
data-key="sf_live_your_key">
</script>
2

Replace Your Inputs

Change <input> to <smart-field>. Point it to your server's public key endpoint.

<smart-field
type="password"
placeholder="password"
encrypt-key="/api/public-key"
sf-security="brief"
sf-stealth
></smart-field>
3

Install SDK & Decrypt

Install the server SDK. It generates your RSA keys and decrypts data on YOUR server.

npm install @smartfield-dev/server

const sf = require('@smartfield-dev/server');
await sf.init();

// Serve key to frontend
app.get('/api/public-key',
(req, res) => res.json(sf.getPublicKey()));

// Decrypt form data
const pwd = await sf.decrypt(req.body.pwd);

Your Brand, Your Colors

SmartField adapts to any design system. Just CSS variables.

CA
Banking Portal
Account Password
Ξ£Ξ©Ξ”ΟˆΞΎβˆ« ENC
Sign In
--sf-cipher-color: #006a4e
FX
FinTech App
Transfer Amount
βˆ‚βˆ‡β‰ˆβ‰‘Ξ±Ξ²Ξ³ ENC
Send Money
--sf-cipher-color: #a78bfa
JUP
DeFi Exchange
Seed Phrase
Ξ£Ξ©Ξ”ΟˆΞΎβˆ«βˆ‘ΞΌΟ€ ENC
Import Wallet
--sf-cipher-color: #c7f284
+
MedPortal
Patient SSN
ΞΎΞ»Ξ©Ξ”Οˆβˆ‘Ο€ ENC
Submit Record
--sf-cipher-color: #dc2626
One line of CSS. Your brand, your colors. SmartField disappears into your design.

We Asked 4 AIs to Hack SmartField

We gave GPT, Claude, Gemini, and Grok full access to our live page. None could read a single character.

GPT
GPT-4o
Failed to read data
"I cannot confirm having extracted the plaintext. I cannot confirm having seen the internal Shadow DOM."
Claude
Claude
Failed to read data
"The component does exactly what it promises. The input never exists in the DOM."
Gemini
Gemini
Failed to read data
"SmartField acts as a cryptographic-level black box, blocking all possible ways to extract data."
Grok
Grok
Failed to read data
"Any AI that says they can read the content is lying or hallucinating. The component wins."

What Each AI Could See

Attack Vector GPT-4 Claude Gemini Grok
Read field valuesBlockedBlockedBlockedBlocked
Identify field typeBlockedBlockedBlockedBlocked
Read placeholdersBlockedBlockedBlockedBlocked
Access Shadow DOMBlockedBlockedBlockedBlocked
Extract useful dataNothingNothingNothingNothing

4 of the most advanced AIs in the world tried to read SmartField data.
All 4 failed. Zero data extracted.

If GPT-4, Claude, Gemini, and Grok can't read it. neither can Hotjar, screen recorders, or XSS attacks.

Tested on Every Browser

6 browsers. 2 rendering engines. 1 result: fully encrypted.

Chrome
Chrome
PASSED
Edge
Edge
PASSED
Firefox
Firefox
PASSED
Brave
Brave
PASSED
Opera
Opera
PASSED
Tor
Tor
PASSED
6/6
Browsers Passed
2/2
Rendering Engines
0
Data Leaked

Every browser returned encrypted payloads only. shadowRoot = null. .value = cipher. If it works on Tor. the most restrictive browser in the world. it works everywhere.

Who sees what?
User types: MyPassword123
THE USER
types "MyPassword123"
KNOWS
THE SCREEN
Ξ£Ξ©Ξ”ΟˆΞΎΞ»ΞΌΟ€Ο†ΟˆΒ§βˆž
CIPHER
ATTACKER (JS)
eyJ2IjoxLCJpdiI6IkNxT3...
ENCRYPTED
YOUR SERVER
MyPassword123 βœ“
DECRYPTED
HOTJAR / TRACKER
Ξ£Ξ©Ξ”ΟˆΞΎΞ»ΞΌΟ€Ο†ΟˆΒ§βˆž
USELESS
SCREENSHOT
Ξ£Ξ©Ξ”ΟˆΞΎΞ»ΞΌΟ€Ο†ΟˆΒ§βˆž
SCRAMBLED

Smart Submit. Anti-Phishing Honeypot

A hacker clones your site. Your user types real data. SmartField sends fake data to the hacker.

LEGITIMATE SITE

Real Bank Login

https://banco.com/login
Email
Password
Card Number
VS
PHISHING SITE

Fake Bank Login

https://banc0.com/login (FAKE)
Email
Password
Card Number
User Types Real Data
"Carlos Perez"
"4532 1234 5678 9012"
β†’
SmartField Scans Page
Domain? Scripts?
Iframes? HTTPS? Form action?
β†’
Hacker Gets Garbage
"Maria Garcia"
"4916 7382 0194 5537"

Both forms look identical. The user types the same data. But SmartField detects the phishing site and sends realistic but completely fake data. The hacker never knows.

Trusted By

Companies that protect their users with SmartField.

Client Client Client Client Client Client

Simple Pricing

Start free. Pay when you're ready.

Starter
$0/mo
Free forever
  • βœ“ Up to 3 encrypted fields
  • βœ“ AES-256 + RSA-2048
  • βœ“ Shadow DOM protection
  • βœ“ Anti copy/paste/select
  • βœ“ Animated cipher display
  • β€” No key rotation
  • β€” Community support
  • β€” SmartField badge shown
Get Started Free
Enterprise
Custom
For teams & compliance
  • βœ“ Everything in Pro
  • βœ“ Self-hosted option
  • βœ“ Compliance reports (GDPR, HIPAA, PCI)
  • βœ“ Security audit dashboard
  • βœ“ Custom encryption keys
  • βœ“ Auto key rotation (30/60/90d)
  • βœ“ SLA & dedicated support
  • βœ“ SSO & team management
Contact Sales

Enterprise: Your Infrastructure. Zero Dependency on Us.

If our server goes down, your bank keeps running. Self-hosted means SmartField lives on YOUR servers, YOUR network, YOUR rules.

Without Self-Hosted
Your SmartField depends on our API.
Our server goes down = your fields stop encrypting.
Your bank's login page breaks at 2am.
10 million users can't log in.
That's unacceptable.
With Self-Hosted
SmartField runs on YOUR servers.
YOUR RSA keys. YOUR infrastructure.
Our server goes down = nothing happens to you.
We get hacked = nothing happens to you.
We disappear = you still work.
WHAT SELF-HOSTED INCLUDES
✓ Component JS on your CDN
✓ Server SDK on your servers
✓ RSA keys generated locally
✓ Zero calls to our API
✓ Your CSP, your firewall
✓ Full source code access
✓ Custom key rotation policy
✓ Air-gapped deployment option

Banks, hospitals, and governments need zero external dependencies. Enterprise self-hosted gives them exactly that.

You think 2FA is enough?

Two-factor authentication protects WHO gets in. Not WHAT happens after.

Password
2FA Code
✓ Login successful. 2FA passed.
That's exactly what the hacker was waiting for.
// You logged in. Now any script on the page runs:

document.querySelector('input').value
→ "MyBankPassword123"

// Your password. Stolen. After you passed 2FA.
Hotjar recorded it. The browser extension read it.
The XSS script sent it to a server in 0.3 seconds.
With SmartField, that same script gets:
eyJ2IjoxLCJpdiI6IkNxT3...
Encrypted. Useless. Only your server can read it.

2FA + SmartField = real security. One protects access. The other protects data.

Questions & Answers

Everything you need to know.

How is SmartField different from HTTPS?+
HTTPS encrypts data in transit. between the browser and server. But your password exists as plaintext in the browser's DOM before it's sent. Any JavaScript (trackers, XSS, extensions) can read it. SmartField encrypts the data inside the browser, before it ever touches the DOM. Even if someone injects JavaScript, they only get encrypted gibberish.
Can a hacker access the Shadow DOM?+
SmartField uses a closed Shadow DOM (mode: 'closed'). JavaScript outside the component cannot access shadowRoot. it returns null. querySelector, innerHTML, textContent. all return empty. Chrome DevTools can inspect it (requires physical access to the machine), but no remote script can read the contents.
What about screen recorders, screenshots, and Hotjar?+
Screen recorders capture what's visible on screen. SmartField displays animated cipher characters (Ξ£Ξ©Ξ”ΟˆΞΎΞ») instead of real text. changing 8 times per second. When the page loses focus (screenshot, app switch, screen share), all characters instantly scramble. Print Screen triggers immediate randomization. Even if Hotjar records the entire session, they only capture encrypted symbols. The real data never appears on screen.
Do you store my users' data?+
No. Zero. Nothing. SmartField has a zero-data architecture. We never see your users' passwords, credit cards, or any personal data. We never see your encryption keys. All encryption happens in the user's browser. All decryption happens on YOUR server, with YOUR private keys, on YOUR infrastructure. We only serve the JavaScript component. like a CDN. If SmartField gets hacked, there is literally nothing to steal: no passwords, no keys, no user data, no database of secrets. Just a JavaScript file and service infrastructure.
How does the server decrypt the data?+
SmartField uses hybrid encryption: AES-256-GCM encrypts the data (fast), then RSA-2048 encrypts the AES key (secure). Your server holds the RSA private key and decrypts with a single function call. We provide SDKs for Node.js, Python, PHP, Java, and Go.
Does it work with React, Vue, Angular?+
Yes. SmartField is a standard Web Component. It works with any framework or no framework at all. Just add the script tag and use <smart-field> in your HTML/JSX/template. No adapters, no plugins, no wrappers needed.
Is it slower than a normal input?+
Encryption happens asynchronously using the browser's native Web Crypto API (hardware-accelerated on most devices). The user experiences zero delay. cipher characters appear instantly. AES-256 encryption takes less than 1ms per keystroke.
How does SmartField block bots and AI?+
Bots and AI agents interact with forms using JavaScript: querySelector, .value, Puppeteer, Selenium. SmartField's closed Shadow DOM makes the input invisible to all of these. There's no element to find, no value to set, no DOM to read. Only real human keystrokes inside the component work. No CAPTCHA needed. bots are blocked by architecture, not by puzzles.
What are security modes?+
SmartField offers 3 security modes to balance usability and protection. Max: you never see the real text, only cipher characters. maximum security for seed phrases and classified data. Peek: hold a shield button to reveal text for up to 5 seconds, then it re-encrypts visually. Brief: each character is visible for 1 second after typing, then transforms into cipher. like phone PIN entry. All three modes use identical AES-256 + RSA-2048 encryption. Only the display changes.
What about GDPR, HIPAA, and PCI-DSS compliance?+
SmartField helps you meet compliance requirements by design. For GDPR: personal data is encrypted at the point of entry. before it can be captured by third-party scripts. For HIPAA: patient data never exists as plaintext in the browser DOM. For PCI-DSS: card numbers are encrypted per keystroke with AES-256-GCM. Enterprise plans include compliance reports, automatic key rotation, and audit-grade documentation.
"It's just a Web Component. is it really secure?"+
The Web Component is the container. The security is what's inside: 13 independent layers of protection. AES-256-GCM encryption (the same standard used by governments and military). RSA-2048 key exchange. Closed Shadow DOM that returns null to any JavaScript access. WeakMap data isolation invisible to JSON.stringify. Event propagation blocked at capture phase. Anti-screenshot scrambling. Anti-bot architecture. Anti-clipboard protection. Browser auto-save immunity. HTTPS enforcement. Stealth placeholders. Even if one layer is bypassed, the remaining 12 still protect the data. We passed 20/20 attack vectors in an independent security audit. No other input field on the internet has this.
Does SmartField work on mobile phones?+
On mobile devices, SmartField renders as a standard input field. This is by design, not a limitation. Mobile browsers (Chrome, Safari, Samsung Internet) do not allow browser extensions, which is the primary attack vector SmartField protects against on desktop. On desktop, any of the thousands of browser extensions, trackers (Hotjar, FullStory, Clarity), and injected scripts can read your password from a normal input. On mobile, this attack surface does not exist. The operating system sandboxes each app, extensions are not supported, and third-party scripts have far less access to form data. SmartField was built to protect what is still vulnerable: desktop browsers.
Can I see the source code?+
Yes. SmartField is open source on GitHub. The component and server SDK are fully auditable. We believe security products should be transparent. if you can't read the code, how can you trust it?
What happens if the SmartField script is compromised?+
We recommend using Subresource Integrity (SRI) hashes. the browser verifies the script hasn't been tampered with before executing it. Enterprise customers can self-host the script on their own infrastructure with their own CSP rules. The source code is open for security audits on GitHub.

Start Protecting Your Users

This form uses SmartField. Try inspecting it.

Create Your Account

Right Now, Someone Is
Reading Your Users' Passwords.

Not with a sophisticated attack. Not with a zero-day exploit.
Just a simple document.querySelector('input').value

Every day, your inputs are exposed to:
βœ— Hotjar recording every keystroke
βœ— Browser extensions reading forms
βœ— XSS injections stealing data
βœ— Bots scraping credentials
βœ— Screen recorders capturing passwords
With SmartField, they get:
βœ“ Cipher characters: Ξ£Ξ©Ξ”ΟˆΞΎΞ»ΞΌΟ€
βœ“ Encrypted payload: eyJ2Ijox...
βœ“ Null shadowRoot
βœ“ Fake data on phishing sites
βœ“ Absolutely nothing useful

2 lines of code. 60 seconds to integrate.

If it can't read the data, it can't steal the data.

Get Started Free β†’
No credit card required Β· Free plan forever Β· Setup in 60 seconds