🌐 CN 09: VPN Internals, Cryptography, Tokenization, JWT & Frontend Tooling

Targeted for: Juspay Elimination Round, Systems & Backend Architecture Interviews
Key Focus: VPN tunneling & TUN/TAP virtual devices, Symmetric vs Asymmetric encryption, Hybrid TLS cryptosystems, The 4-way distinction (Encoding vs Encryption vs Hashing vs Tokenization), RBI Payment Card Tokenization (PCI-DSS), JWT mechanics & security flaws, and "Can we use npm for frontend?".

📑 Quick Navigation

1. VPN Deep Dive: Tunneling, Encapsulation & Packet Lifecycle
2. Symmetric vs Asymmetric Encryption & Hybrid Cryptography
3. Encoding vs Encryption vs Hashing vs Tokenization (Comparison Matrix)
4. What is Tokenization? (Payment Gateway & RBI Mandate Focus)
5. JWT (JSON Web Tokens): Anatomy, Verification & Flaws
6. Can We Use npm for Frontend? (Ecosystem & Bundler Architecture)

1. VPN Deep Dive: Tunneling, Encapsulation & Packet Lifecycle

What is a Virtual Private Network (VPN)?

A VPN extends a private network across a public network (the Internet) by creating a secure, encrypted logical point-to-point tunnel. It makes the client device appear as if it is directly connected to the remote private network, granting:

1. Confidentiality & Integrity: All traffic passing through untrusted ISPs or public Wi-Fi is encrypted.
2. IP Masking & Geo-Relocation: Public internet destinations see the VPN Gateway's egress IP instead of the client's actual ISP-assigned IP.
3. Internal Resource Access: Enables remote developers to securely access private microservices, databases, and internal payment APIs behind VPC firewalls.

Virtual Network Interfaces: TUN vs TAP

Operating systems (Linux, macOS, Windows) use software-defined virtual network device drivers to implement VPNs:

• TUN (Network Tunnel): Simulates a network-layer device. It receives and transmits raw Layer 3 IP packets directly to/from a user-space application without Ethernet headers.
• TAP (Network Tap): Simulates a link-layer device. It captures Layer 2 Ethernet frames (including source/destination MAC addresses and ARP requests).

Step-by-Step Packet Lifecycle: Sending a Request via VPN

VPN Protocol Comparison

2. Symmetric vs Asymmetric Encryption & Hybrid Cryptography

Core Definitions

• Symmetric Encryption (Secret-Key Cryptography): Uses the exact same secret key to both encrypt and decrypt data. Both parties must securely share this single key beforehand.
• Asymmetric Encryption (Public-Key Cryptography): Uses a mathematically linked key pair:
  • Public Key: Shared openly with the world; used by anyone to encrypt data or verify digital signatures.
  • Private Key: Kept strictly confidential by the owner; used to decrypt data or generate digital signatures.

Mathematical Foundation: The One-Way Trapdoor Function

• RSA: Relies on the Integer Factorization Problem. Multiplying two 2048-bit prime numbers $p \times q = n$ takes microseconds; factoring $n$ back into $p$ and $q$ would take billions of compute years on supercomputers.
• ECC (Elliptic Curve Cryptography): Relies on the Elliptic Curve Discrete Logarithm Problem (ECDLP) over equations like $y^2 = x^3 + ax + b$.
  • Advantage: A 256-bit ECC key (Curve25519) provides identical security to a 3072-bit RSA key with significantly lower CPU overhead and smaller packet sizes.

Detailed Comparison Matrix

The Real-World Solution: Hybrid Cryptosystem (How HTTPS/TLS Works)

Neither symmetric nor asymmetric encryption is sufficient on its own:

• Symmetric is fast, but cannot safely exchange keys across the Internet.
• Asymmetric solves key exchange, but is far too slow to stream videos or payment payloads.

The Hybrid Approach:

3. Encoding vs Encryption vs Hashing vs Tokenization (Comparison Matrix)

A favorite Juspay interview question designed to test precision in cryptographic vocabulary:

4. What is Tokenization? (Payment Gateway & RBI Mandate Focus)

Why Juspay Cares Deeply About Tokenization

In India, the Reserve Bank of India (RBI) issued the Card-on-File (CoF) Tokenization Mandate:

"No entity in the card transaction/payment chain, other than card networks and card issuers, shall store actual card data (16-digit PAN, CVV, expiry date) after September 30, 2022."

Before this mandate, e-commerce merchants (Amazon, Flipkart, Swiggy) and payment gateways stored raw card numbers in databases. If a merchant's database was breached, millions of credit card numbers were exposed.

How Card Tokenization Works (Card-on-File Flow)

Key Properties of Payment Tokens:

1. Domain-Bound: A token generated for Flipkart cannot be used on Swiggy. Even if a hacker steals the merchant's database, the tokens are useless anywhere else.
2. Device-Bound (Optional): For Apple Pay / Google Pay / Samsung Pay, tokens are locked to the physical secure enclave chip of a specific smartphone.
3. Cryptogram Verification: Every transaction requires a dynamic, single-use cryptographic signature (TAVV / Cryptogram) generated by the network, preventing replay attacks.
4. PCI-DSS De-scoping: Storing tokens instead of raw PANs drastically reduces the PCI-DSS compliance burden and audit scope for merchant systems.

5. JWT (JSON Web Tokens): Anatomy, Verification & Flaws

Structure of a JWT

A JSON Web Token consists of three distinct parts separated by dots (.): $$\mathbf{Header} ,., \mathbf{Payload} ,., \mathbf{Signature}$$

How Signature Verification Works

When a client sends a request with Authorization: Bearer <token>:

1. The backend splits the string by the . character into H, P, and S.
2. The server independently calculates: $$\text{Expected Signature} = \text{HMAC-SHA256}(H + "." + P, \text{Server Secret})$$
3. It performs a Constant-Time Comparison (crypto.timingSafeEqual) between Expected Signature and S:
   • If they match: The payload has not been tampered with. The server reads user_id and grants access.
   • If they do not match: The token was altered in transit; request is rejected with 401 Unauthorized.

Critical JWT Pitfalls & Interview Attack Vectors

1. The alg: "none" Vulnerability:
   • Attack: An attacker modifies the header to {"alg": "none"}, strips the signature, and modifies the payload to {"role": "admin"}.
   • Vulnerable libraries accepted unsigned tokens if they didn't enforce valid algorithms.
   • Fix: Explicitly whitelist algorithms on the verification server (e.g., algorithms: ['HS256']).
2. Payload is NOT Encrypted!:
   • Common misconception: Beginners assume JWT encrypts data.
   • Truth: Base64Url is an encoding, not encryption. Anyone can paste a JWT into jwt.io and read the claims in cleartext! Never store passwords, credit card PANs, or PII in JWT payloads.
3. The Revocation / Logout Problem:
   • Because JWTs are stateless, once issued, a token remains valid until its exp timestamp passes. If a user logs out, changes passwords, or gets banned, the token cannot be revoked without maintaining server state.
   • Production Solution: Use Short-Lived Access Tokens (5–15 mins) + Refresh Tokens (7 days) stored in Redis with Token Rotation.

6. Can We Use npm for Frontend? (Ecosystem & Bundler Architecture)

Interview Question: "Can we use npm for frontend? Isn't npm only for Node.js backend?"

The Definitive Answer: YES, Absolutely.

While npm stands for Node Package Manager and was originally created to manage server-side modules for Node.js, today it is the undisputed standard package manager for frontend web development as well.

Why Can We Use npm for Frontend?

1. The Registry is Universal: The npm public registry (registry.npmjs.org) hosts JavaScript libraries regardless of where they run—frontend UI libraries (react, vue, svelte), CSS frameworks (tailwindcss, bootstrap), utility libraries (lodash, date-fns), and backend frameworks (express).
2. Tooling & Dependency Management: npm manages the package.json manifest, resolves nested dependency trees, enforces semantic versioning (^, ~), and locks exact builds via package-lock.json.

The Fundamental Architectural Catch: Why Browsers Cannot Run node_modules Directly

1. Module System Mismatch:
   • Historically, Node.js packages in node_modules used the CommonJS format (const x = require('x') and module.exports).
   • Web browsers do not have a built-in require() function or filesystem access to traverse node_modules/react/index.js.
2. Network Waterfall Problem:
   • A typical React application includes hundreds of packages comprising tens of thousands of individual JS files.
   • If a browser had to make separate HTTP requests to load every single file individually over the network, page load times would exceed 30 seconds.
3. The Role of Bundlers (Webpack, Vite, Rollup, Parcel):
   • Frontend developers use npm to install libraries and build tools.
   • Tools like Vite (powered by esbuild & Rollup) parse imports at build time, eliminate dead code (tree-shaking), transpile JSX/TypeScript into standard ES5/ES6, and package everything into compact static assets.

Can We Run Frontend Code WITHOUT npm?

Yes! There are two modern alternatives:

1. CDN Script Tags:
   <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
2. Modern Native Browser ES Modules & Import Maps: All modern browsers natively support ES Modules (import / export) without build tools:
   <script type="importmap"> { "imports": { "lodash": "https://cdn.jsdelivr.net/npm/lodash-es@4.17.21/lodash.js" } } </script> <script type="module"> import { chunk } from 'lodash'; console.log(chunk([1, 2, 3, 4], 2)); </script>

🎯 Summary Matrix: Explaining npm for Frontend in an Interview

• "npm is used during development and build time to install dependencies, manage versioning, and run scripts."
• "Because browsers cannot natively consume unbundled node_modules containing CommonJS syntax and thousands of individual files, modern build tools (like Vite or Webpack) compile and bundle these npm packages into optimized static assets (.js, .css) that the browser executes."