DEV Community

Cover image for Remote Code Execution (RCE) in React.js: How to Prevent
Pentest Testing Corp
Pentest Testing Corp

Posted on

Remote Code Execution (RCE) in React.js: How to Prevent

#cybersecurity #react #vulnerabilities #webdev

RCE in React is most often arbitrary JavaScript execution (XSS) in the browser or true RCE on the server/tooling side (Next.js/Node, build chain). Below are quick wins, code fixes, and a free way to scan your site.

Try a free scan: https://free.pentesttesting.com/
More posts: https://www.pentesttesting.com/blog/

Remote Code Execution (RCE) in React.js: How to Prevent

What “RCE” means for React apps

  • Client-side: Untrusted content that runs as JS = XSS (can steal tokens, pivot to accounts, trigger supply-chain scripts).
  • Server-side/SSR & tooling: Unsafe Node APIs, deserialization, or malicious npm packages can lead to actual RCE on your servers/CI.

1) dangerouslySetInnerHTML done safely

❌ Vulnerable

export default function Post({ html }) {
  return <div dangerouslySetInnerHTML={{ __html: html }} />;
}
Enter fullscreen mode Exit fullscreen mode

✅ Fix with sanitization

import DOMPurify from 'dompurify';

export default function Post({ html }) {
  const clean = DOMPurify.sanitize(html, { ALLOW_UNKNOWN_PROTOCOLS: false });
  return <div dangerouslySetInnerHTML={{ __html: clean }} />;
}
Enter fullscreen mode Exit fullscreen mode

Add a strict CSP (no unsafe-inline) and prefer component rendering over raw HTML.

Screenshot of the free Website Vulnerability Scanner UI:

Screenshot of the free tools webpage where you can access security assessment tools.Screenshot of the free tools webpage where you can access security assessment tools.

2) Never eval or new Function user data

❌ Vulnerable

const result = new Function(`return (${userInput})`)(); // user-controlled!
Enter fullscreen mode Exit fullscreen mode

✅ Safer pattern

// If you must parse, define an explicit schema:
import { z } from "zod";
const Shape = z.object({ theme: z.enum(["dark","light"]) });
const safe = Shape.safeParse(JSON.parse(userInput));
Enter fullscreen mode Exit fullscreen mode

3) Template injection via third-party renderers

❌ Vulnerable

import _ from "lodash";
const html = _.template(userTpl)({ name: req.query.name }); // unsanitized
Enter fullscreen mode Exit fullscreen mode

✅ Fix

const tpl = _.template(STRING_TEMPLATE, { variable: "data", imports: {} });
const safeName = DOMPurify.sanitize(name);
const html = tpl({ name: safeName });
Enter fullscreen mode Exit fullscreen mode

4) Next.js / SSR: don’t expose Node execution

❌ Vulnerable (server side)

// pages/api/run.js
import { exec } from "child_process";
export default (req, res) => {
  exec(`grep ${req.query.q} data.txt`, (e, out) => res.send(out)); // injection risk
};
Enter fullscreen mode Exit fullscreen mode

✅ Fix

import { spawn } from "child_process";
export default (req, res) => {
  const q = String(req.query.q || "");
  const ps = spawn("grep", ["--", q, "data.txt"]); // arg-safe
  let out = "";
  ps.stdout.on("data", d => (out += d));
  ps.on("close", () => res.status(200).send(out));
};
Enter fullscreen mode Exit fullscreen mode

5) Supply-chain hygiene (npm)

  • Pin versions, enable lockfiles, and use npm audit/npm audit fix.
  • Restrict postinstall scripts (--ignore-scripts in CI).
  • Scope permissions for CI tokens & artifacts.

Sample Assessment Report by our free tool to check Website Vulnerability:

Sample vulnerability assessment report generated with our free tool, providing insights into possible vulnerabilities.Sample vulnerability assessment report generated with our free tool, providing insights into possible vulnerabilities.

Defense in depth

  • CSP: no unsafe-inline, use nonces/hashes.
  • Escaping: Prefer React’s automatic escaping; sanitize only when you must.
  • AuthN/Z: Token scoping, HttpOnly cookies, SameSite.
  • Logs & monitoring: Alert on script errors, 3P script changes, and CSP violations.

Run a quick check (free)

  1. Visit https://free.pentesttesting.com/
  2. Enter your site and start the scan.
  3. Review findings and fix with the patterns above. More articles: https://www.pentesttesting.com/blog/

Managed help & services

Top comments (0)