HTML-tools

Gratis Trusted Types Policy Generator

Genereer Trusted Types-beleid en CSP-headers om DOM-gebaseerde XSS te voorkomen met getypeerde waarden voor gevaarlijke DOM-sinks.

Tool laden...

Wat is Trusted Types Policy Generator?

Trusted Types is a browser security API that prevents DOM-based XSS by requiring typed values instead of strings for dangerous DOM sinks like innerHTML, eval(), and script.src. Developers use trustedTypes.createPolicy() to define sanitization rules that transform or reject untrusted strings before they reach injection sinks. Combined with a Content-Security-Policy directive, Trusted Types closes a major class of XSS vulnerabilities by enforcing that only explicitly sanctioned operations can assign values to high-risk DOM properties.

Snel antwoord

Trusted Types prevents DOM-based XSS by blocking strings from reaching dangerous DOM sinks like innerHTML and eval(). Use trustedTypes.createPolicy() with createHTML/createScript/createScriptURL operations, then enforce with Content-Security-Policy: require-trusted-types-for 'script'. Always test in report-only mode first using Content-Security-Policy-Report-Only to avoid breaking existing functionality.

Beperkingen

Trusted Types requires browser support in Chrome 83+, Edge 83+, and Safari 17+. Firefox does not support Trusted Types as of 2026. Applications must handle Firefox gracefully without Trusted Types protection by providing fallback behavior for unsupported browsers.
Trusted Types does not cover all XSS vectors - it protects DOM injection sinks (innerHTML, outerHTML, insertAdjacentHTML, eval, document.write) but does not prevent XSS through URL attributes (href, src), event handler attributes, or CSS-based injection vectors.
Migrating large applications to Trusted Types requires significant refactoring. Every innerHTML, insertAdjacentHTML, outerHTML, and document.write usage must be wrapped in a policy, which can involve hundreds of source changes in a legacy codebase with extensive dynamic DOM manipulation.

Zo gebruik je deze tool

Configure the allowed operations - createHTML, createScript, createScriptURL - and decide how each operation handles input: strict rejection (block all untrusted input), sanitization (pass through a sanitizer function), or passthrough for trusted sources.
Choose the CSP mode - enforce (require-trusted-types-for 'script' in Content-Security-Policy) blocks violations, or report-only (same directive in Content-Security-Policy-Report-Only) logs violations without blocking. Always start with report-only mode during migration.
Select your server platform - Nginx or Apache - to generate the corresponding CSP header configuration that integrates with your existing server blocks or virtual hosts.
Deploy the policy JavaScript file and server config, then test your application in report-only mode. Review console violation reports and adjust policies until no violations appear, then switch to enforce mode.

Waarvoor je het kunt gebruiken

Protect a content-heavy web application from stored and reflected XSS by requiring all HTML injection points to go through a Trusted Types policy with a configured sanitizer function.
Migrate a legacy application to Trusted Types by deploying in report-only mode first, fixing violation reports incrementally across the codebase, then switching to full enforce mode.
Enforce a strict Trusted Types policy in third-party script-heavy environments where external widgets and embeds load dynamic content via innerHTML, ensuring all injected HTML passes through the policy.

Gebruik

Praktische voorbeelden

Voorbeeld

Report-only migration for a legacy app

A large admin dashboard uses innerHTML for various dynamic widgets. Deploy Trusted Types in report-only mode first by setting require-trusted-types-for 'script' in the Content-Security-Policy-Report-Only header. Collect violation reports, refactor each widget to use a Trusted Types policy, then switch to Content-Security-Policy enforce mode once all violations are resolved.

Voorbeeld

Strict policy for a CMS editor

A CMS with a rich text editor needs to render user-generated HTML content safely. Create a Trusted Types policy with a createHTML function that passes HTML through a DOMPurify-style sanitizer before returning a TrustedHTML object. All innerHTML assignments go through this policy, preventing XSS even if malicious content bypasses server-side filtering.

Veelgemaakte fouten

Deploying Trusted Types in enforce mode without first testing in report-only mode - a strict policy can break every feature that uses innerHTML, outerHTML, or insertAdjacentHTML. Always validate with report-only before enforcing.
Using defaultPolicy as a blanket allow-all - trustedTypes.createPolicy('default', { createHTML: (s) => s }) bypasses all XSS protection by passing every string through unmodified. A default policy should still sanitize, not passthrough.
Forgetting that eval() is a Trusted Types sink - if your application uses JSON.parse() on eval-compatible strings or relies on dynamic code execution, those calls must go through a createScript policy or be controlled via a separate CSP script-src directive.

Verificatie

Open the browser DevTools console after deploying the Trusted Types policy in enforce mode. Any violation blocks the operation and logs a TypeError with details about the blocked assignment and the affected DOM sink. Verify that normal application usage produces zero violations.
Switch to report-only mode temporarily and use the Issues tab in Chrome DevTools to inspect Trusted Types violation reports. Filter by 'trusted-types' to see all potential violations grouped by sink type and source location.

FAQ

Vragen over Trusted Types Policy Generator

Does Trusted Types protect against existing XSS vulnerabilities?

Yes, if the vulnerability requires passing a string to a DOM sink like innerHTML, outerHTML, or insertAdjacentHTML. Trusted Types forces all assignments to these sinks to go through a policy - if no policy exists or the policy rejects the input, the assignment is blocked. However, Trusted Types does not protect against XSS via URL attributes (href, src), event handlers (onclick, onerror), or server-side injection. It specifically targets DOM injection sinks.

Can I use Trusted Types with React, Vue, or Angular?

Yes, but the integration varies per framework. React supports Trusted Types via its expected typed object contract - dangerouslySetInnerHTML accepts TrustedHTML objects. Vue requires a custom policy wrapper for v-html bindings. Angular provides DomSanitizer integration that can be configured to work with Trusted Types. Check each framework's documentation for specific Trusted Types support details.

What happens to third-party scripts under Trusted Types?

Third-party scripts that assign values to DOM sinks (innerHTML, document.write, outerHTML) are blocked unless they go through a Trusted Types policy. You may need to create a policy that allows specific trusted scripts, or add a 'trusted-types' directive in the CSP header listing which policy names are allowed. Third-party script widgets commonly break under Trusted Types and require explicit policy configuration.

How do I handle Trusted Types in report-only mode?

Set Content-Security-Policy-Report-Only: require-trusted-types-for 'script' instead of the enforce Content-Security-Policy header. The browser logs violations to the console and sends reports to the configured report-uri endpoint without blocking any operations. Review all violation reports, create appropriate policies for each sink usage, then switch to enforce mode by moving the directive to the Content-Security-Policy header.

Gerelateerde tools