Service Workers, TLS,
Security Headers & SRI

1 TLS / HTTPS — the transport trust layer

TLS does exactly three things: confidentiality (encrypt in transit), integrity (detect tampering), and authenticity (prove you're talking to the claimed server via a certificate). All three are required — encrypting the wrong server is useless.

HSTS — HTTP Strict Transport Security

Once a browser sees Strict-Transport-Security: max-age=63072000; includeSubDomains; preload it never sends http:// for that origin — even if the user types it. The first visit is still vulnerable (TOFU: trust on first use). The preload list solves this: browsers ship with a hardcoded list of HSTS domains so even the first request is HTTPS. Submit via hstspreload.org — preload is irreversible short-term, you need includeSubDomains, and all your subdomains must be HTTPS-ready first.

Mixed content

Active mixed content (scripts, iframes, stylesheets over HTTP on an HTTPS page) is always blocked — the network context would be compromised. Passive mixed content (images, media) was historically shown with a warning but Chrome now auto-upgrades or blocks it. Fix: use protocol-relative URLs (//cdn.example.com/...) or HTTPS everywhere. The upgrade-insecure-requests CSP directive automatically upgrades passive HTTP requests.

2 Security headers — set once, protect everywhere

These go in your nginx/CDN config (or middleware), not in every HTML file. L19 covered Content-Security-Policy and frame-ancestors. The remaining headers complete the hardening set.

3 Service Workers & the Cache API

A Service Worker is a JavaScript proxy running in a background thread between your page and the network. It can intercept every fetch request, serve from a local cache, or even respond when offline. It does not run on the main thread — no DOM access — and it persists across page loads.

Lifecycle: install → activate → fetch

// sw.js — install: cache the app shell
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('v1').then(cache =>
      cache.addAll(['/', '/app.js', '/styles.css'])
    )
  );
  self.skipWaiting(); // take over immediately — see pitfall below
});

// activate: clean up old caches
self.addEventListener('activate', event => {
  event.waitUntil(
    caches.keys().then(keys =>
      Promise.all(keys.filter(k => k !== 'v1').map(k => caches.delete(k)))
    )
  );
  self.clients.claim(); // take control of existing pages immediately
});

The three cache strategies

// fetch: cache-first for JS/CSS, network-first for API
self.addEventListener('fetch', event => {
  const { request } = event;

  if (request.url.includes('/api/')) {
    // network-first for API
    event.respondWith(
      fetch(request)
        .then(res => { /* cache and return */ return res; })
        .catch(() => caches.match(request))
    );
  } else {
    // cache-first for static assets
    event.respondWith(
      caches.match(request).then(cached => cached || fetch(request))
    );
  }
});

The update lifecycle pitfall — the most dangerous SW trap

A new SW version (even a 1-byte change) enters "waiting" state — it won't activate until all tabs using the old SW are closed. This means users on long-lived sessions never get the update.

Common "fix" and its trap: calling skipWaiting() in install forces the new SW to activate immediately. But now the new SW is serving requests for a page that was loaded with the old SW's assets. If the new and old versions of assets are incompatible, the page breaks silently.

4 Subresource Integrity & supply-chain security

SRI — locking external files

Subresource Integrity lets you pin a specific external file to a cryptographic hash. The browser computes the hash of what it fetches and refuses to execute it if it doesn't match.

<!-- If the CDN is compromised and the file changes, browser blocks it -->
<script
  src="https://cdn.example.com/react.production.min.js"
  integrity="sha384-Znh5+iBGuvijOqLzOG+Lzxjbii7bJIU6MkHMoJ3B5j+Qra/A2SmMaSCWzxLQKA=="
  crossorigin="anonymous"></script>

crossorigin="anonymous" is required — SRI performs a CORS fetch, so the CDN must send CORS headers and you must set the attribute.

npm supply chain risk

Your node_modules tree is a supply chain attack surface. Real incidents: event-stream (2018, injected crypto mining), colors/faker (2022, maintainer sabotage), ua-parser-js (2021, account hijack). Attack vectors:

• Typosquatting — lodahs vs lodash; attacker publishes a malicious package with a similar name.
• Dependency confusion — attacker publishes a public package with the same name as your internal private package; npm prefers the public one by version number.
• Compromised maintainer account — attacker takes over a popular package and pushes a malicious version.
• Transitive deps — you didn't install it directly; your dep did.

Defenses at each layer

5 The complete security headers checklist

Headers you should be able to recite for the round, grouped by threat:

6Check yourself — scenario quiz