mediumSecurityReact

The reflected echo

A developer asked an AI assistant to render a search page's 'Showing results for' message, bolding the term the user typed. The suggested code renders correctly for normal searches, but a malicious query turns into a working script tag on the page.

SearchResultsHeader.jsx

function SearchResultsHeader({ query }) {
  return (
    <h2
      dangerouslySetInnerHTML={{
        __html: `Showing results for: <strong>${query}</strong>`,
      }}
    />
  );
}

What happens if a user searches for <img src=x onerror=alert(document.cookie)>?

The browser executes the injected script — dangerouslySetInnerHTML renders the query as raw HTML with no escaping, a classic reflected XSS.

React automatically escapes the query before interpolation, so it renders as harmless text.

The <img> tag is stripped because dangerouslySetInnerHTML only allows <strong> and <em>.

The page throws a hydration error and refuses to render.