Sanitization and Trusted HTML

// on save
const clean = body.replace(/<script[\s\S]*?<\/script>/gi, '')
                  .replace(/ on\w+=/gi, ' ')
await db.comments.insert({ body: clean })

// on every surface, forever
el.innerHTML = comment.body

// on save: store what the user wrote
await db.comments.insert({ body })

// in the component, once per value rather than once per render
const html = useMemo(
  () => sanitize(comment.body, COMMENT_POLICY),   // explicit allowlist
  [comment.body],
)
return <div dangerouslySetInnerHTML={{ __html: html }} />

The first version is a denylist, so it is wrong by omission in ways nobody can enumerate; it destroys the original, so a wrong allowlist is unrecoverable; and it commits every future consumer — email, exports, a native client — to a cleaning configured for one HTML surface. The second keeps the source of truth intact and lets each surface apply its own policy, which is the only arrangement that survives a second consumer.

1// Enforced by a response header, alongside your CSP:
2//   Content-Security-Policy: require-trusted-types-for 'script'; trusted-types app-html
3//
4// With that header, el.innerHTML = someString throws a TypeError.
5// Only an object minted by the 'app-html' policy is accepted.
6 
7type HtmlSink = { toString(): string }
8 
9const policy =
10  typeof window !== 'undefined' && 'trustedTypes' in window
11    ? window.trustedTypes.createPolicy('app-html', {
12        createHTML: (input: string) => sanitize(input, COMMENT_POLICY),
13      })
14    : undefined
15 
16/** Returns a TrustedHTML where supported, a sanitized string where not. */
17export function toRenderableHtml(raw: string): HtmlSink | string {
18  return policy ? policy.createHTML(raw) : sanitize(raw, COMMENT_POLICY)
19}

The sanitizing still happens in both branches — the policy is a chokepoint, not a sanitizer. What the header buys you is that any *other* path to innerHTML, in your code or in a dependency, fails loudly instead of quietly working.