Escape output, never innerHTMLEscape output, never innerHTML

Same string, two sinks

Type or pick a payload.

comment.textContent = userInput;

<p>{userInput}</p>         // React
<p>{{ userInput }}</p>     // Vue

Parse, then allow-list

Pick a payload, then change the allow-list.

import DOMPurify from 'isomorphic-dompurify';

const sanitized = DOMPurify.sanitize(userInput, {
  ALLOWED_TAGS: ['p', 'b', 'strong', 'i', 'em', 'a', 'ul', 'li', 'br'],
  ALLOWED_ATTR: ['href'],
});

// only ever sanitized output
<div dangerouslySetInnerHTML={{ __html: sanitized }} />

A calculator that runs code

Type or pick an expression.

eval()

function calc(src) {
  let i = 0;
  const skip = () => { while (/\s/.test(src[i] ?? "")) i++; };
  const fail = () => { throw new SyntaxError(`Unexpected "${src[i] ?? "end"}" at ${i}`); };
  const factor = () => {
    skip();
    if (src[i] === "-") { i++; return -factor(); }
    if (src[i] === "(") { i++; const v = sum(); skip(); if (src[i] !== ")") fail(); i++; return v; }
    const m = /^\d*\.?\d+/.exec(src.slice(i));
    if (!m) fail();
    i += m[0].length;
    return Number(m[0]);
  };
  const product = () => { let v = factor(); for (skip(); "*/%".includes(src[i] || "_"); skip()) { const op = src[i++]; const r = factor(); v = op === "*" ? v * r : op === "/" ? v / r : v % r; } return v; };
  const sum = () => { let v = product(); for (skip(); "+-".includes(src[i] || "_"); skip()) { const op = src[i++]; const r = product(); v = op === "+" ? v + r : v - r; } return v; };
  const v = sum(); skip();
  if (i < src.length) fail();
  return v;
}

Why it matters, pros and cons