Frontend Security
CSP, XSS, CSRF, token storage, and the trust boundary that ends at the browser.
5 to work through
-
advanced
A consent-management script is loaded synchronously in the document head from a vendor domain because no non-essential tag may run before consent. The vendor's edge degrades to a p99 of 8 seconds rather than returning errors. Walk through what happens second by second what the user sees and what stops it.
3 min answer -
advanced
A financial application runs substantial logic in the browser. What must never be trusted, and what protections are architectural?
2 min answer -
advanced
Design the browser-side security posture for an application handling sensitive user files.
2 min answer -
advanced
In October 2020 the ICO fined British Airways 20 million pounds over its 2018 breach, in which a modified third-party script on payment pages sent customer card details to an attacker-controlled host, affecting over 400,000 customers. A team proposes a strict nonce-based content security policy in response. What does that buy, what does it cost, and what does it not cover?
3 min answer -
advanced
Marketing wants a new tag manager script on the checkout page. Security objects. Who is right and what do you propose?
2 min answer
4 terms in this topic
Content Security Policy
A response header declaring which sources of script, style and other resources the browser may load, which turns a script injection from a compromise…
conceptFrontend Security Boundary
The rule that nothing enforced in the browser is a security control, and the browser-side mechanisms that reduce blast radius anyway.
practiceOrigin Isolation
Serving user-uploaded or untrusted content from a separate origin, so that content executing there has no access to the application's session, storag…
practiceThird-Party Script Governance
Reviewing and constraining what executes on a page, because every third-party script runs with the page's full privileges - and each one is added ind…
Neighbouring topics
Frontend & Experience Architecture
General material on architecting the surface the user actually touches.
Rendering Strategies
Client, server, static and incremental rendering, and what each costs on first paint.
Edge Rendering
Running the render close to the user, and the personalisation and cache trade it implies.
Hydration Cost
The gap between visible and interactive, and the JavaScript that closes it.
Micro-Frontends
Independent deployment of UI slices, and the shared runtime that undermines it.
Module Federation
Loading code from another build at runtime, with versioning and failure to think about.
UI Monorepo Strategy
One repository for many front ends, and the build graph that makes it viable.
Design Systems
Components as a versioned internal product, with adoption and deprecation like any API.
Component Contracts
Props, slots and events as an interface, and the breaking change hidden in a style.
Client State Architecture
Server state, UI state and derived state, and why conflating them causes most bugs.
Client Caching & Data Layer
Stale-while-revalidate, invalidation and optimistic updates on the client.
BFF for Experience
One backend per experience, shaped by the screen rather than by the domain.
API Shapes for UI
REST, GraphQL and RPC judged by over-fetching, round trips and client coupling.
Web Performance Budgets
A number a build can fail against, rather than a performance sprint once a year.
Core Web Vitals
LCP, INP and CLS — what they measure, and the architecture that moves them.
Accessibility Architecture
Semantics, focus management and announcements designed in rather than audited in.
Internationalisation
Locale, direction, pluralisation and dates as structural concerns, not string tables.
Client Feature Flags
Flag evaluation on a device you do not control, and the flicker and staleness it brings.
Real User Monitoring
Field data from real devices and networks, against the synthetic run that looked fine.