EXERCISE 1 — React: {name} vs dangerouslySetInnerHTML
======================================================

WHY  <h1>Hello, {name}</h1>  IS SAFE:
  - When React renders the {name} expression, it inserts the value as TEXT
    content (effectively via textContent/createTextNode), and it AUTO-ESCAPES
    HTML-special characters for the context.
  - So name = "<script>alert(1)</script>" is rendered as the literal text
    &lt;script&gt;alert(1)&lt;/script&gt; -- the browser shows the characters and
    parses NO tag. It's treated as DATA, never code (the Chapter 6 discipline,
    done automatically). No script runs.

WHY  <div dangerouslySetInnerHTML={{__html: name}} />  IS NOT SAFE:
  - dangerouslySetInnerHTML deliberately BYPASSES React's auto-escaping and
    sets the element's innerHTML to the raw string. innerHTML PARSES its input
    as HTML.
  - So name = "<img src=x onerror=alert(1)>" is parsed as a real <img> element
    whose onerror fires -> XSS. React even named the prop "dangerously..." to
    signal exactly this: you've opted out of the safe default and are
    responsible for the content.
  - (Note: a literal <script> set via innerHTML won't auto-execute, but
    <img onerror>, <svg onload>, etc. do -- Chapter 4 -- so it's fully
    exploitable.)

THE CORRECT SAFE VERSION:
  - If you must render user-provided HTML, SANITIZE it first (Chapter 7):

      import DOMPurify from "dompurify";

      <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(name) }} />

    Now only an allowlisted, safe subset of HTML survives; scripts and
    event handlers are stripped before insertion.

  - BETTER, if name is just TEXT (a username): don't use the hatch at all --
    use plain interpolation:

      <h1>Hello, {name}</h1>

    There's no reason to render a username as HTML. Reserve
    dangerouslySetInnerHTML for genuine rich-text/HTML needs, and always
    sanitize.

KEY POINT:
  The framework's SAFE DEFAULT (text interpolation) escapes for you; the
  ESCAPE HATCH turns that off and hands you the Chapter 7 responsibility to
  sanitize. Use the default unless you truly need HTML, and sanitize when you
  do.