Web Application Architecture Overview

#Putting It All Together: Modern Web Application Architecture#link

This final lesson synthesizes everything we've learned — HTTP, HTML, JavaScript, web servers, databases, and authentication — into a comprehensive understanding of how modern web applications are architected. Understanding the full architecture is what separates a script kiddy from a professional security tester. You need to see the whole picture to find vulnerabilities that span multiple layers.

The Three-Tier Architecture

Most web applications follow a three-tier architecture pattern, separating concerns into distinct layers:

┌─────────────────────────────────────────────────┐
│              PRESENTATION TIER                   │
│         (Browser / Client-Side)                  │
│   HTML, CSS, JavaScript, SPA Frameworks          │
│   XSS, CSRF, Client-Side Logic Bypass            │
├─────────────────────────────────────────────────┤
│              APPLICATION TIER                    │
│         (Server / Business Logic)                │
│   Node.js, Python, Java, PHP, Go, .NET          │
│   SQL Injection, Auth Bypass, IDOR, SSRF        │
├─────────────────────────────────────────────────┤
│                DATA TIER                         │
│         (Database / Storage)                     │
│   MySQL, PostgreSQL, MongoDB, Redis              │
│   Data Exposure, Privilege Escalation            │
└─────────────────────────────────────────────────┘

Monolithic vs. Microservices Architecture

Applications can be structured as a single monolithic codebase or split into microservices. Each approach has different security implications:

The Modern Web Application Stack

Let's map out a typical modern web application and identify the security-relevant components at each layer:

User's Browser
    │
    ▼
[CDN / WAF] ──────── DDoS protection, caching, bot detection
    │
    ▼
[Load Balancer] ──── Distributes traffic, SSL termination
    │
    ▼
[Reverse Proxy] ──── Nginx/Apache, URL rewriting, rate limiting
    │
    ▼
[Application Server]  Express/Django/Spring — business logic
    │         │              │
    ▼         ▼              ▼
[Cache]  [Database]  [Message Queue]
 Redis    MySQL/PG     RabbitMQ/Kafka
    │
    ▼
[Object Storage] ──── S3/Blob — files, images, backups

RESTful API Architecture

Most modern web applications expose RESTful APIs that the front-end (or mobile apps) communicate with. REST APIs use HTTP methods to perform CRUD (Create, Read, Update, Delete) operations on resources identified by URLs.

RESTful API Design Pattern:

GET    /api/users          → List all users
GET    /api/users/42       → Get user with ID 42
POST   /api/users          → Create a new user
PUT    /api/users/42       → Replace user 42 entirely
PATCH  /api/users/42       → Update specific fields of user 42
DELETE /api/users/42       → Delete user 42

GET    /api/users/42/orders → Get orders for user 42

REST APIs are a primary target for security testing. Common vulnerabilities include IDOR (accessing /api/users/43 when you're user 42), mass assignment (sending extra fields like "role": "admin" in a PATCH request), and broken authentication on API endpoints.

Security Architecture Patterns

Modern applications implement security at multiple layers — this is called Defense in Depth. No single control is perfect, so multiple overlapping controls provide resilience:

• ▪Network layer: Firewalls, WAF (Web Application Firewall), DDoS protection
• ▪Transport layer: TLS/HTTPS, certificate pinning, HSTS
• ▪Application layer: Input validation, parameterized queries, CSRF tokens
• ▪Authentication layer: MFA, session management, password policies
• ▪Data layer: Encryption at rest, database access controls, data masking
• ▪Monitoring layer: Logging, intrusion detection, anomaly detection

The OWASP Top 10: A Security Framework

The OWASP Top 10 is the most widely recognized list of critical web application security risks. Everything in this course maps to one or more OWASP Top 10 categories:

Mapping an Attack Across the Stack

To tie everything together, let's trace a realistic attack scenario across the entire architecture:

Scenario: Attacker targets a banking web application

1. RECONNAISSANCE
   - Identifies the app uses React SPA + REST API
   - Discovers API endpoints via browser DevTools Network tab
   - Finds server: nginx/1.18.0, framework: Express.js
   - Identifies the API: /api/v1/accounts/{id}/transfer

2. AUTHENTICATION ATTACK
   - Creates account, analyzes JWT tokens
   - Discovers JWT uses RS256 but server accepts HS256
   - Forges admin token using the public key as HMAC secret

3. AUTHORIZATION BYPASS (IDOR)
   - Authenticated as admin, tests /api/v1/accounts/1234/transfer
   - Changes account ID to 5678 — succeeds (IDOR vulnerability)
   - Can transfer money from any account

4. DATA EXFILTRATION
   - Uses forged admin token + IDOR to enumerate all accounts
   - Exfiltrates data via the API responses

LESSONS: This attack chain spans HTTP analysis, JWT
cryptography, authentication, AND authorization.
Understanding the full architecture is essential.

Key Takeaways

As you move forward in your security career, remember these fundamental principles:

• ▪Never trust user input — validate and sanitize everything
• ▪Defense in depth — no single control is sufficient
• ▪Understand the full stack — vulnerabilities often span multiple layers
• ▪Keep learning — the threat landscape evolves constantly
• ▪Think like an attacker — understand how components can be abused
• ▪Security is a process, not a product — continuous testing and improvement