Cross-Site Scripting, or **XSS**, happens when untrusted content is interpreted by the browser as executable [JavaScript](/courses/javascript) or unsafe [HTML](/courses/html). ### Basic XSS Example Imagine a user submits this as a comment: ```html ``` If an application inserts that value into the page as trusted [HTML](/courses/html), the attacker's [JavaScript](/courses/javascript) may execute in another user's browser. ### React Escapes Normal Text [React](/courses/reactjs) protects normal [JSX](/courses/reactjs) string rendering by escaping text. For example: ```tsx export default function Comment({ content }) { return

{content}

; } ``` If `content` contains HTML markup, React normally renders it as text rather than executing it as HTML. That makes normal JSX substantially safer than manually constructing HTML strings. ### Main Danger: dangerouslySetInnerHTML This API intentionally bypasses React's normal escaping: ```tsx

``` If `article.content` contains attacker-controlled HTML, this can create an XSS vulnerability. ### Sanitize Untrusted HTML If your product intentionally allows rich HTML, sanitize it using a well-maintained HTML sanitizer configured for your allowed elements and attributes. Conceptually: ```typescript const safeHtml = sanitize(untrustedHtml); ``` then: ```tsx

``` ### Prefer Structured Content When Possible Instead of storing arbitrary HTML: ```text

...

``` consider structured content such as: ```javascript { type: 'paragraph', text: 'Learn Next.js safely.' } ``` and render only supported structures. ### Unsafe URLs Matter Too Untrusted URLs should also be validated. Do not blindly render attacker-controlled values into sensitive URL contexts. For example, verify that user-submitted external links use allowed protocols such as: ```text https: http: ``` when those are what your feature intends to support. ### XSS Can Steal More Than Cookies Even when session cookies are `httpOnly`, XSS is still dangerous. Injected JavaScript may: ```text Perform actions as the logged-in user Read page data Modify forms Capture typed information Call authenticated endpoints Display phishing UI ``` ### Interview-Ready Answer React escapes normal JSX text, which protects many common rendering cases from XSS. The main risk appears when an application intentionally renders untrusted HTML, especially through `dangerouslySetInnerHTML`. Sanitize untrusted HTML, validate URLs, avoid unnecessary raw HTML rendering, and use additional defenses such as Content Security Policy.