v145 · Web APIs · Trusted Types Demo

Trusted Types Demo

Creates a Trusted Types policy, generates typed values, and assigns them to DOM sinks — showing both successful assignments and what happens when an unsafe value is rejected.

This page does not use the require-trusted-types-for CSP header, so raw strings still reach sinks. Trusted Types is demonstrated in "permissive" (reporting) mode. In a production app you would add Content-Security-Policy: require-trusted-types-for 'script' to enforce it.

API support

trustedTypes API—
trustedTypes.createPolicy—
TrustedHTML created—
innerHTML assignment—

output element

Click “Run Trusted Types demo”.

code

// Create a Trusted Types policy (Chrome 145+ spec-aligned)
const policy = trustedTypes.createPolicy('demo-policy', {
  createHTML: (input) => {
    // Only allow bold tags (minimal allowlist for demo)
    return input.replace(/<(?!\/?(b|em|strong)\b)[^>]+>/gi, '');
  },
});

// Create a TrustedHTML value
const safeHtml = policy.createHTML('Hello <b>world</b>');
console.log(safeHtml instanceof TrustedHTML); // true

// Assign to innerHTML — safe because it's a TrustedHTML
document.getElementById('output').innerHTML = safeHtml;

// Assigning a raw string when enforcement is active would throw:
// TypeError: This assignment requires a 'TrustedHTML' object.
// document.getElementById('output').innerHTML = '<b>raw string</b>';

see also