Web Application Layout

Mar 31, 2026 [general]

No two web applications are identical. Businesses create web applications for a multitude of uses and audiences. Web applications are designed and programmed differently, and back end infrastructure can be set up in many different ways.

Web application layouts consist of many different layers that can be summarized with the following three main categories:

Category	Description
`Web Application Infrastructure`	Describes the structure of required components, such as the database, needed for the web application to function as intended.
`Web Application Components`	The components that make up a web application — divided into `UI/UX`, `Client`, and `Server` components.
`Web Application Architecture`	Architecture comprises all the relationships between the various web application components.

Web Application Infrastructure

Web applications can use many different infrastructure setups. The most common models:

Client-Server
One Server
Many Servers - One Database
Many Servers - Many Databases

Client-Server

The server hosts the web application and distributes it to clients. Front end components run on the client (browser), back end components run on the server.

One Server

Entire web application and database hosted on a single server. Simple to implement but highest risk — if one app is compromised, everything is compromised.

Many Servers - One Database

Database separated onto its own server. Multiple web apps can access the same database. Better segmentation — if one webserver is compromised, others aren’t directly affected.

Many Servers - Many Databases

Each web application’s data is in a separate database. Best choice for security due to proper access control and asset segmentation. Often used for redundancy with load balancers.

Web Application Components

Client
Server — Webserver, Web Application Logic, Database
Services (Microservices) — 3rd Party & Web App Integrations
Functions (Serverless)

Web Application Architecture (Three Tier)

Layer	Description
`Presentation Layer`	UI components — HTML, JavaScript, CSS returned to client via browser.
`Application Layer`	Processes client requests, checks authorization, privileges, and data.
`Data Layer`	Works with application layer to determine where data is stored and accessed.

Microservices

Independent components programmed for one task only. Communication between microservices is stateless — request and response are independent. Benefits:

Agility, flexible scaling, easy deployment, reusable code, resilience

Serverless

Cloud providers (AWS, GCP, Azure) offer serverless architectures. Apps run in stateless containers (Docker). No server management needed — the cloud provider handles provisioning, scaling, and maintenance.

Architecture Security

Understanding architecture is critical during pentests. Vulnerabilities aren’t always caused by coding errors — design flaws matter too.

Examples:

Lack of RBAC → users access admin features they shouldn’t
Database on separate server → attacker who owns the webserver still can’t reach the DB directly

Security must be considered at every phase of web application development.