add trusted types api support for trusted-create-element. #507

AG-43305

Squashed commit of the following:

commit d2a1132
Author: slvvko <v.leleka@adguard.com>
Date:   Mon Feb 2 20:19:45 2026 -0500

    add trusted types api support for trusted-create-element

commit 04c7683
Author: slvvko <v.leleka@adguard.com>
Date:   Mon Feb 2 19:43:23 2026 -0500

    fix md formatting in readme

Author: slvvko

CHANGELOG.md

@@ -18,6 +18,7 @@ The format is based on [Keep a Changelog], and this project adheres to [Semantic
   like `new Promise()` or `new MutationObserver()` [#461].
 - `remove-request-query-parameter` scriptlet to remove query parameters
   from `fetch` and `XMLHttpRequest` requests [#329].
+- [Trusted Types API] support in `trusted-create-element` scriptlet [#507].
 
 ### Fixed
 
@@ -39,6 +40,7 @@ The format is based on [Keep a Changelog], and this project adheres to [Semantic
 [#422]: https://github.com/AdguardTeam/Scriptlets/issues/422
 [#461]: https://github.com/AdguardTeam/Scriptlets/issues/461
 [#486]: https://github.com/AdguardTeam/Scriptlets/issues/486
+[#507]: https://github.com/AdguardTeam/Scriptlets/issues/507
 
 ## [v2.2.15] - 2026-01-22
 
@@ -207,7 +209,7 @@ The format is based on [Keep a Changelog], and this project adheres to [Semantic
 - Ability to set random response content in `prevent-fetch` scriptlet [#416].
 - Ability to choose CSS injection method in `inject-css-in-shadow-dom` scriptlet [#477].
 - TypeScript types for CoreLibs provided [`ContentScriptApi`](./README.md#scriptlets-api--content-script-api).
-- Trusted Types API utility — [`PolicyApi`](./README.md#scriptlets-api--content-script-api--policy-api).
+- [Trusted Types API] utility — [`PolicyApi`](./README.md#scriptlets-api--content-script-api--policy-api).
 
 ### Changed
 
@@ -294,7 +296,7 @@ The format is based on [Keep a Changelog], and this project adheres to [Semantic
 ### Added
 
 - `prevent-canvas` scriptlet [#451].
-- `trusted-types` policy to `trusted-replace-node-text` scriptlet [#457].
+- [Trusted Types API] support in `trusted-replace-node-text` scriptlet [#457].
 - `parentSelector` option to search for nodes for `remove-node-text` scriptlet [#397].
 - `transform` option with `base64decode` value for `href-sanitizer` scriptlet [#455].
 - `removeParam` and `removeHash` values in `transform` option  for `href-sanitizer` scriptlet [#460].
@@ -911,3 +913,5 @@ The format is based on [Keep a Changelog], and this project adheres to [Semantic
 [#255]: https://github.com/AdguardTeam/Scriptlets/issues/255
 
 [@adguard/agtree]: https://www.npmjs.com/package/@adguard/agtree
+
+[Trusted Types API]: https://developer.mozilla.org/docs/Web/API/Trusted_Types_API

README.md

@@ -882,12 +882,12 @@ declare function convertAdgRedirectToUbo(rule: string): string;
 
 | Browser               | Version |
 |-----------------------|:--------|
-| Chrome                | ✅ 55    |
-| Firefox               | ✅ 52    |
-| Edge                  | ✅ 15    |
-| Opera                 | ✅ 42    |
-| Safari                | ✅ 13    |
-| Internet Explorer     | ❌       |
+| Chrome                | ✅ 55   |
+| Firefox               | ✅ 52   |
+| Edge                  | ✅ 15   |
+| Opera                 | ✅ 42   |
+| Safari                | ✅ 13   |
+| Internet Explorer     | ❌      |
 
 ## <a name="used-by"> Projects using Scriptlets
 

src/scriptlets/trusted-create-element.ts

@@ -5,6 +5,7 @@ import {
     nativeIsNaN,
     parseAttributePairs,
     getErrorMessage,
+    getTrustedTypesApi,
 } from '../helpers';
 import type { ParsedAttributePair } from '../helpers';
 import { type Source } from './scriptlets';
@@ -100,10 +101,17 @@ export function trustedCreateElement(
         logMessage(source, `${prefix} due to ${getErrorMessage(error)}`);
     };
 
+    const trustedTypesApi = getTrustedTypesApi(source);
+
     let element: HTMLElement;
     try {
         element = document.createElement(tagName);
-        element.textContent = textContent;
+        // For script elements, use Trusted Types API
+        if (tagName.toLowerCase() === 'script' && textContent) {
+            element.textContent = trustedTypesApi.createScript(textContent);
+        } else {
+            element.textContent = textContent;
+        }
     } catch (e) {
         logError(`Cannot create element with tag name '${tagName}'`, e);
         return;
@@ -120,7 +128,13 @@ export function trustedCreateElement(
 
     attributes.forEach((attr) => {
         try {
-            element.setAttribute(attr.name, attr.value);
+            // Use Trusted Types API for attributes that require it
+            const trustedValue = trustedTypesApi.convertAttributeToTrusted(
+                tagName,
+                attr.name,
+                attr.value,
+            );
+            element.setAttribute(attr.name, trustedValue);
         } catch (e) {
             logError(`Cannot set attribute '${attr.name}' with value '${attr.value}'`, e);
         }
@@ -206,4 +220,5 @@ trustedCreateElement.injections = [
     nativeIsNaN,
     parseAttributePairs,
     getErrorMessage,
+    getTrustedTypesApi,
 ];

tests/scriptlets/trusted-create-element.test.js

@@ -329,3 +329,91 @@ test('creating iframe', (assert) => {
 
     assert.strictEqual(window.hit, 'FIRED', 'hit fired');
 });
+
+test('creating script element with textContent', (assert) => {
+    const { children } = createRoot(ROOT_ID);
+
+    const childTagName = 'script';
+    const textContent = 'window.scriptTestVar = "trusted-create-element-script";';
+
+    assert.strictEqual(children.length, 0, 'Parent element has no children before scriptlet is run');
+
+    runScriptlet(name, [ROOT_SELECTOR, childTagName, '', textContent]);
+
+    assert.strictEqual(children.length, 1, 'Script element was appended');
+
+    const child = children[0];
+
+    assert.strictEqual(child.tagName.toLowerCase(), childTagName, 'Tag name is set correctly');
+    assert.strictEqual(child.textContent, textContent, 'Text content is set correctly');
+    assert.strictEqual(window.scriptTestVar, 'trusted-create-element-script', 'Script was executed');
+
+    assert.strictEqual(window.hit, 'FIRED', 'hit fired');
+
+    clearGlobalProps('scriptTestVar');
+});
+
+test('creating script element with attributes', (assert) => {
+    const { children } = createRoot(ROOT_ID);
+
+    const childTagName = 'script';
+    const attributesParam = 'type="text/javascript" data-test="value"';
+    const textContent = 'window.scriptTestVar2 = "script-with-attrs";';
+
+    assert.strictEqual(children.length, 0, 'Parent element has no children before scriptlet is run');
+
+    runScriptlet(name, [ROOT_SELECTOR, childTagName, attributesParam, textContent]);
+
+    assert.strictEqual(children.length, 1, 'Script element was appended');
+
+    const child = children[0];
+
+    assert.strictEqual(child.tagName.toLowerCase(), childTagName, 'Tag name is set correctly');
+    assert.strictEqual(child.getAttribute('type'), 'text/javascript', 'Type attribute is set correctly');
+    assert.strictEqual(child.getAttribute('data-test'), 'value', 'Data attribute is set correctly');
+    assert.strictEqual(child.textContent, textContent, 'Text content is set correctly');
+    assert.strictEqual(window.scriptTestVar2, 'script-with-attrs', 'Script was executed');
+
+    assert.strictEqual(window.hit, 'FIRED', 'hit fired');
+
+    clearGlobalProps('scriptTestVar2');
+});
+
+test('trustedTypes.createScript is called for script textContent', (assert) => {
+    if (!window.trustedTypes) {
+        assert.expect(0);
+        return;
+    }
+
+    const { children } = createRoot(ROOT_ID);
+
+    const nativeCreatePolicy = window.trustedTypes.createPolicy.bind(window.trustedTypes);
+    let createScriptCalled = false;
+    let createScriptArg = null;
+
+    window.trustedTypes.createPolicy = (name, rules) => {
+        const wrappedRules = {
+            ...rules,
+            createScript: (input) => {
+                createScriptCalled = true;
+                createScriptArg = input;
+                return rules.createScript ? rules.createScript(input) : input;
+            },
+        };
+        return nativeCreatePolicy(name, wrappedRules);
+    };
+
+    const childTagName = 'script';
+    const textContent = 'window.scriptTestVar3 = "trusted-types-verify";';
+
+    runScriptlet(name, [ROOT_SELECTOR, childTagName, '', textContent]);
+
+    assert.strictEqual(children.length, 1, 'Script element was appended');
+    assert.true(createScriptCalled, 'trustedTypes createScript was called');
+    assert.strictEqual(createScriptArg, textContent, 'createScript was called with correct textContent');
+    assert.strictEqual(window.scriptTestVar3, 'trusted-types-verify', 'Script was executed');
+    assert.strictEqual(window.hit, 'FIRED', 'hit fired');
+
+    window.trustedTypes.createPolicy = nativeCreatePolicy;
+    clearGlobalProps('scriptTestVar3');
+});