Trusted Types - Interactive Lab | IconVault
Learn Trusted Types: create policies, fire XSS payloads at DOM sinks, watch them get neutralized. Free, in-browser.
Trusted Types
XSS-proof your DOM sinks
Trusted Types is a browser API, not a library: sinks like innerHTML reject raw strings once you deploy the CSP header require-trusted-types-for 'script'. This page simulates a policy so you can see the mechanics. Demo sanitizer is regex-based, use DOMPurify in production. Your browser lacks trustedTypes, so the preview falls back to the same sanitize step.
Attack payloads
5 of 5 free runs left.
Policy code
// Create a Trusted Types policy once, then route every
// innerHTML assignment through it.
const policy = trustedTypes.createPolicy("escape", {
createHTML: (input) => sanitize(input), // your sanitizer here
});
// The sink now only accepts TrustedHTML, never raw strings:
el.innerHTML = policy.createHTML(userInput);
// Without a policy this throws once the CSP below is live:
// el.innerHTML = userInput; // TypeError: requires TrustedHTML
//
// Enforce it with a real header:
// Content-Security-Policy: require-trusted-types-for 'script';Rendered through the policy
Click "Run through policy". The raw payload never touches the DOM as a string.
Before vs after
Attacker input
<img src="x" onerror="alert('XSS')">Policy output
// run the policy to see the sanitized output
With the CSP header live, assigning the left side directly to innerHTML throws a TypeError. That is the whole point: dangerous sinks stop accepting strings entirely, so one missed sanitize call cannot become an XSS.
About this tool
IconVault's Trusted Types playground teaches XSS prevention by doing. Pick real attack payloads like `img onerror` and `svg onload`, run them through a policy, and watch the before/after: the dangerous markup goes in, safe markup comes out, and the rendered preview proves it. The lab also shows the policy code you would ship.
It is free and runs fully in your browser. The lab is honest about the mechanics: this page simulates a policy, real enforcement needs the CSP header `require-trusted-types-for 'script'`, and the demo sanitizer is regex-based while production should use DOMPurify.
Frequently asked questions
Popular searches
More tools
Algorithm Visualizer
Watch sorting and searching animate step by step
Alt Text Helper
Write better image alt text with live feedback
ARIA Reference
Searchable ARIA roles and attributes guide
Array Visualizer
Step through map, filter, reduce like a debugger
Coming soon
CLI
Coming soon
Figma plugin
Coming soon
VS Code extension
Coming soon
Chrome extension
Coming soon
AI icon generator
Coming soon
Team workspaces
Coming soon