Experimental: This feature is experimental and subject to change. It may not be supported by all browsers and could have compatibility issues.

trusted-types

The trusted-types directive helps prevent XSS attacks by requiring specially verified values (called "trusted types") instead of raw strings when modifying sensitive parts of a web page.

Recommended Values

'none' No sources are allowed
<policyName> A valid policy name that can contain alphanumeric characters and -#=_/@.%. Using * allows any unique policy name.

Recommended trusted-types configuration

Content-Security-Policy: trusted-types 'none';

Tips & Tricks

This directive is experimental and may not be supported by all browsers.
Used with the require-trusted-types-for directive, it allows defining strict rules for writing values to the DOM.

Working with require-trusted-types-for

The trusted-types directive works in conjunction with require-trusted-types-for to provide comprehensive protection against DOM-based XSS attacks. Here's how they work together:

trusted-types defines which policies are allowed to create trusted types
require-trusted-types-for specifies which DOM operations must use these trusted types

Example of Combined Usage

Combined CSP Header with trusted-types and require-trusted-types-for

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

How It Works

First, create a policy using the Trusted Types API:

Creating a trusted types policy

const policy = trustedTypes.createPolicy('mypolicy1', {
  createHTML: (string) => string,
  createScript: (string) => string,
  createScriptURL: (string) => string
});

Then use the policy for DOM operations:

Using trusted types in DOM operations

// This will work
element.innerHTML = policy.createHTML('<div>Safe content</div>');

// This will throw an error
element.innerHTML = '<div>Unsafe content</div>';

Possible Values

<policyName>: A valid policy name that can contain alphanumeric characters and -#=_/@.%. Using * allows any unique policy name.
'none': No policies are allowed
'allow-duplicates': Allows duplicate policy names

Example Configurations

Example with multiple policies

CSP Header with trusted-types

Content-Security-Policy: trusted-types mypolicy1 mypolicy2 'allow-duplicates';

Allowed

<!-- allowed by mypolicy1 and mypolicy2 with 'allow-duplicates' -->
<script>
  const policyFoo = trustedTypes.createPolicy('mypolicy1', {});
  const policyBar = trustedTypes.createPolicy('mypolicy1', {});
  const policyBaz = trustedTypes.createPolicy('mypolicy2', {});
</script>

Blocked

<!-- blocked because the policy name is not allowed -->
<script>
  const policyFoo = trustedTypes.createPolicy('mypolicy3', {});
</script>

Additional Information

The trusted-types directive is essential for strengthening security against XSS attacks
It works in conjunction with the Trusted Types API
It significantly reduces the DOM XSS attack surface
Facilitates monitoring and code review of sensitive parts of the application
When combined with require-trusted-types-for, it enforces strict type checking for DOM operations