Service Workers · TLS · Security Headers · SRI

FE Lead · Lesson 20 — print before the round
One-line to open with

"These four systems sit below your app code. TLS proves you're on a trusted channel. Security headers are infra config — set once, apply everywhere. A Service Worker is your client-side cache CDN. SRI and lockfiles guard the supply chain."

TLS / HTTPS

Three guarantees: confidentiality (encrypt) · integrity (tamper detection) · authenticity (cert proves server identity)

NOT protected server bugs · client XSS · who you talk to (IP visible) · timing/volume

HSTS

Strict-Transport-Security: max-age=63072000; includeSubDomains
Browser upgrades to HTTPS unconditionally — no HTTP hits the network. Preload list = even first visit is HTTPS. Preload is hard to undo — all subdomains must be HTTPS-ready first.

Mixed content

Active (JS/CSS/iframes over HTTP) = always blocked. Passive (images) = Chrome auto-upgrades or blocks. Fix: upgrade-insecure-requests in CSP or protocol-relative URLs.

Security Headers (set in CDN/nginx)

HeaderWhat it stops
X-Content-Type-Options: nosniffMIME sniffing — browser executing JS served as text/plain
Referrer-Policy: strict-origin-when-cross-originFull URL leaking to third parties via Referer
Permissions-Policy: geolocation=(), camera=()Malicious embedded scripts requesting browser APIs
Strict-Transport-SecurityHTTP downgrade
Content-Security-Policy (L19)XSS execution
frame-ancestors 'self' (L19)Clickjacking

Audit: securityheaders.com

Service Worker lifecycle

install (precache assets) → waiting (old SW still active) → activate (clean old caches) → fetch (intercept requests)

By default a new SW waits until all tabs using the old SW close. skipWaiting() + clients.claim() override this — useful but risky (see trap).

Cache strategies

Cache-first
Fastest. Use for hashed JS/CSS/fonts. Stale until version bump.
Network-first
Fresh or offline-fallback. Use for API data (hotel prices, availability).
SWR
Instant + eventually-fresh. Use for non-critical assets that change occasionally.

Workbox wraps these patterns (Google's SW library).

SRI — Subresource Integrity

<script
  src="https://cdn.example/react.min.js"
  integrity="sha384-abc123..."
  crossorigin="anonymous"></script>

Protects CDN compromise — hash mismatch → blocked

Doesn't protect bundled npm deps (inside your JS)

crossorigin="anonymous" required — SRI uses a CORS fetch

npm supply chain defenses

  • Lockfile — commit package-lock.json
  • npm ci (not npm install) in CI — fails on lockfile mismatch
  • npm audit + Dependabot/Snyk — gate on high-severity
  • Private registry — allowlist + fixes dependency confusion
  • SBOM — manifest of every dep + version for compliance

Attack vectors: typosquatting (lodahs), dependency confusion (public pkg shadows private), compromised maintainer (event-stream 2018)

Memorize: complete hardening header set

CSP (script-src + nonce + frame-ancestors) · HSTS · X-Content-Type-Options: nosniff · Referrer-Policy: strict-origin-when-cross-origin · Permissions-Policy: geolocation=(),camera=() · X-Frame-Options: SAMEORIGIN (legacy fallback)

Don't fail the interview

skipWaiting() mid-session skew: Calling skipWaiting forces the new SW active while an old-SW page is still open. Old page requests chunk URLs from the new deploy → 404 / white screen if old chunks are deleted. Fix: content-hash filenames (old + new coexist) + prompt user to reload.

npm install ≠ npm ci: npm install can update the lockfile if a newer semver-compatible version is published (including a malicious one). npm ci fails if the lockfile doesn't match — always use it in pipelines.