v145 · Security · DOM · demo

Sanitizer Bridge

The canonical real-world Trusted Types pattern: a createPolicy whose createHTML function runs a sanitizer before returning the string. The policy acts as a gate — raw HTML never reaches innerHTML without passing through the sanitizer. Type a snippet, try injecting <script> tags, and watch the threat log show what was stripped before the Trusted Type was created.

Chrome 145+ — Trusted Types spec alignment fixes policy lookup ordering and additional sink coverage. The trustedTypes.createPolicy API itself is available in Chrome 83+. If Trusted Types is not available this demo falls back to a manual sanitizer display.

Type or paste HTML in the input · use the sample buttons to inject threats · watch the sanitizer strip them before the TrustedHTML value is created

Checking Trusted Types support…

Raw HTML input —

Sanitized output (rendered) —

Sanitizer threat log

— — Waiting for input…

// Trusted Types sanitizer bridge — real-world pattern
// Chrome 145 aligns policy lookup and additional sink coverage with the spec.

const policy = trustedTypes.createPolicy('my-sanitizer', {
  createHTML: (raw) => {
    // Run sanitizer (e.g. DOMPurify) before returning the string.
    // The Trusted Type wrapper guarantees this code ran.
    return DOMPurify.sanitize(raw, { RETURN_TRUSTED_TYPE: true });
  },
  createScriptURL: (url) => {
    const allowed = ['https://cdn.example', 'https://scripts.example'];
    if (!allowed.some(o => url.startsWith(o))) throw new Error('Disallowed URL');
    return url;
  }
});

// Assign to a sink — must pass through the policy
el.innerHTML = policy.createHTML(userInput);       // safe ✓
script.src   = policy.createScriptURL(scriptUrl);  // allowlisted ✓

// Without policy: raw string assignment blocked when TT enforcement is on:
// el.innerHTML = userInput; // → TypeError (TT violation)

see also