Outdated React Library Has a Script Injection Flaw (CVE-2018-6341)

Vulnerability Explanation

React applications rendered to HTML using the ReactDOMServer API (renderToString / renderToStaticMarkup) were not escaping user-supplied attribute names at render time. When spread props are used and the attribute key originates from user-controlled input, an attacker can craft a malicious attribute name that breaks out of the HTML attribute context and injects executable JavaScript. The vulnerable pattern is: spreading an object whose keys come from user input directly onto a JSX element, then passing that element through ReactDOMServer.renderToString(). Purely client-side React apps are not affected — the DOM's own parser provides sufficient protection in that context.

Root Cause

The internal createMarkupForProperty function was missing attribute name validation. Specifically, the isAttributeNameSafe helper was absent from the server-side rendering code path, meaning arbitrary strings could be serialised as HTML attribute names without sanitisation. The patch added an isAttributeNameSafe check at the attribute serialisation layer and hardened the validation helper against prototype pollution risks in its cache.

Technical Impact

An attacker who can control an HTML attribute name in a server-rendered React component can inject arbitrary JavaScript that executes in the victim's browser. This enables session hijacking via cookie theft, phishing redirects, credential harvesting, or performing authenticated actions on behalf of the victim.

Severity Justification

CVSS vector CVSS:3.0/AV:N/AC:L/PR:N/UI:R/S:C/C:L/I:L/A:N. Exploitation requires two specific conditions to be met simultaneously: the app must use ReactDOMServer for rendering AND must spread user-controlled attribute names onto JSX elements. Purely client-rendered apps are entirely unaffected. Snyk rates this 6.5 (Medium).

Affected Components

• react-dom 16.0.x < 16.0.1
• react-dom 16.1.x < 16.1.2
• react-dom 16.2.x < 16.2.1
• react-dom 16.3.x < 16.3.3
• react-dom 16.4.x < 16.4.2

Remediation Steps

1. Confirm whether your application uses ReactDOMServer (search your codebase for renderToString or renderToStaticMarkup). If neither is present, your app is not affected and no change is required.
2. Upgrade react-dom to the patched version for your minor branch: 16.2.x → 16.2.1 (or jump to the latest stable React 18/19). Run: npm install react-dom@16.2.1 (or yarn add react-dom@16.2.1).
3. Note: only react-dom needs updating — the react package itself does not need to change.
4. If upgrading is temporarily blocked, audit your server-rendered components and ensure no prop keys are derived from user input. Validate and allowlist attribute names before spreading them onto JSX elements.
5. Run your test suite and verify the server-rendered HTML output no longer contains unsanitised attribute names.
6. Consider jumping directly to a current React major version (18+) to avoid accumulating further legacy CVEs.

Verification Steps

1. Run: npm list react-dom and confirm the installed version is 16.2.1 or higher.
2. Search the codebase for renderToString and renderToStaticMarkup. For each usage, verify that no prop key is derived from unvalidated user input.
3. Use npm audit or yarn audit to confirm CVE-2018-6341 no longer appears in the vulnerability report.
4. If you have an integration test environment, pass a crafted attribute name (e.g., 'onmouseover=alert(1)') through the server render path and confirm it is rejected or escaped in the output HTML.

Code Examples (jsx)

// VULNERABLE: user-controlled data used as a prop key in SSR
let props = {};
props[userProvidedData] = 'hello'; // userProvidedData comes from request input
const element = <div {...props} />;
const html = ReactDOMServer.renderToString(element);
// Output could be: <div onmouseover="alert(1)"="hello">

// FIXED: upgrade react-dom to 16.2.1+
// The library now validates attribute names internally.
// Additionally, avoid spreading user-controlled keys:
const ALLOWED_ATTRS = new Set(['data-id', 'aria-label']);
const safeProps = {};
if (ALLOWED_ATTRS.has(userProvidedData)) {
  safeProps[userProvidedData] = 'hello';
}
const element = <div {...safeProps} />;
const html = ReactDOMServer.renderToString(element);

Best Practices

• Never use user-supplied strings as HTML attribute names — allowlist the specific attribute names your application needs.
• Pin and regularly audit your npm dependencies; use npm audit or a tool like Dependabot to catch known CVEs automatically.
• Apply a Content Security Policy (CSP) header as a defence-in-depth measure to limit the impact of any XSS that does slip through.
• Keep React on a supported major version (currently 18/19) to benefit from ongoing security patches.

References

• legacy.reactjs.org/blog/2018/08/01/react-v-16-4-2.html
• github.com/advisories/GHSA-mvjj-gqq2-p4hw
• security.snyk.io/vuln/npm:react-dom:20180802
• www.cvedetails.com/cve/CVE-2018-6341/