Trusted Types - Interactive Lab | IconVault

Learn Trusted Types: create policies, fire XSS payloads at DOM sinks, watch them get neutralized. Free, in-browser.

All tools

Trusted Types

XSS-proof your DOM sinks

5 of 5 free uses left

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

trusted typestrusted types tutorialtrusted types examplewhat are trusted typestrusted types xssprevent xss javascriptdom xss preventioninnerhtml xssinnerhtml securitysanitize html javascriptxss payloadxss payloads listimg onerror xsssvg onload xssjavascript alert xssxss attack exampleslearn xssxss playgroundxss demoxss sandboxcontent security policycsp headerrequire-trusted-types-forcsp require trusted typestrustedtypes.createpolicycreatepolicytrustedhtmldompurifydompurify vs trusted typessanitize user inputescape html javascriptweb securityfrontend securityxss cheat sheetxss prevention cheat sheetowasp xss preventiontrusted types browser supporttrusted types firefoxtrusted types safaritrusted types chrometrusted types policy exampletrusted types codesink xssdom sinksdangerous sinks javascriptsecure innerhtml alternativetextcontent vs innerhtmlfree security toolweb security labtrusted types mdnxss filter bypasscsp nonce vs trusted types

More tools

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

View all 10+ tools →