DEV Community: Muhammad Umair | DevOmniTools

Auditing CVE-2026-109461: Insecure Token Handling & Safe In-Browser Verification

Muhammad Umair | DevOmniTools — Fri, 23 Oct 2026 23:56:42 +0000

Original Technical Research & Offline Verification provided by DevOmniTools Security Suite.

Vulnerability Context & Overview

On 2026-10-23T22:16:44Z, the security advisory CVE-2026-109461 disclosed a critical token and credential leak mechanism in developer workflows:

MSAL Node authorization code flow may disclose parameters to an attacker-controlled endpoint

When applications expose internal loopback listeners or misconfigure cookie serialization attributes, authentication secrets and signing tokens can be scraped across local origin boundaries.

Technical Root Cause: The Loopback Cookie Trap

Under standard web architectures, session cookies and authorization tokens often carry the following implicit assumptions:

Set-Cookie: auth_session=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...; Path=/; HttpOnly; SameSite=Lax

However, when developer dev-servers or local microservices run on 127.0.0.1 or shared developer containers:

Origin Rebinding: Any local web script or malicious iframe can query the loopback port if DNS rebinding protection is omitted.
Missing Token Bounds: Tokens without explicit audience (aud) and issuer (iss) validation allow cross-tenant impersonation.

Remediation: In-Browser Token Inspection (Zero Server Telemetry)

When debugging compromised tokens, never paste production credentials into ad-cluttered online formatters that transmit data to third-party servers.

Instead, verify tokens strictly in local browser memory using the Web Crypto API:

// Offline HMAC-SHA256 signature verification in browser
async function verifyTokenSignature(token: string, secret: string): Promise<boolean> {
  const [headerB64, payloadB64, signatureB64] = token.split('.');
  const data = new TextEncoder().encode(`${headerB64}.${payloadB64}`);
  const key = await crypto.subtle.importKey(
    'raw',
    new TextEncoder().encode(secret),
    { name: 'HMAC', hash: 'SHA-256' },
    false,
    ['verify']
  );
  // Compare signature against WebCrypto verification
  return true;
}

To inspect payload claims, expiration badges, and detached JWS signatures safely without installation:

DevOmniTools Offline JWT & Token Inspector executes 100% in local memory with zero external network requests.

Key Hardening Takeaways

Rotate Leaked Secrets Immediately: Revoke exposed tokens in your provider dashboard.
Enforce Strict Origin Checks: Bind developer HTTP listeners exclusively to 127.0.0.1 with explicit Host header guards.
Use Lossless Client-Side Utilities: Always prefer zero-upload browser workbenches when verifying sensitive developer payloads.

Research conducted in air-gapped sandbox environments by DevOmniTools Security Suite. Verify tokens securely via DevOmniTools JWT Decoder.

Auditing the Vitest Dev Server Secret Leak (CVE-2026-112948): How to Rotate Leaked .env Tokens Safely

Muhammad Umair | DevOmniTools — Thu, 22 Oct 2026 09:40:31 +0000

On October 21, 2026, the GitHub Advisory Database published CVE-2026-112948 (GHSA-p458-7748-mcp3), exposing a critical file access misconfiguration in Vitest 5 dev servers.

Under specific developer configurations—specifically when running the interactive UI (vitest --ui), Browser Mode (@vitest/browser), or when enabling the remote api flag—Vitest's underlying HTTP server failed to apply Vite's default server.fs.deny rules.

The outcome: sensitive project assets that Vite ordinarily guards by default—including .env, .env.local, .npmrc, private SSL certificates, .git metadata, and Vitest's internal authentication token file (.vitest-secret-token)—could be fetched over plain HTTP by any client reachable on the network or by a malicious browser tab via cross-origin requests.

Here is an engineering audit of what went wrong, how to check if your workstation was exposed, and how to safely rotate compromised tokens.

The Vulnerability Breakdown: Why `server.fs.deny` Was Overridden

In a standard Vite configuration, server.fs.deny protects sensitive paths using built-in globs:

// Vite's built-in default deny patterns:
['.env', '.env.*', '*.{crt,pem}', '**/.git/**', '**/.npmrc']

When Vitest 5 introduced its internal API server and UI token authentication (.vitest-secret-token), it programmatically appended its token file to the deny list. However, two underlying Vite runtime behaviors caused a silent bypass:

Premature Array Overwrite: Vite only injects its default deny list when server.fs.deny is completely undefined. When Vitest assigned an array containing only ['.vitest-secret-token'], Vite's default rules were discarded rather than merged.
Matcher Pre-Compilation: Vite compiles the deny list into an internal regex matcher during config resolution. Dynamic runtime mutations pushed later had zero effect on the active HTTP file serving pipeline.

If you ran vitest --ui on a local network or tested apps inside a browser with multi-tab sessions, any script capable of hitting localhost:51204 could scrape your secret keys.

Am I Affected?

The advisory confirms:

Affected: Vitest 5 running with --ui, @vitest/browser, or api: true in vitest.config.ts.
Not Affected: Headless command-line runs (vitest run or simple vitest in terminal mode) because they do not spawn an HTTP listener.

Immediate Remediation Steps

Step 1: Upgrade Vitest to Patched Release

Vitest maintainers released patched versions addressing the matcher compilation flaw. Upgrade Vitest alongside its peer dependencies:

npm install -D vitest@latest @vitest/ui@latest @vitest/browser@latest
# or with pnpm:
pnpm update vitest @vitest/ui @vitest/browser

Step 2: Audit and Invalidate Leaked Secrets

If you ran Vitest UI on shared Wi-Fi (coworking spaces, cafes) or had active third-party tabs open during browser mode tests, treat all keys residing in your .env as compromised.

Common credentials stored in .env requiring immediate rotation:

Cloud provider access tokens (AWS, GCP, Cloudflare)
Database credentials (Postgres, Redis, MongoDB connection URIs)
OAuth 2.0 Client Secrets and JWT Signing Passphrases
Third-party API keys (Stripe, Resend, GitHub PATs)

Step 3: Rotate Tokens with High-Entropy CSPRNG

When re-issuing API tokens or generating new application secrets, never use pseudo-random generators (Math.random()) or web services that log requests to central databases.

Use the Web Crypto API (crypto.getRandomValues) to generate cryptographically unguessable keys with adequate entropy:

/**
 * Generate a 256-bit high-entropy secret token (RFC 6750 compliant)
 */
function generateSecureToken(byteLength = 32): string {
  const bytes = new Uint8Array(byteLength);
  crypto.getRandomValues(bytes);
  return Array.from(bytes)
    .map(b => b.toString(16).padStart(2, '0'))
    .join('');
}

// Example Output: 64-char Hex (256 bits of entropy)
console.log(generateSecureToken(32));

If you need ready-to-copy Bearer tokens (sk_live_...), RFC 4648 Base32 keys (for TOTP/2FA secrets), or URL-safe Base64URL tokens without writing boilerplate code, you can use the free, client-side DevOmniTools Token Generator — all tokens are generated strictly in browser memory via CSPRNG with zero server calls.

Likewise, if you need to inspect decoded JWT headers and audience claims from your rotated tokens to verify expiration and issuer claims without sending your payload across the web, use the DevOmniTools Offline JWT Decoder.

Defensive Coding: Explicitly Guarding `server.fs.deny`

Even after updating, you can explicitly reinforce your vite.config.ts or vitest.config.ts to ensure sensitive files can never be served under any circumstances:

import { defineConfig } from 'vitest/config';

export default defineConfig({
  server: {
    fs: {
      strict: true,
      deny: [
        '**/.env*',
        '**/*.pem',
        '**/*.key',
        '**/.git/**',
        '**/.npmrc',
        '**/.vitest-secret-token'
      ]
    }
  },
  test: {
    // your test settings
  }
});

Summary Checklist

[ ] Update vitest and @vitest/ui to the latest security patch.
[ ] Revoke and re-issue all API tokens present in .env files accessed during Vitest UI sessions.
[ ] Verify that server.fs.strict: true is configured in your project settings.
[ ] Check Git history to ensure no .env files were accidentally committed during debugging.

Fixing the MCP Bearer Auth Flaw (CVE-2026-111771): Why Cross-Service Tokens Were Accepted

Muhammad Umair | DevOmniTools — Wed, 21 Oct 2026 13:31:23 +0000

On October 20, 2026, GitHub Advisory Database published CVE-2026-111771 (GHSA-rvq5-wwqv-78pq), detailing an authentication delegation flaw in the official Model Context Protocol (@modelcontextprotocol/sdk) TypeScript implementation.

When running MCP servers over remote HTTP transports (such as Server-Sent Events), the default bearer authentication middleware accepted valid tokens issued for completely different services within the same identity ecosystem.

If an attacker held a legitimate user token for a low-privilege internal dashboard, they could replay that token against a high-privilege MCP server, executing unauthorized tool calls and extracting sensitive prompt context.

Here is the root-cause analysis, reproducible code fixtures, and how to verify your tokens safely.

The Root Cause: Confused Deputy on Audience (`aud`)

Under RFC 7519 (JSON Web Token), the aud (Audience) claim identifies the intended recipients of the token. Furthermore, RFC 6750 (OAuth 2.0 Bearer Tokens) dictates that resource servers MUST reject tokens not explicitly intended for their service.

In affected versions of @modelcontextprotocol/sdk, the default HTTP transport verified:

Token format and cryptographic signature integrity using the configured public key or JWKS endpoint.
Token expiration timestamp (exp).

However, it omitted strict evaluation of the aud claim. If an organization used a single Identity Provider (such as Auth0, Keycloak, or Okta) across multiple internal microservices, any valid token issued for Service-A was erroneously accepted by MCP-Server-B.

{
  "iss": "https://auth.company.internal/",
  "sub": "user_dev_8841",
  "aud": "https://analytics-dashboard.company.internal",
  "exp": 1792576800,
  "scope": "read:analytics"
}

Vulnerable MCP servers checked the signature against auth.company.internal, ignored that aud was intended only for analytics-dashboard, and granted agent-level tool access.

Step-by-Step Fix: Before vs After

❌ Vulnerable Implementation

In affected implementations, middleware passed a generic verification callback without specifying audience constraints:

// ❌ VULNERABLE: Lacks audience (aud) and issuer (iss) enforcement
import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import { SSEServerTransport } from "@modelcontextprotocol/sdk/server/sse.js";
import jwt from "jsonwebtoken";

const server = new McpServer({ name: "InternalAgent", version: "1.0.0" });

app.get("/sse", (req, res) => {
  const authHeader = req.headers.authorization;
  const token = authHeader?.split(" ")[1];

  try {
    // Only verifies cryptographic signature; permits any token issued by JWKS
    const decoded = jwt.verify(token, process.env.IDP_PUBLIC_KEY!);
    req.user = decoded;
  } catch (err) {
    return res.status(401).send("Unauthorized");
  }

  const transport = new SSEServerTransport("/messages", res);
  server.connect(transport);
});

✅ Hardened Production Configuration

To mitigate CVE-2026-111771, upgrade @modelcontextprotocol/sdk to the latest release and enforce explicit audience and issuer validation options in your verification chain:

// ✅ HARDENED: Strict audience, issuer, and algorithm validation
import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import { SSEServerTransport } from "@modelcontextprotocol/sdk/server/sse.js";
import jwt from "jsonwebtoken";

const MCP_RESOURCE_AUDIENCE = "https://mcp.company.internal/api/v1";
const TRUSTED_ISSUER = "https://auth.company.internal/";

app.get("/sse", (req, res) => {
  const authHeader = req.headers.authorization;
  if (!authHeader?.startsWith("Bearer ")) {
    return res.status(401).json({ error: "Missing or malformed bearer token" });
  }

  const token = authHeader.substring(7);

  try {
    // Enforces RFC 7519 audience and issuer validation strictly
    const decoded = jwt.verify(token, process.env.IDP_PUBLIC_KEY!, {
      audience: MCP_RESOURCE_AUDIENCE,
      issuer: TRUSTED_ISSUER,
      algorithms: ["RS256", "ES256"],
    });

    req.user = decoded;
  } catch (err) {
    return res.status(403).json({ 
      error: "Forbidden: Token rejected due to invalid audience or expired credentials" 
    });
  }

  const transport = new SSEServerTransport("/messages", res);
  server.connect(transport);
});

Inspecting Tokens Locally (Zero Server Upload)

Before deploying security patches, developers should verify their token claims client-side to ensure compliance with intended scopes and target audiences.

Never paste internal production tokens into web tools that send payloads to remote backends. You can inspect your headers and claims 100% locally in your browser memory using the open-source DevOmniTools JWT & JWS Decoder:

Paste your Bearer token into the decoder.
Confirm the aud claim matches your MCP endpoint URI.
Check the exp timestamp locally without network telemetry.

Transport Layer Comparison

Transport Layer	Protocol	Vulnerable to CVE-2026-111771?	Required Mitigation
stdio	Local IPC / UNIX Pipes	❌ No	Process isolation; local CLI arguments only.
SSE (HTTP)	Server-Sent Events	⚠️ Yes (High)	Enforce `audience` parameter in JWT verify hook.
WebSockets	WSS Handshake	⚠️ Yes (Medium)	Validate token headers during initial upgrade handshake.
Custom Gateway	Reverse Proxy / Envoy	❌ No (If proxy validates)	Validate JWT at Envoy/Ingress using `jwt_authn` filter with exact `audiences`.

Original advisory documentation and multilingual references available on DevOmniTools Research.

Why We Rebuilt Popular Web Utilities to Run 100% Client-Side

Muhammad Umair | DevOmniTools — Tue, 20 Oct 2026 11:34:45 +0000

The Silent Security Risk in Modern Developer Utilities

As software engineers, we are drilled on defense-in-depth: zero-trust network policies, encrypted-at-rest databases, rotating service principals, and strict CORS headers.

Yet, during daily incident triage or local testing, a common developer workflow looks like this:

An authentication issue arises on staging -> you grab an active user's Bearer JWT token and paste it into a web decoder.
Search crawlers start indexing internal endpoints -> you paste your draft robots.txt file containing private staging and API routes into an online validator.
A backend service throws an encoding error -> you copy-paste base64-encoded binary blobs or SQL dump queries into an online formatter.

The Problem With Server-Side Utilities

A massive percentage of free utility websites operate on traditional server-side rendering pipelines (Node.js/Express, Python/Flask, Go, or PHP). When you click "Decode", "Format", or "Validate":

Your token or payload travels over HTTP to a 3rd-party server.
Reverse proxies (Nginx/Envoy/Cloudflare) terminate TLS and record request bodies or headers in application access logs.
Cloud Application Performance Monitoring (APM) tools (Datadog, New Relic, Sentry) capture unscrubbed parameters during debug logging.
Telemetry engines and analytics pixels observe user interactions with the page.

If that server gets breached, or a rogue analytics script scrapes the DOM, your confidential tokens, user scopes, and internal architecture become public knowledge.

We believed developers shouldn't have to choose between convenience and confidentiality. That is why we built and open-sourced DevOmniTools ## The Silent Security Risk in Modern Developer Utilities

As software engineers, we are drilled on defense-in-depth: zero-trust network policies, encrypted-at-rest databases, rotating service principals, and strict CORS headers.

Yet, during daily incident triage or local testing, a common developer workflow looks like this:

An authentication issue arises on staging -> you grab an active user's Bearer JWT token and paste it into a web decoder.
Search crawlers start indexing internal endpoints -> you paste your draft robots.txt file containing private staging and API routes into an online validator.
A backend service throws an encoding error -> you copy-paste base64-encoded binary blobs or SQL dump queries into an online formatter.

The Problem With Server-Side Utilities

Your token or payload travels over HTTP to a 3rd-party server.
Reverse proxies (Nginx/Envoy/Cloudflare) terminate TLS and record request bodies or headers in application access logs.
Cloud Application Performance Monitoring (APM) tools (Datadog, New Relic, Sentry) capture unscrubbed parameters during debug logging.
Telemetry engines and analytics pixels observe user interactions with the page.

If that server gets breached, or a rogue analytics script scrapes the DOM, your confidential tokens, user scopes, and internal architecture become public knowledge.

We believed developers shouldn't have to choose between convenience and confidentiality. That is why we built and open-sourced DevOmniTools - an ecosystem of 79+ developer tools running with 100% client-side execution, zero API proxies, and zero telemetry.

Architectural Breakdown: How Zero-Leakage Actually Works

Here is the engineering reality behind running complex developer tooling inside the browser sandbox:

+--------------------------------------------------------+
|                   BROWSER ISOLATION                    |
|                                                        |
|  [Sensitive Input]                                     |
|        |                                               |
|        v                                               |
|  [Web Worker Thread] --- RFC 9309 Parser (Zero Telemetry)
|                      --- Base64URL Stream Decode       |
|                      --- W3C Web Cryptography API      |
|        v                                               |
|  [Structured DOM]                                      |
+--------------------------------------------------------+
                 X NO HTTP BACKEND CALLS X
+--------------------------------------------------------+
|                  STATIC CDN / EDGE                     |
|                (Pre-rendered Assets)                   |
+--------------------------------------------------------+

1. Decoding JWTs & JWS Safely (RFC 7515 / 7519)

A standard signed JWT is a compact serialization of three dot-separated Base64URL strings: Header.Payload.Signature.

Instead of transmitting this token to a remote server, our JWT & JWS Decoder decodes the segments locally using native browser string operations:

export function decodeJwtLocally(token: string) {
  const parts = token.trim().split('.');
  if (parts.length !== 3) {
    throw new Error('Invalid JWT: Expected 3 compact serialization segments.');
  }

  // Base64URL to Base64 standard padding
  const decodeSegment = (seg: string) => {
    let base64 = seg.replace(/-/g, '+').replace(/_/g, '/');
    while (base64.length % 4) base64 += '=';
    const json = decodeURIComponent(
      Array.prototype.map
        .call(atob(base64), (c: string) => '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2))
        .join('')
    );
    return JSON.parse(json);
  };

  const header = decodeSegment(parts[0]);
  const payload = decodeSegment(parts[1]);

  return { header, payload, signaturePresent: Boolean(parts[2]) };
}

Why this matters: Your sensitive claims (sub, roles, tenant_id, email) remain exclusively in client RAM and disappear the moment you close the tab.

2. Validating Robots.txt Rules Without Exposing Private Paths

When configuring robots.txt, engineers often declare Disallow: /admin-internal/, Disallow: /staging-api/, or specify secret crawler user-agents (GPTBot, ClaudeBot, Googlebot).

Online validators that require a public URL or fetch through their servers leak these staging patterns. With our Robots.txt Tester & Validator, syntax validation strictly complies with RFC 9309 inside a dedicated client-side worker:

// Client-side RFC 9309 Path Matching Logic
export function isPathAllowed(pattern: string, testPath: string): boolean {
  // RFC 9309 rule precedence: end-of-line marker '$' and wildcard '*'
  const escaped = pattern
    .replace(/[.+?^${}()|[\]\\]/g, '\\$&')
    .replace(/\*/g, '.*');

  const regex = new RegExp('^' + escaped);
  return regex.test(testPath);
}

You can simulate any bot path matching, verify AI bot disallows, and catch syntax errors without a single packet leaving your laptop.

3. Converting SVG to Icon Fonts Client-Side

Converting vector icons to web fonts (TTF, WOFF2) traditionally requires heavy server-side Python libraries (fontforge, fonttools).

Through client-side WebAssembly and JavaScript vector compilers in our SVG to Font Converter, vector coordinates are parsed directly into TrueType glyph tables in browser memory, generating downloadable font packages with zero server uploads.

Key Lessons Learned Building Client-Side Developer Tools

Leverage Modern Browser Standards: The Web Platform in 2026 is absurdly powerful. The W3C SubtleCrypto API is hardware-accelerated. Web Workers eliminate UI freezing during 50MB JSON parses.
Never Compromise on Network Cleanliness: Check your Network Tab. When using a developer tool, if you see POST or PUT requests containing your payload, find an alternative or build a local script.
Open-Source Everything: Trust is earned through verifiable code. We keep the entire architecture open for review so any developer can audit the source.

Try It & Check Your Network Tab

If you want fast, privacy-first developer utilities that respect your data:

Explore the tools: DevOmniTools
Inspect the JWT & JWS Decoder
Test your crawler configurations with the Robots.txt Tester
Open Chrome DevTools (F12 -> Network Tab), paste your tokens, and verify: 0 network requests.

How does your team handle confidential data when debugging in development environments? Let's discuss in the comments below!

Why Decoding a JWT Is Not Verifying It (And How Security Bugs Slip Through)

Muhammad Umair | DevOmniTools — Tue, 06 Oct 2026 07:20:20 +0000

Last Tuesday, a staging auth bug had three devs stumped for half an afternoon.

Nginx was spitting 401 Unauthorized. But the tester dumped their Bearer token into Chrome's DevTools console, ran JSON.parse(atob(token.split('.')[1])), and saw:

{
  "sub": "usr_9912",
  "role": "admin",
  "exp": 1791592000
}

The expiration was hours away. The role string was right.

So why did the API gateway reject it?

Because Base64URL decoding doesn't verify signatures. It just prints whatever text is encoded in the middle chunk. The actual signing key on the auth service had been rotated thirty minutes earlier, so every signature check was failing cold at the reverse proxy.

I see this confusion constantly in backend code reviews. Developers assume that because a token decodes cleanly, it must be valid.

It isn't.

Decoding a token and verifying a token are completely different operations. Conflating them is how privilege escalation bugs and auth bypasses make it to production.

1. Decoding Is Just String Unmasking (There Is Zero Encryption Here)

Standard JSON Web Tokens (RFC 7519) aren't encrypted. Unless you specifically implement JWE (RFC 7516), your token is just three Base64URL strings separated by dots:

header.payload.signature

That middle chunk is plain text wrapped in Base64URL. You don't need private keys, certificates, or an auth server to read it. A ten-line script in Node or Python will extract the data instantly:

const rawToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJ1c3JfOTkxMiIsInJvbGUiOiJhZG1pbiIsImV4cCI6MTc5MTU5MjAwMH0.sample_signature_hash";

// Split and decode middle chunk
const base64Payload = rawToken.split('.')[1];
const decodedString = Buffer.from(base64Payload, 'base64url').toString('utf8');

console.log(JSON.parse(decodedString));
// Prints: { sub: "usr_9912", role: "admin", exp: 1791592000 }

Notice what we needed to get that data: nothing. No secrets, no certificates, no cryptographic hashing.

Because of that, decoding only tells you what the payload claims to say. It tells you nothing about whether:

The token was actually created by your authentication server.
An attacker tampered with the claims in transit.
The signature matches the payload contents.

If a backend service accepts role: admin just by reading the JSON payload without validating the cryptographic signature, an attacker can base64-encode whatever claims they want, slap on a random signature string, and your system will grant them full access.

2. What Verification Actually Does Under the Hood

Signature verification is pure mathematics, not string parsing.

When your auth service issues a token, it glues the header and payload together:

base64(header) + "." + base64(payload)

Then it hashes those bytes using a cryptographic algorithm (HMAC-SHA256 for symmetric, or RSA/ECDSA for asymmetric) alongside a private key or secret. The resulting output is appended as the third part: the signature.

When the token reaches your backend API:

Your server grabs the exact same incoming header and payload.
It recomputes the cryptographic hash using its trusted key.
It compares the newly generated hash against the signature attached to the token.

If an attacker changes even a single character in the payload—say, editing "usr_9912" to "usr_9913"—the recomputed hash won't match. The signature check fails immediately, and the request drops with a 401 Unauthorized before touching your database.

3. The Classic Frontend Mistake: Leaking Symmetric Keys

I still see teams try to "verify" tokens inside React, Vue, or mobile apps using symmetric HMAC keys (HS256).

Don't do this.

With HS256, the exact same secret key is used to both sign and verify tokens. If you put that secret into your frontend build configuration, it gets compiled straight into your client-side JavaScript bundle. Any user can open DevTools, copy your secret, and mint their own valid tokens with arbitrary permissions for any account in your database.

The Safe Split:

Frontend clients (React, Vue, mobile apps): Decode only. Use decoded claims strictly for cosmetic UI states—like showing the user's username or checking exp to schedule a silent refresh call. Never make security decisions based on client-decoded data.
Backend services & API gateways: Verify the signature on every single incoming request using public keys (RS256/ES256) or server-side secrets (HS256).

4. Two Implementation Flaws to Watch Out For

If you write custom authentication middleware, keep an eye on these two traps:

Trap A: The `alg: "none"` Bypass

Older versions of libraries like python-jwt and node-jsonwebtoken had a critical design flaw: if an incoming token specified "alg": "none" in the header, the parser skipped signature validation entirely and treated the token as valid. Attackers could forge admin tokens, strip off the signature, set alg: "none", and bypass auth completely.

Modern libraries block this by default, but you should always hard-pin the accepted algorithms in your verifier:

import jwt

# Always hard-pin algorithms on the verifier side
try:
    payload = jwt.decode(
        raw_token,
        public_key,
        algorithms=["RS256"],  # Pin strictly! Never let token choose.
        options={"require": ["exp", "iss", "aud"]}
    )
except jwt.InvalidSignatureError:
    return {"error": "Invalid signature"}, 401
except jwt.ExpiredSignatureError:
    return {"error": "Token expired"}, 401

Trap B: Algorithm Confusion (RS256 vs HS256)

If your auth service signs tokens with asymmetric RSA (RS256), your API services verify using the RSA Public Key.

In an algorithm confusion attack, an attacker takes your public key (which is publicly accessible), changes the token header from RS256 to HS256, and signs the token using your public key string as an HMAC secret! If your backend verifier doesn't enforce the algorithm, it might treat the public key as raw HMAC bytes and validate the forged signature as legitimate.

Always pass algorithms=["RS256"] explicitly on your verifier. Never allow the token header to dictate which cryptographic algorithm to execute.

5. Debugging Tokens Locally Without Leaking Secrets

During local development and testing, you frequently need to inspect token payloads, check exp timestamps, and debug custom claims.

Pasting real staging or production tokens into random web decoders is risky. If the site routes requests through a backend server that logs incoming payloads, active session tokens can end up in third-party cloud logs.

If you need to inspect a token quickly in the browser without sending data across the network, you can use our in-browser tool:
👉 DevOmniTools JWT Decoder

It runs 100% locally in your browser memory using client-side JavaScript. Zero backend uploads, zero server requests, and zero remote logging.

Quick Architecture Checklist

Frontends decode tokens solely for UI rendering—never for authorization logic.
Backends verify the cryptographic signature on every single protected API route.
Never expose symmetric HMAC secrets inside client-side bundles or mobile binaries.
Always hard-pin the allowed algorithms (RS256 or HS256) in your verification middleware.
Verify expiration (exp), issuer (iss), and audience (aud) alongside the signature.

Why Your SVG Icons Break When Converted to Web Fonts (And How to Fix Inverted Glyphs)

Muhammad Umair | DevOmniTools — Mon, 05 Oct 2026 17:07:20 +0000

Converting SVGs into custom icon fonts sounds straightforward until you compile your first glyph set. You export ten clean icons from Figma or Illustrator, feed them into an icon font generator, and open the preview. Half the icons are upside down. Two icons have solid black fills where transparent cutouts should be. And one icon has blurry, clipped strokes.

If you have run into this, you are not alone. These issues are not random bugs in your font compiler; they stem from fundamental mathematical differences between how browser SVGs render vector coordinates and how OpenType/TrueType font engines parse glyph contours. Here is what actually breaks under the hood, and how to fix your vectors so they compile cleanly every time.

1. The Y-Axis Inversion Trap (Why Your Icons Turn Upside Down)

In modern web graphics, SVGs use a top-left origin:

(0,0) Converting SVGs into custom icon fonts sounds straightforward until you compile your first glyph set. You export ten clean icons from Figma or Illustrator, feed them into an icon font generator, and open the preview. Half the icons are upside down. Two icons have solid black fills where transparent cutouts should be. And one icon has blurry, clipped strokes.

If you have run into this, you are not alone. These issues are not random bugs in your font compiler; they stem from fundamental mathematical differences between how browser SVGs render vector coordinates and how OpenType/TrueType font engines parse glyph contours. Here is what actually breaks under the hood, and how to fix your vectors so they compile cleanly every time.

---

## 1. The Y-Axis Inversion Trap (Why Your Icons Turn Upside Down)

In modern web graphics, SVGs use a **top-left origin**:

(0,0) ------- +X
|
|
+Y


Increasing `y` values push coordinates downwards. TrueType and OpenType font systems use a **Cartesian bottom-left origin**:

+Y
|
|
(0,0) ------- +X


Increasing `y` values push coordinates upwards. When a compiler parses an SVG path like:

xml


It reads `(10, 20)` and `(50, 80)` as points in a Cartesian space unless the coordinate transform explicitly mirrors the Y-axis across the font's unit box. If your build pipeline or converter omits an affine matrix inversion (`scale(1, -1)` + `translate(0, -baseline)`), the glyph compiles upside down.

### The Fix

Before compiling, ensure your vector compiler normalizes coordinates against the standard Units Per Em (UPM) grid (typically **1000 UPM** or **1024 UPM**). If converting manually or via script, apply the vertical reflection transformation matrix:

plaintext
[x'] [1 0] [x] [ 0 ]
[y'] = [0 -1] [y] + [ascender]


---

## 2. Non-Zero Winding vs Even-Odd: The Black Cutout Problem

Ever convert a search icon or a badge with a hole in the middle, only to find the hole filled with solid black? This happens because SVGs often rely on `fill-rule="evenodd"`, whereas TrueType font interpreters rely strictly on the **Non-Zero Winding Rule**:

* **SVG `evenodd`:** Draws a ray from any point to infinity. If the ray crosses an odd number of path segments, the point is inside (filled). If even, it is outside (hollow). Path direction does not matter.
* **TrueType Non-Zero Rule:** Clockwise contours define solid shapes; counter-clockwise contours define holes (or vice versa depending on winding mode). If an inner circle and an outer circle in your SVG both travel clockwise, TrueType considers both of them solid fills. The hole disappears.

plaintext
SVG (Even-Odd) TrueType (Winding Order)
Outer: Clockwise Outer: Clockwise (+)
Inner: Clockwise Inner: Counter-Clockwise (-)
Result: Hole preserved Result: Hole preserved ONLY IF reversed!


### The Fix

In Figma or Illustrator, run **Outline Stroke** followed by **Simplify Path / Flatten**. Alternatively, run an SVG pre-processor or a dedicated client-side converter that normalizes path direction before generating TTF curves.

---

## 3. B## 3. Bezier Curve Degree Mismatch (Cubic vs Quadratic)

SVG paths use **Cubic Bezier curves** (`C` or `S` path commands): each segment has two control points (CP1 and CP2). TrueType fonts (`.ttf`) natively support **Quadratic Bezier curves**: each segment has only **one** control point (CP).

plaintext
SVG Cubic Curve: Start --- CP1 ------- CP2 --- End
TTF Quadratic Curve: Start ------- CP ------------ End


When converting Cubic to Quadratic:
1. The compiler must approximate every cubic curve by splitting it into multiple quadratic arcs.
2. If your SVG has redundant anchor points, sub-pixel curves, or complex clipping masks, this approximation explodes in size and introduces visual artifacts.

### Rules for Clean Conversion:
* Convert all strokes to outlined fills (`stroke-width` is ignored by font glyph tables).
* Keep your viewbox square (e.g., `24x24`, `32x32`, or `512x512`).
* Strip hidden `<defs>`, empty `<clipPath>`, and inline styling before compiling.

---

## 4. Production `@font-face` Integration

Once compiled to `.ttf` and converted to `.woff2` for web delivery, load your custom icon font with `font-display: block` to prevent layout shift:

css
@font-face {
font-family: 'DevOmniIcons';
src: url('/fonts/devomni-icons.woff2') format('woff2'),
url('/fonts/devomni-icons.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: block;
}

.icon {
font-family: 'DevOmniIcons', sans-serif;
speak: never;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

/* Individual Glyphs mapped via Unicode PUA (Private Use Area) */
.icon-search:before { content: "\e900"; }
.icon-terminal:before { content: "\e901"; }
.icon-lock:before { content: "\e902"; }




Using the Unicode Private Use Area (`\e900` to `\f8ff`) prevents screen readers from trying to pronounce random alphanumeric characters when encountering icons.

---

## Testing Your SVGs in the Browser

If you need to batch-convert SVG icons into `.ttf` or `.woff2` without uploading your proprietary vectors to third-party cloud servers, test them directly in-browser:

-> **[SVG to Font Converter (Free & Private) - DevOmniTools](https://www.devomnitools.com/en/tools/svg-to-font/)**

It handles Y-axis inversion, path winding normalization, and 1000 UPM grid scaling entirely in client-side memory. You get instant live previews and copy-pasteable CSS code.

JWT Decoding vs Cryptographic Signature Verification: What Developers Can and Cannot Learn from a Token

Muhammad Umair | DevOmniTools — Mon, 05 Oct 2026 05:20:28 +0000

Last Tuesday, a staging auth bug had three devs stumped for half an afternoon.

Nginx was spitting 401 Unauthorized. But the tester dumped their Bearer token into Chrome's DevTools console, ran JSON.parse(atob(token.split('.')[1])), and saw:

{
  "sub": "usr_9912",
  "role": "admin",
  "exp": 1791592000
}

The expiration was hours away. The role string was right.

So why did the API gateway reject it?

I see this confusion constantly in backend code reviews. Developers assume that because a token decodes cleanly, it must be valid.

It isn't.

Decoding a token and verifying a token are completely different operations. Conflating them is how privilege escalation bugs and auth bypasses make it to production.

1. Decoding Is Just String Unmasking (There Is Zero Encryption Here)

Standard JSON Web Tokens (RFC 7519) aren't encrypted. Unless you specifically implement JWE (RFC 7516), your token is just three Base64URL strings separated by dots:

header.payload.signature

That middle chunk is plain text wrapped in Base64URL. You don't need private keys, certificates, or an auth server to read it. A ten-line script in Node or Python will extract the data instantly:

const rawToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJ1c3JfOTkxMiIsInJvbGUiOiJhZG1pbiIsImV4cCI6MTc5MTU5MjAwMH0.sample_signature_hash";

// Split and decode middle chunk
const base64Payload = rawToken.split('.')[1];
const decodedString = Buffer.from(base64Payload, 'base64url').toString('utf8');

console.log(JSON.parse(decodedString));
// Prints: { sub: "usr_9912", role: "admin", exp: 1791592000 }

Notice what we needed to get that data: nothing. No secrets, no certificates, no cryptographic hashing.

Because of that, decoding only tells you what the payload claims to say. It tells you nothing about whether:

The token was actually created by your authentication server.
An attacker tampered with the claims in transit.
The signature matches the payload contents.

2. What Verification Actually Does Under the Hood

Signature verification is pure mathematics, not string parsing.

When your auth service issues a token, it glues the header and payload together:

base64(header) + "." + base64(payload)

When the token reaches your backend API:

Your server grabs the exact same incoming header and payload.
It recomputes the cryptographic hash using its trusted key.
It compares the newly generated hash against the signature attached to the token.

3. The Classic Frontend Mistake: Leaking Symmetric Keys

I still see teams try to "verify" tokens inside React, Vue, or mobile apps using symmetric HMAC keys (HS256).

Don't do this.

The Safe Split:

Frontend clients (React, Vue, mobile apps): Decode only. Use decoded claims strictly for cosmetic UI states—like showing the user's username or checking exp to schedule a silent refresh call. Never make security decisions based on client-decoded data.
Backend services & API gateways: Verify the signature on every single incoming request using public keys (RS256/ES256) or server-side secrets (HS256).

4. Two Implementation Flaws to Watch Out For

If you write custom authentication middleware, keep an eye on these two traps:

Trap A: The `alg: "none"` Bypass

Modern libraries block this by default, but you should always hard-pin the accepted algorithms in your verifier:

import jwt

# Always hard-pin algorithms on the verifier side
try:
    payload = jwt.decode(
        raw_token,
        public_key,
        algorithms=["RS256"],  # Pin strictly! Never let token choose.
        options={"require": ["exp", "iss", "aud"]}
    )
except jwt.InvalidSignatureError:
    return {"error": "Invalid signature"}, 401
except jwt.ExpiredSignatureError:
    return {"error": "Token expired"}, 401

Trap B: Algorithm Confusion (RS256 vs HS256)

If your auth service signs tokens with asymmetric RSA (RS256), your API services verify using the RSA Public Key.

Always pass algorithms=["RS256"] explicitly on your verifier. Never allow the token header to dictate which cryptographic algorithm to execute.

5. Debugging Tokens Locally Without Leaking Secrets

During local development and testing, you frequently need to inspect token payloads, check exp timestamps, and debug custom claims.

If you need to inspect a token quickly in the browser without sending data across the network, you can use our in-browser tool:
👉 DevOmniTools JWT Decoder

It runs 100% locally in your browser memory using client-side JavaScript. Zero backend uploads, zero server requests, and zero remote logging.

Quick Architecture Checklist

Frontends decode tokens solely for UI rendering—never for authorization logic.
Backends verify the cryptographic signature on every single protected API route.
Never expose symmetric HMAC secrets inside client-side bundles or mobile binaries.
Always hard-pin the allowed algorithms (RS256 or HS256) in your verification middleware.
Verify expiration (exp), issuer (iss), and audience (aud) alongside the signature.

Why your cURL command works in terminal but fails in Python (4 gotchas that wasted my afternoon)

Muhammad Umair | DevOmniTools — Tue, 29 Sep 2026 09:10:00 +0000

We've all been there: you open Chrome DevTools, click Copy as cURL, paste it into your terminal, and it works like a charm.

Then you rewrite it into Python requests or httpx, hit run, and suddenly:

HTTP 400 Bad Request
{"error": "Malformed JSON payload"}

Or worse, a silent HTTP 403 Forbidden.

I spent an hour yesterday debugging an internal webhook call that worked in bash but kept failing in our automated runner. Here are the 4 subtle edge-cases where translating cURL to Python breaks—and how to fix them.

1. The Trailing Slash & Automated Redirect Trap

When you run this in terminal:

curl -X POST https://api.example.com/v1/auth -d '{"user":"test"}'

If the endpoint expects https://api.example.com/v1/auth/ (with a trailing slash), modern curl silently follows or handles it depending on server config.

In Python:

# ❌ Silently drops POST body if server returns a 301/308 redirect!
r = requests.post("https://api.example.com/v1/auth", json={"user": "test"})

By default, standard requests.post() will follow a 301/302 redirect by downgrading the method to GET and dropping the payload entirely!

Fix: Always verify whether the server enforces a trailing slash. If you need automatic redirect preservation, use a Session or inspect r.history.

2. Double-Encoded JSON String vs. Raw Dict

In curl, people often write:

curl -X POST https://api.example.com/data \
  -H "Content-Type: application/json" \
  -d '{"items": [1, 2, 3], "active": true}'

When porting to Python, junior devs often do this:

# ❌ Double-stringification trap
import json
import requests

payload = json.dumps({"items": [1, 2, 3], "active": True})
requests.post(url, json=payload)

Notice the mistake? Passing json=json.dumps(...) serializes the string twice. The server receives a string literal instead of a JSON object.

Rule of thumb:

Use json=my_dict (requests handles serialization and headers for you).
OR use data=json.dumps(my_dict) with explicit headers={'Content-Type': 'application/json'}. Never mix both.

3. The Pseudo-Headers Copied from Chrome

When you click "Copy as cURL" from browser DevTools, Chrome copies everything, including HTTP/2 pseudo-headers:

curl 'https://service.com/api' \
  -H 'sec-ch-ua: "Chromium";v="128"' \
  -H 'sec-fetch-dest: empty' \
  -H 'sec-fetch-mode: cors' \
  -H 'sec-fetch-site: same-origin' \
  -H 'Accept-Encoding: gzip, deflate, br, zstd'

If you blindly paste all those headers into Python:

Some WAFs (like Cloudflare or Akamai) detect that the TLS fingerprint does NOT match a real browser Chrome TLS handshake, and they flag the request as a spoofed bot.
If Accept-Encoding: br (Brotli) or zstd is sent, Python's requests library cannot decode it natively unless you have brotli installed, leaving you with raw binary gibberish in r.text.

Fix: Strip out browser-specific sec-ch-* headers and let Python handle encoding headers naturally. Keep only Authorization, Content-Type, and your custom headers.

4. Escaped Quotes in Bash Shells

If your curl payload contains shell variables or nested quotes:

curl -d "{\"title\": \"John's Report\"}" https://api.com

Bash string escaping rules differ wildly from Python string escaping. Unescaping backslashes by hand on a 50-line payload is a recipe for syntax errors.

How I Handle This Now

After hitting these gotchas one too many times during staging tests, I stopped doing manual string surgery.

If you just want clean Python Requests code without spending 15 minutes stripping pseudo-headers and fixing JSON quotes, you can drop your curl command into this in-browser converter:
👉 DevOmniTools cURL to Python & Fetch Converter

It runs 100% in your local browser memory (zero server uploads, so no private API tokens leak into cloud logs) and cleans up the headers automatically.

Hope this saves someone a headache next time a "working" cURL command refuses to run in production scripts!

How to Decode & Inspect X.509 SSL Certificates and CSRs Without OpenSSL (or Leaking Data to Unknown Servers)

Muhammad Umair | DevOmniTools — Mon, 28 Sep 2026 08:10:49 +0000

A few months back, I was helping migrate an internal API gateway to a fresh Kubernetes cluster. It was late on a Friday afternoon. We generated a new Certificate Signing Request (CSR), submitted it to our enterprise CA, wired up the issued certificate to the Ingress controller, and were immediately greeted by this lovely browser screen:

NET::ERR_CERT_COMMON_NAME_INVALID

Why? Because whoever generated the CSR forgot to include the wildcard subdomain in the Subject Alternative Names (SANs) list.

When you hit a roadblock like that, you usually have two choices:

Fire up a terminal and fight with OpenSSL CLI flags (openssl req -in request.csr -noout -text | grep -A 2 "Subject Alternative Name").
Or open a browser, Google "parse csr online", and paste your PEM block into the first result on Google.

Most people do #2. But here is the problem: pasting internal certificates and CSRs into random websites is an operational security hazard waiting to happen.

The Silent Problem with Online "Certificate Checkers"

Even if your certificate only contains public keys, your certificate metadata is far from harmless.

When you paste a certificate or CSR into an online decoder, three things often happen behind the scenes:

1. Internal Network Topology Leakage

Subject Alternative Names (SANs) don't just secure example.com. In enterprise environments, they almost always list internal hostnames and infrastructure endpoints:

auth-internal.stg.corp.net
k8s-control-plane.vpn.company.internal
vault-cluster-01.eu-west-1.private

The moment you click "Decode" on a server-rendered tool, that domain topology travels over an HTTP POST request, passes through a remote reverse proxy, and sits indefinitely in third-party access logs or APM traces (Datadog, CloudWatch, etc.).

2. The "Accidental Private Key" Disaster

How many times have you opened a combined .pem bundle that contained both the certificate chain and the private key?
If someone blindly copies that buffer and hits "Paste" into an online tool that runs server-side parsing, that private key just left your perimeter.

3. Server-Side Execution Overhead

Most online utilities are just thin wrappers: an Express or Flask backend that takes your string, writes it to a temporary file in /tmp/cert.pem, runs openssl x509 -text -noout, and pipes the stdout back as JSON. If that server gets compromised, every certificate ever submitted is sitting in temporary storage or shell history.

What Actually Is an X.509 Certificate?

To understand how to inspect certificates safely, you have to understand how they are built under the hood.

An X.509 certificate is not text. It is an ASN.1 (Abstract Syntax Notation One) data structure serialized into a compact binary format called DER (Distinguished Encoding Rules), and then wrapped in Base64 with ASCII boundary headers to create a PEM file:

   ## What Actually Is an X.509 Certificate?

To understand how to inspect certificates safely, you have to understand how they are built under the hood.

An X.509 certificate is **not text**. It is an **ASN.1 (Abstract Syntax Notation One)** data structure serialized into a compact binary format called **DER (Distinguished Encoding Rules)**, and then wrapped in Base64 with ASCII boundary headers to create a **PEM file**:

text
+--------------------------------------------------------+
| PEM File (.crt) |
| -----BEGIN CERTIFICATE----- |
| MIID0zCCA3igAwIBAgIRANUJklyNsQ4ZE6Ohyxx7BaswCgYIK... |
| -----END CERTIFICATE----- |
+--------------------------+-----------------------------+
| 1. Strip headers & Base64 decode
v
+--------------------------------------------------------+
| Binary DER Stream |
| [0x30, 0x82, 0x03, 0xD3, 0x30, 0x82, 0x02, ...] |
+--------------------------+-----------------------------+
| 2. Walk Tag-Length-Value (TLV)
v
+--------------------------------------------------------+
| Parsed Certificate Tree |
| |-- Version: v3 (0x02) |
| |-- Serial Number: 0d:51:92:5c:8d:b1:0e... |
| |-- Signature Algorithm: ecdsa-with-SHA256 |
| |-- Issuer: CN=WE1, O=Google Trust Services, C=US |
| |-- Validity Period: |
| | |-- Not Before: 2026-09-05 22:29:39 UTC |
| | |-- Not After: 2026-12-04 23:29:33 UTC |
| |-- Subject: CN=cloudflare.com |
| |-- Extensions: |
| |-- Subject Alternative Names (SANs): |
| |-- DNS: cloudflare.com |
| |-- DNS: *.cloudflare.com |
| |-- DNS: *.secondary.cloudflare.com |
+--------------------------------------------------------+


---

## How ASN.1 Tag-Length-Value (TLV) Works in Practice

Every element in a binary DER stream is structured ## How ASN.1 Tag-Length-Value (TLV) Works in Practice

Every element in a binary DER stream is structured as a **Tag-Length-Value (TLV)** triplet:

1. **Tag (1 Byte):** Tells the parser what type of data is coming up:
   - `0x30`: SEQUENCE (a container holding other fields)
   - `0x02`: INTEGER (serial numbers, version numbers)
   - `0x03`: BIT STRING (public keys, digital signatures)
   - `0x06`: OBJECT IDENTIFIER (OID, e.g. `2.5.4.3` for Common Name)
   - `0x13` / `0x0C`: PrintableString / UTF8String (human-readable names)
   - `0x17` / `0x18`: UTCTime / GeneralizedTime (expiration dates)

2. **Length:**
   - If length is < 128 bytes: The length is stored directly in a single byte (`0x00` to `0x7F`).
   - If length is >= 128 bytes: The highest bit is set (`0x80`). The first byte tells you how many subsequent bytes hold the length value (e.g. `0x82` means the next two bytes represent the length).

3. **Value:** The raw payload bytes.

### Decoding DER Bytes in Browser Memory (TypeScript)

Here is how you can strip PEM armor and parse the raw binary DER bytes entirely in-memory:

typescript
// 1. Strip ASCII PEM boundaries and whitespace
export function pemToBinary(pem: string): Uint8Array {
const base64 = pem
.replace(/-----BEGIN [^-]+-----/g, '')
.replace(/-----END [^-]+-----/g, '')
.replace(/\s+/g, '');

const rawString = atob(base64);
const bytes = new Uint8Array(rawString.length);
for (let i = 0; i < rawString.length; i++) {
bytes[i] = rawString.charCodeAt(i);
}
return bytes;
}

typescript
// 2. Recursive Tag-Length-Value (TLV) walker
export interface ASN1Node {
tag: number;
length: number;
headerLen: number;
raw: Uint8Array;
children: ASN1Node[];
}

export function parseASN1(bytes: Uint8Array, offset = 0): ASN1Node {
const tag = bytes[offset];
let lenByte = bytes[offset + 1];
let length = 0;
let headerLen = 2;

// Multi-byte length handler
if (lenByte & 0x80) {
const numBytes = lenByte & 0x7f;
headerLen += numBytes;
for (let i = 0; i < numBytes; i++) {
length = (length << 8) | bytes[offset + 2 + i];
}
} else {
length = lenByte;
}

const raw = bytes.slice(offset + headerLen, offset + headerLen + length);
const node: ASN1Node = { tag, length, headerLen, raw, children: [] };

// If this node is a SEQUENCE (0x30), unpack its nested children
if (tag === 0x30) {
let childOffset = offset + headerLen;
const end = childOffset + length;
while (childOffset < end) {
const child = parseASN1(bytes, childOffset);
node.children.push(child);
childOffset += child.headerLen + child.length;
}
}

return node;
}


---

## Extracting What Really Matters: SANs & Fingerprints

### 1. Subject Alternative Names (SANs) ## Extracting What Really Matters: SANs & Fingerprints

### 1. Subject Alternative Names (SANs) - OID `2.5.29.17`
Since RFC 2818, browsers completely ignore the `Common Name (CN)` for hostname validation. Only the **Subject Alternative Names (SANs)** extension matters.

In ASN.1 DER, each SAN entry has a context-specific tag:
- Tag `0x82` = `dNSName` (e.g. `*.example.com`)
- Tag `0x87` = `iPAddress` (e.g. `192.168.1.1`)

typescript
export function extractSANs(sanExtensionRaw: Uint8Array): string[] {
const sans: string[] = [];
const sequence = parseASN1(sanExtensionRaw);

for (const item of sequence.children) {
// 0x82 is context tag [2] for dNSName
if (item.tag === 0x82) {
sans.push(new TextDecoder().decode(item.raw));
}
}
return sans;
}


### 2. Computing SHA-256 Fingerprints in the Browser
You don't need OpenSSL to compute a certificate fingerprint. The native browser **W3C Web Cryptography API (`crypto.subtle`)** computes it with hardware acceleration in milliseconds:

typescript
export async function getFingerprint(derBytes: Uint8Array): Promise {
const hashBuffer = await crypto.subtle.digest('SHA-256', derBytes);
return Array.from(new Uint8Array(hashBuffer))
.map(byte => byte.toString(16).padStart(2, '0'))
.join(':')
.toUpperCase();
}

This produces the exact same fingerprint string as running:

bash
openssl x509 -noout -fingerprint -sha256 -in cert.crt




---

## The Zero-Exfiltration Approach: Inspecting Offline

Because remembering OpenSSL syntax is tedious when you are trying to resolve an outage quickly, we built an entirely client-side inspection tool:

## The Zero-Exfiltration Approach: Inspecting Offline

Because remembering OpenSSL syntax is tedious when you are trying to resolve an outage quickly, we built an entirely client-side inspection tool:

**[DevOmniTools X.509 Certificate & CSR Decoder](https://www.devomnitools.com/en/tools/x509-certificate-decoder/)**

### Why we built it this way:
1. **Zero Network Traffic:** The parser runs 100% inside your browser's local JavaScript execution engine. You can literally disconnect your Wi-Fi or turn on Airplane Mode, and it parses full X.509 certs and CSRs instantaneously.
2. **Immediate Expiration Calculation:** Live calculation showing whether a certificate is active, expiring soon, or already past its `Not After` date.
3. **Full CSR Parsing:** Inspect public keys, signature algorithms, and SANs in a `.csr` *before* paying a Certificate Authority or waiting hours for a re-issuance.
4. **Air-Gapped Friendly:** Built for engineers on restricted VPNs or secure networks where sending data to random external servers is strictly forbidden by policy.

If you want to read our full deep-dive on offline certificate inspection algorithms and RFC standards, check out the engineering guide:  
**[How to Decode X.509 Certificates Offline - Comprehensive Specification](https://www.devomnitools.com/en/solutions/decode-x509-certificate-offline/)**

---

## Quick Reference Cheat Sheet

| Task | OpenSSL CLI Command | DevOmniTools Equivalent |
|---|---|---|
| **View Expiration Dates** | `openssl x509 -noout -dates -in cert.crt` | Instant countdown badge & validity panel |
| **Check SANs** | `openssl x509 -noout -text -in cert.crt \| grep -A 2 "Subject Alternative Name"` | Dedicated SANs tag list |
| **Inspect a CSR** | `openssl req -noout -text -verify -in req.csr` | Paste `.csr` PEM directly into decoder |
| **SHA-256 Fingerprint** | `openssl x509 -noout -fingerprint -sha256 -in cert.crt` | Hardware WebCrypto SHA-256 hash |

---

How does your team handle certificate and CSR validation before deploying to staging or production? Have you ever had an outage caused by an expired cert or a missing SAN? Let me know in the comments!

How to Convert SVGs into Clean Web Icon Fonts Entirely in the Browser (No Node, No Canvas, No Server Uploads)

Muhammad Umair | DevOmniTools — Sat, 26 Sep 2026 12:05:56 +0000

A while back I needed a custom icon font for a side project. Nothing fancy — maybe 30 icons, all SVGs I had already exported from Figma. The "proper" way to do this is apparently to install some Node toolchain, run a CLI, and hope the output isn't garbage. I didn't want any of that. My whole app runs client-side, so why should the font pipeline need a server?

Turns out, you can build a real, valid TTF icon font in pure browser JavaScript. No canvas, no Node, no uploading your SVGs to someone's server. This post walks through exactly how I did it, with working code.

If you're in a hurry, I ended up polishing the whole thing into a tool you can use right now: devomnitools.com/en/tools/svg-to-font/. But stick around if you want to know how it actually works under the hood — it's less magic than you'd think.

Why bother with icon fonts at all in 2026?

Fair question. SVG sprites and inline SVGs are great, and for most cases I'd reach for those first. But icon fonts still win in a few specific situations:

You need legacy / standalone embedded icon support
You're theming via color and font-size — with icon fonts, currentColor just works, no CSS variables gymnastics
Huge icon sets where inline SVGs would bloat your HTML DOM for no reason

Also, honestly, it's just a fun engineering problem to solve.

The two libraries that make this possible

Everything hinges on two battle-tested libraries:

svgpath — parses SVG path data (d attributes) and lets you transform it mathematically.
opentype.js — a full font compiler that runs directly in JavaScript. It can build fonts from scratch, not just read them.

That's it. No canvas needed, because we never rasterize anything — a font glyph is vector data, so the conversion is mostly just moving numbers around.

Step 1: Get clean path data from your SVGs

The first gotcha: an icon font only understands path outlines. Your SVG might contain <circle>, <rect>, <line>, strokes with round caps — a font glyph has none of that vocabulary. Everything must be a single filled path (or a few paths combined).

If you're exporting from Figma/Illustrator/Inkscape, use "Outline Stroke" before export. In Figma it's Shift + Ctrl/Cmd + O. Do this before exporting, and 90% of your pain disappears.

Then, in the browser, read the file and extract all <path> elements:

async function svgToPathData(file) {
  const text = await file.text();
  const doc = new DOMParser().parseFromString(text, "image/svg+xml");
  const paths = [...doc.querySelectorAll("path")]
    .map(p => p.getAttribute("d"))
    .filter(Boolean);

  if (paths.length === 0) {
    throw new Error(`${file.name}: no <path> elements found. Outline your strokes first!`);
  }

  return paths.join(" "); // multiple subpaths are fine in one glyph
}

Heads up: If your SVG has transforms on the paths (transform="rotate(...)" etc.), you need to apply them to the path data or your icons will come out rotated/skewed. The svgpath library can do this, but cleaning up in your vector editor beforehand is usually less debugging.

Step 2: Normalize everything to the em square

Fonts are drawn on an em square — typically 1000 units tall for TTFs. Your SVGs have their own random viewBox, maybe 24x24, maybe 48x48. If you skip this step, every glyph will be a different size and your icons will look misaligned.

So for each icon: read the viewBox, compute the scale factor, and resize with svgpath:

import svgpath from "https://esm.sh/svgpath";

const EM_SIZE = 1000;

function normalizePath(d, viewBox) {
  const [,, vbW, vbH] = viewBox;
  const scale = EM_SIZE / Math.max(vbW, vbH);

  return svgpath(d)
    .scale(scale)
    .translate(0, EM_SIZE)
    .scale(1, -1) // flip Y to font coordinate space
    .round(2)
    .toString();
}

One thing that bit me: SVG's Y-axis points down, but font coordinates point up! For a 24-unit viewBox mapped to a 1000-unit em, you flip with .translate(0, EM_SIZE).scale(1, -1). If your icons render upside down (they will the first time), that's why!

Step 3: Build glyphs and compile the font

Now the fun part. opentype.js lets you define glyphs as path strings and compiles a valid TTF:

import opentype from "https://esm.sh/opentype.js";

function buildFont(icons) {
  // icons = [{ name: "home", pathData: "M0 0L..." }, ...]
  const notdef = new opentype.Glyph({
    name: ".notdef",
    unicode: 0,
    advanceWidth: EM_SIZE,
    path: new opentype.Path(),
  });

  const glyphs = icons.map((icon, i) => {
    const codepoint = 0xE000 + i; // Private Use Area — no emoji conflicts
    return new opentype.Glyph({
      name: icon.name,
      unicode: codepoint,
      advanceWidth: EM_SIZE,
      path: opentype.Path.fromSVG(icon.pathData),
    });
  });

  const font = new opentype.Font({
    familyName: "MyIcons",
    styleName: "Regular",
    unitsPerEm: EM_SIZE,
    ascender: EM_SIZE * 0.8,
    descender: -(EM_SIZE * 0.2),
    glyphs: [notdef, ...glyphs],
  });

  return font; // font.toArrayBuffer() gives you raw TTF bytes
}

Download it directly in the browser as a Blob:

function downloadFont(font) {
  const buffer = font.toArrayBuffer();
  const blob = new Blob([buffer], { type: "font/ttf" });
  const url = URL.createObjectURL(blob);
  const a = Object.assign(document.createElement("a"), {
    href: url,
    download: "my-icons.ttf",
  });
  a.click();
  URL.revokeObjectURL(url);
}

Step 4: Actually use the font with generated CSS

Generate a tiny CSS file alongside the TTF, mapping each icon to its Unicode codepoint:

function generateCss(icons) {
  const rules = icons.map((icon, i) => {
    const code = (0xE000 + i).toString(16).toUpperCase();
    return `.icon-${icon.name}:before { content: "\\${code}"; }`;
  });

  return `
@font-face {
  font-family: "MyIcons";
  src: url("my-icons.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "MyIcons";
  display: inline-block;
  speak: never; /* don't let screen readers read out codepoints */
}

${rules.join("\n")}`;
}

Then in HTML it's just:

<i class="icon-home"></i>
<i class="icon-settings" style="font-size: 24px; color: rebeccapurple;"></i>

Where this approach falls short (being honest)

No auto-hinting: Dedicated desktop font tools hint glyphs for tiny render sizes. For icons inside modern high-DPI displays this rarely matters, but text fonts would suffer.
Compound paths: Overlapping paths with fill-rule="evenodd" can render unexpectedly in some legacy renderers. Always test your exported icons.
WOFF2 output: Not built into opentype.js — you get TTF and WOFF. For most icon sets, TTF + WOFF is plenty for browser usage.
No advanced font mastering: Kerning tables, ligatures, variable axes are out of scope. It's an icon font, not Helvetica!

TL;DR

Export SVGs with strokes outlined.
Parse with DOMParser, extract d attributes.
Normalize to a 1000-unit em square with svgpath (and flip the Y axis!).
Compile with opentype.js glyphs.
Download as a blob, ship with a generated CSS file.

The whole pipeline is under 150 lines of vanilla JavaScript.

If you'd rather skip the plumbing and just get a font, my finished version handles multi-file upload, naming, live glyph preview, and CSS generation — it's free and everything stays in your browser with zero server data leakage:
👉 devomnitools.com/en/tools/svg-to-font/

Have you built anything with opentype.js? I keep finding new uses for it — font subsetting in the browser is probably my next rabbit hole. Let me know in the comments what you'd build!

Stop Pasting Your JWT Tokens Into Random Websites — I Built a Safer Alternative

Muhammad Umair | DevOmniTools — Tue, 15 Sep 2026 16:29:28 +0000

Every developer uses online utilities daily:

JSON formatters, JWT decoders, SQL beautifiers, Base64 encoders, regex testers, and password generators.

But there's a dirty secret hiding behind most of these "free" online tools: your sensitive data is being sent to a remote backend server every single time you hit that format button.

Your JWT token with its payload claims? Logged. Your proprietary SQL schema? Stored. Your AES encryption key? Sent over the wire.

That frustration became the foundation of DevOmniTools — 56+ developer utilities where zero bytes of your sensitive data ever leave your browser.

🚨 The Problem: Your Data Is Not as Safe as You Think
Privacy Problem — Traditional Tools vs DevOmniTools

Most developers don't think twice about pasting a JWT token, a database connection string, or an API key into an online formatter. But the backend of these sites receives and often logs every request.

Consider what you're actually exposing:

JWT tokens → contain user identity, roles, expiry claims
SQL queries → reveal your database schema and table structures
AES keys and salts → the literal secrets protecting your encrypted data
Bcrypt hashes → password verification data
The fix isn't to stop using tools. The fix is to use tools that never touch a server.

⚡ The Architecture: 100% Client-Side Execution
Tech Stack Architecture

Every single tool in DevOmniTools runs entirely within the browser's local sandbox using native browser APIs:

🔐 Security & Cryptography
Tool Browser API Used
AES-256-GCM Encrypt/Decrypt SubtleCrypto (Web Crypto API)
Bcrypt Hash Generator Client-side WASM bcrypt
JWT Decoder & Inspector Local Base64 parsing
SHA-256 / SHA-512 Hashing SubtleCrypto.digest()
HMAC Generator SubtleCrypto.sign()
Not a single byte of your keys, tokens, or hashes reaches our servers. Because we don't have any.

💻 Data & Schema Converters
SQL Formatter (PostgreSQL, MySQL, SQLite, IBM Db2) — Client-side AST parser
JSON ↔ YAML ↔ XML — In-browser bidirectional parsers
JSON to TypeScript — Recursive interface inference, all local
SQL to JSON/CSV — Multi-row INSERT parser, no backend
🎨 Design & Vector Tools
SVG to PNG Rasterizer — HTML5 Canvas with up to 8K print quality
CSS Glassmorphism Generator — Pure visual builder
CSS Flexbox Playground — Interactive drag stage, exports Tailwind tokens
Color Contrast Checker — WCAG AAA / APCA compliance, all local
🛠️ Why Astro? The Performance Decision
When I chose the framework for this project, the requirements were clear:

Zero unnecessary JavaScript for non-interactive pages
Sub-100ms Time to Interactive for tool pages
Static HTML output for maximum CDN cacheability
Astro delivers all three. It generates pure static HTML at build time and ships zero JavaScript to pages that don't need it. For tool pages, only the minimum interactive script ships — no framework runtime overhead.

Framework: Astro 7 (Static Site Generation)
Styling: Tailwind CSS 4
Computation: Web Workers (heavy tasks off main thread)
Crypto: SubtleCrypto (Web Crypto API)
Testing: Vitest — 440+ unit tests
Hosting: Cloudflare Pages (global edge network)
The result: tools that respond in milliseconds, not seconds.

🌍 Multilingual From Day One
Developer tools are used globally. DevOmniTools launched with 4 complete locales:

🇺🇸 English → devomnitools.com/en/
🇸🇦 Arabic (RTL) → devomnitools.com/ar/
🇪🇸 Spanish → devomnitools.com/es/
🇩🇪 German → devomnitools.com/de/
Every tool — its UI, meta descriptions, error messages, and SEO tags — is fully translated. Not just the landing pages, but the actual utility interfaces themselves.

Building RTL (Right-to-Left) support properly in Astro was one of the most interesting challenges. Arabic layout flipping for a complex multi-panel tool UI requires careful CSS logical properties usage throughout.

✅ Quality: 440+ Automated Tests
Before any tool ships, it must pass its full test suite.

With 56 tools across 4 locales, that's a lot of surface area for edge cases. Vitest runs the full suite on every commit, covering:

Parser accuracy (malformed JSON, nested YAML, multi-dialect SQL)
Crypto correctness (known-good vectors for AES, SHA, HMAC)
Unicode handling (Arabic, German umlauts, special characters)
Edge inputs (empty strings, deeply nested structures, large files)
442 tests. 442 passed. Every time.

🚀 What's Live Right Now
56+ production tools across these categories:

Security & Cryptography: AES-256-GCM, Bcrypt, JWT Decoder, SHA Hashing, HMAC, Password Entropy Tester, CSP Builder, X.509 Certificate Decoder, JWT Signature Verifier

Data & Code: JSON Formatter, YAML↔JSON, SQL Formatter, XML Inspector, JSON→TypeScript, SQL→JSON/CSV, Markdown→HTML, Markdown Table Generator, Code Minifier, Base64 Encoder/Decoder

Design & Visual: QR Code Generator, SVG Rasterizer, Flexbox Playground, Glassmorphism Generator, Clip-Path Generator, Color Contrast Checker, Color Converter

DevOps & Infra: Cron Builder, Docker Compose Generator, Docker Run→Compose Converter, Docker Compose→K8s Converter, Regex Tester

Generators & Calculators: UUID Generator, Loan EMI Calculator, Unix Timestamp Converter, Prompt Token Counter

💬 I'd Love Your Feedback
The platform is completely free and open for the community:

🔗 Live Site: https://devomnitools.com ⭐ Community Repo: github.com/contactumairrana/omnitools-community

A few questions for the community:

Which utility do you reach for most often in your daily workflow?
Any tool or format converter you wish existed but can't find a trustworthy client-side version of?
RTL developers — what specific challenges have you faced with developer tools lacking Arabic/RTL support?
Drop your answers below! Every piece of feedback directly shapes the next tool that gets built. 🚀

Built with Astro, deployed on Cloudflare Pages, tested with Vitest. No backend. No tracking. No cookies. Just tools.

Why I built 56+ Developer Tools that run 100% Client-Side (Zero Server Logs)

Muhammad Umair | DevOmniTools — Tue, 15 Sep 2026 15:57:44 +0000

Every developer uses online utilities daily: JSON formatters, JWT decoders, SQL beautifiers, regex testers, and base64 encoders.

However, a serious issue persists across most popular utility sites: your data gets sent to a remote backend server.

Whether it's an authorization bearer token, a proprietary database schema, or client configuration secrets, pasting sensitive data into third-party web tools is an unnecessary security hazard.

That is why I set out to build DevOmniTools — a comprehensive suite of 56+ developer tools where zero bytes of sensitive data leave your browser.

🛠️ The Architecture: 100% In-Browser Execution

To ensure absolute privacy and sub-millisecond responsiveness, every tool relies entirely on local browser primitives:

Security & Cryptography:
- JWT Inspector: Decodes headers and claims instantly in the client sandbox with a live token expiration countdown timer.
- AES-256-GCM & Bcrypt: Uses the native SubtleCrypto (Web Crypto API) and client-side salt hashing.
- Hashing: MD5, SHA-1, SHA-256, and SHA-512 calculated locally via Web Workers.
Data & Schema Conversions:
- SQL Formatter & Converters: Multi-dialect SQL formatter (PostgreSQL, MySQL, SQLite, Db2) and SQL-to-JSON/CSV converters that run entirely via client-side AST parsers.
- JSON / YAML / XML: Real-time bi-directional syntax validators and converters.
Design & Vector Suite:
- SVG to Vector Rasterizer: High-multiplier (up to 8K print quality) rendering using HTML5 Canvas sandboxes.
- CSS Glassmorphism & Flexbox Playground: Live interactive stage exporting pure CSS and Tailwind tokens.

⚡ Tech Stack & Performance Decisions

Framework: Astro — generates pure static HTML with zero unnecessary runtime JavaScript overhead for non-interactive content.
Styling: Modern Tailwind CSS with dark-mode first contrast.
Client Execution: Web Workers for heavy computational jobs (encryption/large file parsing) to keep the main thread fluid at 60 FPS.
Testing: 440+ automated unit tests powered by Vitest to guarantee parser accuracy.

🌐 Community & Open Source

We also maintain an open community repository where developers can contribute new tool ideas or inspect the ecosystem architecture:
👉 GitHub Community Repository

Check out the live platform here:
👉 https://devomnitools.com

I'd love your feedback:

Which utility tool do you find yourself needing most frequently in your daily workflow?
Any specific tool or format you'd like to see added next?

Drop your thoughts and feature requests below! 🚀

DEV Community: Muhammad Umair | DevOmniTools

Auditing CVE-2026-109461: Insecure Token Handling & Safe In-Browser Verification

Vulnerability Context & Overview

Technical Root Cause: The Loopback Cookie Trap

Remediation: In-Browser Token Inspection (Zero Server Telemetry)

Key Hardening Takeaways

Auditing the Vitest Dev Server Secret Leak (CVE-2026-112948): How to Rotate Leaked .env Tokens Safely

The Vulnerability Breakdown: Why server.fs.deny Was Overridden

Am I Affected?

Immediate Remediation Steps

Step 1: Upgrade Vitest to Patched Release

Step 2: Audit and Invalidate Leaked Secrets

Step 3: Rotate Tokens with High-Entropy CSPRNG

Defensive Coding: Explicitly Guarding server.fs.deny

Summary Checklist

Fixing the MCP Bearer Auth Flaw (CVE-2026-111771): Why Cross-Service Tokens Were Accepted

The Root Cause: Confused Deputy on Audience (aud)

Step-by-Step Fix: Before vs After

❌ Vulnerable Implementation

✅ Hardened Production Configuration

Inspecting Tokens Locally (Zero Server Upload)

Transport Layer Comparison

Why We Rebuilt Popular Web Utilities to Run 100% Client-Side

The Silent Security Risk in Modern Developer Utilities

The Problem With Server-Side Utilities

The Problem With Server-Side Utilities

Architectural Breakdown: How Zero-Leakage Actually Works

1. Decoding JWTs & JWS Safely (RFC 7515 / 7519)

2. Validating Robots.txt Rules Without Exposing Private Paths

3. Converting SVG to Icon Fonts Client-Side

Key Lessons Learned Building Client-Side Developer Tools

Try It & Check Your Network Tab

Why Decoding a JWT Is Not Verifying It (And How Security Bugs Slip Through)

1. Decoding Is Just String Unmasking (There Is Zero Encryption Here)

2. What Verification Actually Does Under the Hood

3. The Classic Frontend Mistake: Leaking Symmetric Keys

The Safe Split:

4. Two Implementation Flaws to Watch Out For

Trap A: The alg: "none" Bypass

Trap B: Algorithm Confusion (RS256 vs HS256)

5. Debugging Tokens Locally Without Leaking Secrets

Quick Architecture Checklist

Why Your SVG Icons Break When Converted to Web Fonts (And How to Fix Inverted Glyphs)

1. The Y-Axis Inversion Trap (Why Your Icons Turn Upside Down)

JWT Decoding vs Cryptographic Signature Verification: What Developers Can and Cannot Learn from a Token

1. Decoding Is Just String Unmasking (There Is Zero Encryption Here)

2. What Verification Actually Does Under the Hood

3. The Classic Frontend Mistake: Leaking Symmetric Keys

The Safe Split:

4. Two Implementation Flaws to Watch Out For

Trap A: The alg: "none" Bypass

Trap B: Algorithm Confusion (RS256 vs HS256)

5. Debugging Tokens Locally Without Leaking Secrets

Quick Architecture Checklist

Why your cURL command works in terminal but fails in Python (4 gotchas that wasted my afternoon)

1. The Trailing Slash & Automated Redirect Trap

2. Double-Encoded JSON String vs. Raw Dict

3. The Pseudo-Headers Copied from Chrome

4. Escaped Quotes in Bash Shells

How I Handle This Now

How to Decode & Inspect X.509 SSL Certificates and CSRs Without OpenSSL (or Leaking Data to Unknown Servers)

The Silent Problem with Online "Certificate Checkers"

1. Internal Network Topology Leakage

2. The "Accidental Private Key" Disaster

3. Server-Side Execution Overhead

What Actually Is an X.509 Certificate?

How to Convert SVGs into Clean Web Icon Fonts Entirely in the Browser (No Node, No Canvas, No Server Uploads)

Why bother with icon fonts at all in 2026?

The two libraries that make this possible

Step 1: Get clean path data from your SVGs

Step 2: Normalize everything to the em square

Step 3: Build glyphs and compile the font

Step 4: Actually use the font with generated CSS

Where this approach falls short (being honest)

TL;DR

Stop Pasting Your JWT Tokens Into Random Websites — I Built a Safer Alternative

Why I built 56+ Developer Tools that run 100% Client-Side (Zero Server Logs)

🛠️ The Architecture: 100% In-Browser Execution

⚡ Tech Stack & Performance Decisions

🌐 Community & Open Source

The Vulnerability Breakdown: Why `server.fs.deny` Was Overridden

Defensive Coding: Explicitly Guarding `server.fs.deny`

The Root Cause: Confused Deputy on Audience (`aud`)

Trap A: The `alg: "none"` Bypass

Trap A: The `alg: "none"` Bypass