React needs no inline handlers, so a strict CSP fits
The onClick never appears in the HTML: React listens at the root from JavaScript, so script-src 'self' without 'unsafe-inline' doesn't affect it. The style attribute you see is how the browser reflects styles React set through element.style, which CSP doesn't restrict. Server-rendered style="…" attributes in HTML are different: a strict style-src without 'unsafe-inline' blocks them, which is why some SSR apps allow inline styles or use nonces.
Most of your app's code was written by strangers, so keep dependencies few, locked and audited (npm audit, lockfiles, npm ci, pinning, controlled install scripts), and add browser-enforced walls: a Content Security Policy that only runs your own scripts, and Subresource Integrity for anything loaded from a CDN.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write a CI job (GitHub Actions) that installs reproducibly, fails on high-severity production vulnerabilities, and builds.
Write a starting CSP for a Vite React SPA that calls https://api.shop.example and shows images from https://img.shop.example.
You must load a chart library from a CDN. Write the tag safely, and explain the better alternative.
Explain it without notes
What is a software supply chain attack, and give three ways one can reach a React app?
What do lockfiles and npm ci protect against, and why pin versions?
What is a Content Security Policy, and why does it suit React apps?
What is Subresource Integrity, and when can't you use it?
Preview
Console
Nothing logged yet.Expected console output
HTML React wrote: <button style="color: black;">Clicked 0</button>
inline onclick attribute: null
after a click: <button style="color: green;">Clicked 1</button>