Spreading untrusted data into props
The spread let the data replace the link's content with its own HTML, and its style stretched the link over the whole preview (the faint red layer): every click anywhere now follows that link. label became a meaningless HTML attribute. The safe version renders only what you chose.
A URL can carry code (javascript:), point somewhere harmful, or hand your page to another tab. React 19 blocks javascript: URLs, but you still validate user URLs with new URL and a protocol allow-list, add rel="noopener noreferrer" to new-tab links, and never spread untrusted objects into props.
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 ExternalLink that validates its href, opens in a new tab safely, and tells screen reader users it opens a new tab.
Write safeRedirect(next) and show its result for /orders?id=7, //evil.example, https://evil.example and undefined.
A Card does <div {...card}>. The API returns { title, body, id }. Rewrite it safely.
Explain it without notes
What does React 19 do with a javascript: URL in href, and what doesn't it protect you from?
How do you validate a URL a user typed, and why not with a regex or startsWith?
What is an open redirect, and how do you prevent one in a React Router app?
Why is <Component {...apiData} /> dangerous?
Preview
Console
Nothing logged yet.Expected console output
unsafe: <a class="unsafe" label="Docs" href="https://react.dev" style="position: fixed; inset: 0px;"><b>replaced!</b></a>
safe: <a class="safe" href="https://react.dev">Docs</a>