Hunjin Ha

Posted on Mar 29

I built a browser-based X.509 certificate chain builder (no dependencies, pure Web Crypto API)

#javascript #security #cryptography #webdev

The Problem

Every time I needed to debug a certificate chain issue, I ended up juggling
openssl verify, openssl x509 -text, and manually cross-referencing DNs.
It works, but visualizing how a Root CA → Intermediate CA → Leaf chain fits
together is painful without a GUI.

Existing online tools either require uploading your cert to a server (not
great for sensitive certs) or are too simplistic to handle real chain scenarios.

So I built x509Lab — a browser-based X.509 certificate chain builder and
verifier that runs 100% client-side.

👉 Live demo: https://x509lab.vercel.app

What it does

Visual Chain Builder

Drag-and-drop tree UI to compose Root CA → Intermediate CA → Leaf chains.
You can also model Cross-Certificate relationships. Each node is a certificate
you either upload or generate on the spot.

Certificate Upload & Parsing

Upload PEM, DER, CRT, or CER files. The tool parses them and slots them into
the tree. Subject/Issuer DN, validity period, key usage, and public key
algorithm are all extracted and displayed.

8-Point Chain Verification

Click "Verify" and the tool checks:

Cryptographic signature validity (issuer signs subject)
Issuer DN ↔ Subject DN match
Validity period (not-before / not-after)
CA flag (basicConstraints: CA:TRUE)
Key Usage (keyCertSign)
Path length constraints
Algorithm consistency
Self-signed root detection

Test Certificate Generation

No certs on hand? Generate a full test chain in the browser:

RSA-2048 / RSA-4096
ECDSA P-256 / ECDSA P-384

Keys are generated with crypto.subtle.generateKey and never leave your browser.

Technical Highlights

Zero Dependencies

No node-forge, no jsrsasign, no OpenSSL.wasm — just the browser's native
Web Crypto API (crypto.subtle).

Custom ASN.1 / DER Parser

The hardest part. I wrote a custom ASN.1/DER encoder and parser from scratch.
Getting DER encoding right for certificate generation was tricky — especially
the TBSCertificate structure, integer sign-byte handling, and OID encoding.

If you've done this before, you know the pain of off-by-one errors in length
octets. Happy to share notes in the comments.

Single HTML File

The entire app is a single index.html. No build step, no Node.js, no
bundler. Just open the file and it works — or visit the Vercel deployment.

Use Cases

Learning PKI concepts — visualize how certificate chains work
Debugging TLS issues — verify chain structure before deploying
Security training — build intentionally broken chains to demonstrate common misconfigurations
Generating test certs — quick self-signed chains for local dev without touching openssl

What's Next

PKCS#12 (.p12/.pfx) export/import
CSR generation and parsing
Ed25519 algorithm support
openssl command auto-generation (output equivalent CLI commands)
Mobile responsive layout

DEV Community