Web API Trusted Types

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:

Browser Support:

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

Article Tags :

Geeks Premier League

JavaScript

Web Technologies

Geeks Premier League 2023