Trusted Types API Demo

Trusted Types is a browser security API designed to eliminate DOM-based Cross-Site Scripting (XSS) attacks. It enforces that only trusted, sanitized data can be assigned to dangerous DOM sinks like innerHTML, outerHTML, document.write, and eval.

Instead of accepting arbitrary strings, these sinks require special typed objects — TrustedHTML, TrustedScript, or TrustedScriptURL — that can only be created through explicitly defined policies. This makes it impossible for attacker-controlled strings to reach execution contexts.

Trusted Types prevents XSS by enforcing a type-based security boundary:

1. Default deny: All DOM sinks reject plain strings by default when Trusted Types are enforced via CSP.
2. Policy enforcement: Developers must create explicit policies that validate or sanitize data before it reaches a sink.
3. Audit trail: Each policy call is recorded, making it easy to audit where trusted values are created.
4. Compile-time safety: TypeScript definitions help catch violations at development time.

For example, element.innerHTML = untrustedString will throw a TypeError when Trusted Types are enforced, forcing developers to use policy.createHTML(sanitizedString) instead.

As of 2024-2025, Trusted Types is supported in:

• Google Chrome 83+ (full support)
• Microsoft Edge 83+ (full support, Chromium-based)
• Opera 69+ (Chromium-based)
• Samsung Internet 14+
• Firefox — Partial support in development (tracked in Bug 1709390)
• Safari — Not yet supported (as of early 2025)

You can use feature detection: if (window.trustedTypes) { /* supported */ }. For unsupported browsers, consider using a polyfill or fallback sanitization library like DOMPurify.

Add one of these directives to your Content-Security-Policy HTTP header:

The require-trusted-types-for 'script' directive enables enforcement. The optional trusted-types directive restricts which policy names are allowed, adding an extra layer of security.

• TrustedHTML — For HTML content assigned to innerHTML, outerHTML, insertAdjacentHTML, etc. Created via policy.createHTML().
• TrustedScript — For script content passed to eval(), Function(), setTimeout() with string arguments, etc. Created via policy.createScript().
• TrustedScriptURL — For URLs passed to script loading sinks like <script src>, import(), Web Workers, etc. Created via policy.createScriptURL().

Each type corresponds to a specific injection sink category, ensuring precise control over what data reaches each dangerous API.

Yes, but it requires coordination. Many popular libraries have already adopted Trusted Types compatibility:

• DOMPurify — Returns TrustedHTML when Trusted Types are available
• Angular — Built-in Trusted Types support since v11
• React — Trusted Types compatible; uses text content by default for JSX
• Lit (LitElement) — Full Trusted Types support
• jQuery — Version 3.5+ added Trusted Types compatibility

For libraries that don't support Trusted Types, you can create a default policy as a fallback, but this should be used sparingly as it can weaken security.

No. Trusted Types is a defense-in-depth mechanism, not a replacement for proper input validation and output encoding. It acts as a safety net at the DOM level:

• Input validation ensures data conforms to expected formats before processing
• Output encoding ensures data is safely rendered in the correct context (HTML, JS, CSS, URL)
• Trusted Types ensures that even if validation/encoding fails, dangerous sinks cannot accept untrusted strings

All three layers should be used together for comprehensive XSS protection.

• Overly permissive default policies — A default policy that passes through unsanitized strings defeats the purpose
• Forgetting about all sinks — Remember document.write, eval, setTimeout with strings, srcdoc on iframes, etc.
• Third-party code — Ads, analytics, and widgets may break if they use forbidden sinks
• Dynamic code generation — Template engines that compile to string-based innerHTML need updating
• Reporting gaps — Use report-uri or report-to alongside enforcement to catch violations without breaking users

Start with Report-Only mode to identify violations before enforcing Trusted Types in production.