mediumFrontend

How does React handle security concerns like XSS?

Q: How does React handle security concerns like XSS?

**Core concept (TL;DR).** React **auto-escapes** any value you interpolate in JSX, rendering it as text rather than HTML — which prevents most cross-site-scripting (XSS). The main ways you can *reintroduce* XSS are dangerouslySetInnerHTML (raw HTML), unsafe URLs ( javascript: in href / src ), and injecting untrusted data into the DOM outside React. JSX escapes by default; opt-outs are the risk <text x="135" y="64" fill="#22c55e" font-size="11" font-w

1.1k views

Understand the problem

This question evaluates knowledge of security best practices in React applications.

securityxssjsxbest practices

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

Escaped by default; sanitize raw HTML

export default function App() {
  const userInput = '<img src=x onerror="alert(1)">';

  // ✅ SAFE: rendered as literal text, the tag does not execute
  const safe = <p>{userInput}</p>;

  // ⚠️ ONLY with sanitized HTML (e.g. DOMPurify.sanitize(html)):
  //   <div dangerouslySetInnerHTML={{ __html: clean }} />

  return (
    <div style={{ padding: 24, fontFamily: "system-ui" }}>
      {safe}
      <small>The markup above is shown as text, not executed.</small>
    </div>
  );
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

Describe the `useRef` hook and its typical use cases.

How would you structure a large React application?