Frontend Security and Performance

What you will learn

• Same-origin policy, CORS and cookies
• XSS-safe DOM code and CSP
• Privacy and third-party code
• Core Web Vitals and the Performance API
• Lazy loading, CLS, debounce and throttle

Lessons

1. 1

   How the Browser Protects Users

   What the browser already does for your users and where its protection stops: HTTPS, origins and the same-origin policy, CORS and preflight requests (and why frontend code cannot fix a CORS error), cookie flags as the frontend sees them, safe postMessage between frames, Permissions-Policy, and the difference between security and privacy.

   12 exercises

2. 2

   XSS and Safe DOM Code

   Find and fix cross-site scripting in your own DOM code: innerHTML and its cousins as sinks, data from the URL, attribute injection and javascript: links, then the layers behind your code (DOMPurify for user HTML, Content Security Policy, frame-ancestors against clickjacking), CSRF tokens, and why API secrets never ship in a bundle.

   12 exercises

3. 3

   Privacy and Third-Party Code

   Handle people's data the way privacy law expects: recognize PII, keep it out of analytics with an allowlist, understand tracking and fingerprinting, wait for consent and honor Global Privacy Control, apply GDPR, the UK DPA, CCPA and COPPA in practice, and weigh third-party code: Subresource Integrity, rel noopener and the npm supply chain.

   13 exercises

4. 4

   Measuring Performance

   Measure before you optimize: real versus perceived performance, the critical rendering path and what blocks it, the Core Web Vitals (LCP, INP, CLS) and their thresholds at the 75th percentile, lab and field tools (Lighthouse, PageSpeed Insights, WebPageTest), and your own timings with performance.mark and performance.measure.

   12 exercises

5. 5

   Making Pages Fast

   Fix what the measurements point at: reserve space for images and late content so nothing shifts, lazy load below the fold but never the hero, swap fonts in without hiding text, load scripts with defer or async, split rarely used code out with import(), debounce and throttle bursts of events, avoid layout thrashing, and use will-change and contain sparingly.

   12 exercises

6. 6

   Putting It Together

   One cafe site, a security pass and a performance pass: fix an XSS-prone guestbook widget and post to it with a CSRF token, then fix a page's layout shift and script loading, debounce a menu search that is timed with the Performance API, and throttle a scroll handler without losing its final position.

   8 exercises

How you practice

You practice in the browser and every exercise gives you feedback right away. This course uses these formats:

• Code exercise: 20
• Fix the bug: 15
• Type the answer: 8
• Fill in the blank: 7
• Predict the output: 5
• Match the pairs: 4
• Multiple choice: 4
• Select all that apply: 3
• Spot the bug: 2
• Reorder lines: 1