FSD Frontend System Design

Part II — The Shield · Lesson 3.8

Compliance & Regulation

In one lineConsent gates data collection, and the frontend is where that gate is actually built.

Where you've seen itThe cookie banner. Done properly, no analytics script exists on the page until consent is given — the banner isn't a notice, it's a switch.

  • Time13 min
  • DiagramData flow with a consent gate
  • Chapter3 · Security

Diagram

diagram
CONSENT GATE — the script must not load before the click

  page load
      │
      ▼
  ┌────────────────┐    no consent stored
  │ essential only │ ──────────────────────► show banner
  │ (session, CSRF)│                              │
  └────────────────┘                    ┌─────────┴─────────┐
      │                              Accept              Reject
      │                                 │                   │
      │                                 ▼                   ▼
      │                         inject analytics      nothing loads
      │                         + marketing tags      (and stays that way)
      ▼
  app renders either way ← the product must work without consent
diagram
WHAT COUNTS AS PERSONAL DATA — wider than most engineers assume

  obvious    name · email · phone · address · payment
  also       IP address · device id · cookie id · precise location
  also       behavioural profile built from clicks
  special    health · biometrics · religion · sexuality  (stricter rules)
diagram
THE FRONTEND'S FOUR OBLIGATIONS

  1. Collect consent    granular, opt-IN, as easy to refuse as accept
  2. Honour it          no tag fires before the switch flips
  3. Show it            privacy policy, what's collected, why
  4. Enable rights      export my data · delete my account

How it works

  1. Classify what you collect before writing UI — you cannot gate what you haven't inventoried.
  2. Load nothing non-essential on first paint. Third-party tags are injected after consent, not disabled by a flag.
  3. Store the consent decision with a version and timestamp; re-ask when the policy changes.
  4. Make refusal one click. "Accept all" with a buried "Manage preferences" is the classic violation.
  5. Build the rights flows — data export and account deletion are product features, not support tickets.

Trade-offs

RegulationFrontend impact
GDPR (EU)Opt-in consent, right to export and erase
CCPA (California)"Do Not Sell My Info" link, opt-out model
DPDP (India)Notice + consent, purpose limitation
WCAG / accessibility lawThe banner itself must be keyboard-usable

Data residency: some regimes require data to stay in-region, which changes which API origin the frontend calls — a routing decision, not just a legal one.

Interview angle

"Where does compliance touch frontend architecture?"

  • Third-party scripts become conditionally loaded modules, so your tag manager and CSP connect-src must both be consent-aware.
  • Analytics must degrade gracefully — the product works fully for users who refuse.
  • PII must be scrubbed before it reaches logging and error reporting (see Chapter 7).

Recap

  • Consent is a load-time gate, not a runtime flag.
  • IP addresses, device ids, and cookie ids are personal data.
  • Export and delete are features you build, and refusal must be as easy as acceptance.