⌘ K
attribute-safe · hex entities · xss-resistant · live

Encode for HTML attributes

Aggressively percent-encodes every non-alphanumeric character as a hex HTML entity. Safe to drop inside any attribute value — quoted, unquoted, or single-quoted. All processing runs locally.

HTML Attribute Encoder
Input
19 B
1 lines
Output
49 B
1 lines
Status
ready
live
Ratio
2.58×
out/in
input · attribute value
output · encoded
" onerror="alert(1)
Quick Start

How to encode for attributes

Every character outside [a-zA-Z0-9] becomes &#xHH;. This is the OWASP-recommended rule for arbitrary text inside HTML attributes.

  1. 01

    Paste attribute value

    Untrusted text destined for an attribute slot.

    Bytes flow through TextEncoder/TextDecoder for predictable UTF-8 semantics — emoji, surrogate pairs, and combining marks all encode losslessly.

    inputUTF-8TextEncoderlosslesslive
    input · raw bytesraw · UTF-8
    " onerror="alert(1)
    loaded · UTF-8MIME · ready
  2. 02

    Aggressive encode

    Spaces, quotes, equals, brackets — all become hex entities.

    Hash and signature operations call crypto.subtle from the Web Crypto API, so output matches OpenSSL / Node bit-for-bit.

    safeWeb Cryptosubtledeterministiclive
    rule · optionsnon-alnum · live
    " → "
    options applied · livelive
  3. 03

    Drop into attribute

    The output is safe inside quoted, unquoted, or single-quoted attrs.

    Options re-run instantly through useEffect + useMemo — switching URL-safe mode or padding doesn’t re-encode from scratch.

    livememoisedoptionsinstantreactive
    out · encoded&#x… · ready
    " onerror
    encoded · livelossless
  4. 04

    Copy or download

    One click to clipboard. Download as .txt.

    Copy uses the Async Clipboard API; downloads ship via Blob with the appropriate MIME (text/plain, image/png, …) so external tools recognise them.

    exportclipboardblobMIME-correctclient-side
    ok · copiedready · done
    Copied
    shipped · ready to shipsuccess
Pro tips

Encoding without surprises

Always UTF-8 first

Use TextEncoder / TextDecoder for bytes ↔ string conversion. btoa alone breaks on non-ASCII.

URL-safe vs standard Base64

Standard uses +, /, =; URL-safe swaps to -, _, no padding. Don’t mix them.

Hashes aren’t passwords

SHA-256 is fast; that’s good for fingerprints, bad for passwords. Use bcrypt / argon2 for credentials.

Watch padding rules

Some decoders are strict about = padding, others auto-pad. If round-trips fail at exactly 1 or 2 bytes, check padding.

Use Web Crypto for keys

Generate cryptographic keys via crypto.subtle, never Math.random. The latter is predictable.

JWT decode ≠ verify

Decoding a JWT just splits and base64-decodes. Verification needs the issuer’s public key / shared secret.

Related toolsHTML EncoderHTML DecoderHTML Entity LookupXML EscapeURL EncoderUnicode Converter
Use Cases

When to use attribute encoding

Defense-in-depth against XSS injection.

Untrusted attribute slots

title, alt, data-* attributes from user input. Output round-trips losslessly with the matching decoder — both run client-side, so end-to-end testing happens in a single tab. Encoding flows through TextEncoder for predictable UTF-8 semantics.

RFC-compliant

Unquoted attributes

Legacy templates that omit attribute quotes. Web Crypto's subtle.digest produces output that matches OpenSSL, GPG, and Node's crypto module byte-for-byte. That makes the result trustworthy as a content fingerprint, ETag, or integrity check.

OpenSSL-matched

Event handler payloads

Stop quote-break injection like " onerror=. Pairs cleanly with HMAC, JWT, and signed-URL workflows where bit-level correctness matters. The browser's crypto stack is FIPS 140-validated in Chrome and Firefox, so it's production-grade.

lossless

Server-side templates

When the templating engine lacks an attr() helper. Output uses canonical RFC 4648 / 7515 alphabets so curl, openssl, and any standards-compliant decoder accept it as input. URL-safe variants drop padding for tokens that travel in query strings.

byte-identical

Email HTML

Strictest renderers benefit from heavy encoding. Heavy hashing runs through useMemo so large inputs don't block typing. PBKDF2, bcrypt, and Argon2 expose configurable cost factors — tune for your threat model, not the default.

spec-grade

CSP supplement

Combine with CSP for layered XSS protection. Same input plus same options always yields identical bytes. That's the foundation for content-addressed storage (IPFS, Git, S3 ETags) and means the output is safe to commit to fixtures.

production-ready
FAQ

Frequently asked questions

HTML attribute parsing is forgiving — unquoted attributes end at whitespace, quoted ones at the matching quote. Encoding everything non-alphanumeric blocks every break-out vector OWASP enumerates.
For attributes, yes. The output is for HTML rendering only; it expands to the original on the screen. Gzip will collapse the redundancy on the wire.
Use a dedicated JS-context encoder. Attribute encoding alone isn't enough inside `onclick="…"`.
No. Body encoding only escapes &, <, >, ", '. Attribute encoding escapes far more — necessary because attribute parsing is more permissive.
No. Encoding runs locally in your browser.
Suggest a tool

Something missing?

Tell us what you need. We ship the top requests every two weeks.

Sent straight to the maintainers · no account needed
47 in queue·8 shipped this month
Request queued. Thanks!