Trusted Types Explorer

Trusted Types help prevent DOM XSS by requiring typed objects instead of raw strings for dangerous DOM sinks like innerHTML, eval(), and document.write().
Note: Enforcement requires a CSP header. This playground simulates the behavior for learning purposes.

1. Create Policies

Policy Name

Sanitization Strategy

Active Policies

No policies created yet.

2. Test innerHTML Assignment

HTML Input (potentially dangerous)

Policy to Use

Result

Run a test to see results.

Rendered Output

3. Explore Sink Types

TrustedHTML

TrustedScript

TrustedScriptURL

Sinks that accept TrustedHTML:

// These sinks require TrustedHTML when enforced
element.innerHTML = trustedHTML;
element.outerHTML = trustedHTML;
document.write(trustedHTML);
document.writeln(trustedHTML);
DOMParser.parseFromString(trustedHTML, 'text/html');
element.insertAdjacentHTML('beforeend', trustedHTML);

Sinks that accept TrustedScript:

// These sinks require TrustedScript when enforced
eval(trustedScript);
setTimeout(trustedScript, 0);
setInterval(trustedScript, 1000);
new Function(trustedScript);

Sinks that accept TrustedScriptURL:

// These sinks require TrustedScriptURL when enforced
script.src = trustedScriptURL;
worker = new Worker(trustedScriptURL);
importScripts(trustedScriptURL);
// Also: embed.src, object.data, etc.

4. Event Log

[info] Ready. Create a policy and test assignments.

5. CSP Header Configuration

These Content Security Policy headers enable Trusted Types enforcement:

Report Only (recommended for testing)

Content-Security-Policy-Report-Only: require-trusted-types-for 'script'; report-uri /csp-report

Enforce (production)

Content-Security-Policy: require-trusted-types-for 'script'

Allow specific policies only

Content-Security-Policy: trusted-types sanitizer default; require-trusted-types-for 'script'

With reporting endpoint (modern)

Content-Security-Policy: require-trusted-types-for 'script'; report-to csp-endpoint Reporting-Endpoints: csp-endpoint="https://example.com/csp-reports"

Meta tag (limited — no report-uri support)

6. Default Policy

The default policy is special: it's automatically invoked when a string is assigned to a dangerous sink without an explicit trusted type. It acts as a global safety net. Only one default policy can exist.

// The default policy catches all untyped sink assignments
if (typeof trustedTypes !== 'undefined') {
  trustedTypes.createPolicy('default', {
    createHTML(input) {
      // Last chance to sanitize
      return input.replace(/</g, '&lt;').replace(/>/g, '&gt;');
    },
    createScript(input) {
      return input; // or throw to block all eval
    },
    createScriptURL(input) {
      if (input.startsWith('https://trusted.cdn.com/')) return input;
      throw new Error('Untrusted script URL: ' + input);
    }
  });
}