# Trusted Types on WebUI [TOC] ## What is Trusted Types? [Trusted Types](https://web.dev/trusted-types/) is a defense in depth mitigation for DOM-based Cross Site Scripting attacks. Trusted Types introduces a runtime type system for dangerous sinks (e.g. `elem.innerHTML`, `eval`, `scriptElem.src`, etc), and only allows Trusted Types (i.e. `TrustedHTML`, `TrustedScript`, or `TrustedScriptURL`) as an assignment to those sinks. While [CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) in general tries to mitigate the exploitability of an injection by only allowing certain script to be executed (via allow-list of host, nonce, hash, etc), Trusted Types provides a way to enforce validation for all injections. This is ideal because without Trusted Types, any other resources such as CSS, image, video, audio, etc can be injected by default in WebUI pages, which could cause other types of bugs in the WebUI renderer such as memory corruption bugs. ## How can I "Trusted Type" my code? **Note: If your JS code will also run on Chromium for iOS (i.e. WebKit), you should have an if statement to check the Trusted Types support before using methods/properties under `window.trustedTypes` :** ``` if (window.trustedTypes) { // Trusted Types is supported, let's use Trusted Types 😎 elem.innerHTML = trustedTypes.emptyHTML; } else { // Trusted Types is NOT supported 😔 elem.innerHTML = ''; } ``` ### Change empty string assignment to dangerous sinks Example code: ``` document.body.innerHTML = ''; ``` This will be a Trusted Types violation because the value we are assigning to a dangerous sink is not a Trusted Type. This can be converted to: ``` document.body.innerHTML = trustedTypes.emptyHTML; ``` There is also `trustedTypes.emptyScript` to clear script contents. ### Change text assignment to dangerous sinks Example code: ``` document.body.innerHTML = 'Hello Guest!'; ``` Because this is just a text assignment, this can be converted to: ``` document.body.textContent = 'Hello Guest!'; ``` ### Change HTML assignment to dangerous sinks #### Use _template_ element Example code: ``` document.body.innerHTML = '

' + loadTimeData.getString('foo') + '

'; ``` This can be converted by adding _template_ element to HTML file: ``` ``` And then adding following JS code to JS file: ``` // body might already have some contents, so let's clear those first 😊 document.body.innerHTML = trustedTypes.emptyHTML; const temp = document.querySelector('#foo-template').cloneNode(true).content; temp.querySelector('p').textContent = loadTimeData.getString('foo'); document.body.appendChild(temp); ``` #### Use DOM APIs In cases where you don't have control over the HTML file (e.g. converting common JS libraries), you can use DOM APIs. Example code: ``` document.body.innerHTML += '

' + loadTimeData.getString('foo') + '

'; ``` And then adding following JS code to JS file: ``` const p = document.createElement('p'); p.textContent = loadTimeData.getString('foo'); document.body.appendChild(p); ``` #### Use `trustedTypes.createPolicy` If you don't have control of the HTML file and use of DOM APIs isn't ideal for readability, you can [use `trustedTypes.createPolicy`] (https://web.dev/trusted-types/#create-a-trusted-type-policy). Example code: ``` document.body.innerHTML = '
' + '' + '' + '' + '
' + '
'; ``` This can be converted to: ``` const htmlString = '
' + '' + '' + '' + '
' + '
'; const staticHtmlPolicy = trustedTypes.createPolicy( 'foo-static', {createHTML: () => htmlString}); // Unfortunately, a string argument to createHTML is required. // https://github.com/w3c/webappsec-trusted-types/issues/278 document.body.innerHTML = staticHtmlPolicy.createHTML(''); ``` This case also requires changes in C++, as we need to allow the `foo-static` Trusted Type policy (created above in `trustedTypes.createPolicy`) in the CSP header. ``` source->OverrideContentSecurityPolicy( network::mojom::CSPDirectiveName::TrustedTypes, "trusted-types foo-static;"); ``` ### Change script URL assignment to dangerous sinks Example code: ``` const script = document.createElement('script'); script.src = 'chrome://resources/foo.js'; document.body.appendChild(script); ``` This can be converted to: ``` const staticUrlPolicy = trustedTypes.createPolicy( 'foo-js-static', {createScriptURL: () => 'chrome://resources/foo.js'}); const script = document.createElement('script'); // Unfortunately, a string argument to createScriptURL is required. // https://github.com/w3c/webappsec-trusted-types/issues/278 script.src = staticUrlPolicy.createScriptURL(''); document.body.appendChild(script); ``` This case also requires changes in C++, as we need to allow the `foo-js-static` Trusted Type policy (created above in `trustedTypes.createPolicy`) in the CSP header. ``` source->OverrideContentSecurityPolicy( network::mojom::CSPDirectiveName::TrustedTypes, "trusted-types foo-js-static;"); ``` ## How to disable Trusted Types? In case there is no way to support Trusted Types in a WebUI page, you can disable Trusted Types with following code: ``` source->DisableTrustedTypesCSP(); ``` ## How to add a test for Trusted Types on a WebUI page? You can add your WebUI page to [this list][browsertest-list] and it will check for Trusted Types violations on your WebUI page. [browsertest-list]: https://source.chromium.org/chromium/chromium/src/+/main:chrome/browser/ui/webui/chrome_url_data_manager_browsertest.cc;l=194;drc=de8ade0753244ff6d1ef20cb2a38fe292fe9ba0a ## Sample CLs 1. [Remove innerHTML usage in chrome://interstitials](https://crrev.com/c/2245937) 2. [Trusted Type various WebUI](https://crrev.com/c/2236992) 3. [Trusted Type WebRTC internals](https://crrev.com/c/2208950)