Web API Trusted Types

Last Updated : 22 Dec, 2023

Trusted Types API is a security mechanism used to prevent unauthorized sources from injecting code into a website and allowing only trusted sources to inject code into your website. Injecting code refers to any additional Scripts or HTML.

Concepts and Usage

Trusted Types API Prevents Cross-site scripting (XSS) attacks. XSS is a type of attack in which an attacker tries to inject a malicious script through user inputs or untrusted sources, attackers try to execute scripts that can manipulate the content, steal sensitive information, or perform unauthorized actions on behalf of the user.

By using Trusted Types API it locks down such risks by defining a set of policies for the types of code that can be executed, restricting the execution of scripts to only those defined by the developer.

Syntax:

// Creating a Trusted Types Policy
trustedTypes.createPolicy(policy_name', {
  // Allowing HTML: It takes an input and returns it as is
  createHTML: (input) => input,

  // Allowing Scripts: It takes an input and returns it as is
  createScript: (input) => input,
});

Parameters:

policy_name It is the name of the policy that is used later to refer to this policy when enforcing it.
policy object defines how different types of content should be treated and we can use methods such as createHTML, createScript, and createScriptURL.

Interfaces

Trusted Types API Interfaces are used to create a barrier between Web Applications and Cross-site scripting attacks.

TrustedHTML: It is used to create trusted HTML strings. Its method createHTML() is used to create the trusted HTML.
TrustedScript: It is used to create trusted Script strings. Its method createScript() is used to create the trusted script.
TrustedScriptURL: It is used to create trusted URLs for scripts. Its method createScriptURL() ensures that script URLs are treated as trusted.
TrustedTypePolicy: It is used to represent a policy within the Trusted Types API. methods such as createHTML, createScript, and createScriptURL are used to create trusted type policy.
TrustedTypePolicyFactory: It is associated with the factory object responsible for creating policies.

Example: This example shows the creation and use of a trusted HTML element.

Javascript

<html>
 
<head>
    <title>Trusted Type API Example</title>
    <!-- Enabling Trusted Types -->
    <meta http-equiv="Content-Security-Policy"
         content="require-trusted-types-for 'script';
         trusted-types render-policy">
</head>
 
<body>
    <h1>GeeksForGeeks | Trusted Type Example</h1>
    <label>The (malicious) data to render:</label> <br>
    <textarea id="data" cols="50" rows="4"></textarea> <br><br>
 
    <!-- This button will Not allow textarea Data to 
        render because it tries to render it without 
        using trusted type policy -->
    <button onclick="UnTrusted()">
        Render UnTrusted Data</button>
 
    <!-- This button will allow textarea data 
        as it tries to render it by usin
        g trusted type policy -->
    <button onclick="Trusted()">
        Render Trusted Types Data</button>
 
    <div id="result"></div>
 
    <script>
 
        // This code will set the intital value of textarea
        const initialData = `GeeksForGeeks (it is allowed by trusted 
        type policy)<img src="none"
        onerror="alert('This data will become code')">`;
        document.getElementById("data").value = initialData;
 
        // This function will be called when you
        // click on "Render UnTrusted Data" button 
        // It will not allow textarea data to get rendered
        // on page because we are Not using it with Trusted Type Policy
        function UnTrusted() {
            let data = document.getElementById("data").value;
            let div = document.getElementById("result");
 
            // It will try to render data of 
            // textarea but it will not allowed to do that
            div.innerHTML = data;
        }
 
 
        // This function will be called when you click on
        // "Render Trusted Types Data" button 
        // It will allow textarea data to get rendered on page
        // because we are using it with Trusted Type Policy
        function Trusted() {
            // Create Trusted Type policy
            const renderPolicy = trustedTypes
                .createPolicy('render-policy', {
                    createHTML: (input) => input,
                });
 
            let data = document.getElementById("data").value;
            let div = document.getElementById("result");
 
            // Using the Trusted Type policy, which
            // will allow data to get rendered on page
            div.innerHTML = renderPolicy.createHTML(data);
        }
 
    </script>
</body>
 
</html>

Output:

Trusted-Type

Browser Support:

Google Chrome 83 and above
Edge 83 and above
Firefox Not support
Opera 69 and above
Safari Not support

Suggest improvement

Web API Battery

Share your thoughts in the comments