From 286be0457c65b769664f83b770a616bfa484bf97 Mon Sep 17 00:00:00 2001
From: Haoqun Jiang <haoqunjiang@gmail.com>
Date: Tue, 30 Apr 2024 16:43:12 +0800
Subject: [PATCH 01/15] fix: ensure no trusted types violations on fresh mount

This isn't a complete fix because `innerHTML` assignment also occurs
in `insertStaticContent`. But at least this makes the hello-world app
work with trusted types enabled.

I'm still figuring out how to add test cases for trusted types.

Remaining todos:
- [ ] Add test cases for trusted types.
- [ ] Fix `insertStaticContent` to be compatible with trusted types,
we may need a `vue` policy for that case.
- [ ] Add a note in the docs about trusted types compatibility.
- [ ] Allow trusted values to be passed to `v-html` and other props,
this ultimately fixes https://github.com/vuejs/rfcs/discussions/614
---
 packages/runtime-core/src/compat/global.ts | 2 +-
 packages/runtime-dom/src/index.ts          | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/runtime-core/src/compat/global.ts b/packages/runtime-core/src/compat/global.ts
index 22f7b521396..1ff127f633b 100644
--- a/packages/runtime-core/src/compat/global.ts
+++ b/packages/runtime-core/src/compat/global.ts
@@ -548,7 +548,7 @@ function installCompatMount(
       }
 
       // clear content before mounting
-      container.innerHTML = ''
+      container.replaceChildren()
 
       // TODO hydration
       render(vnode, container, namespace)
diff --git a/packages/runtime-dom/src/index.ts b/packages/runtime-dom/src/index.ts
index ab85720faa8..a4257082929 100644
--- a/packages/runtime-dom/src/index.ts
+++ b/packages/runtime-dom/src/index.ts
@@ -123,7 +123,7 @@ export const createApp = ((...args) => {
     }
 
     // clear content before mounting
-    container.innerHTML = ''
+    container.replaceChildren()
     const proxy = mount(container, false, resolveRootNamespace(container))
     if (container instanceof Element) {
       container.removeAttribute('v-cloak')

From 455861f637aadaa1196063baa5a09fbd2778f50f Mon Sep 17 00:00:00 2001
From: Haoqun Jiang <haoqunjiang@gmail.com>
Date: Sun, 5 May 2024 00:21:05 +0800
Subject: [PATCH 02/15] fix(runtime-dom): use a trusted policy for innerHTML
 assignment in app mounting

Because `replaceChildren` isn't supported in all browsers, we still need
to use `innerHTML` to clear the container before mounting the app.

I left the compat mode implementation in `runtime-core` as is because it
doesn't feel right to use a DOM-only API in `runtime-core`.
---
 packages/runtime-core/src/compat/global.ts |  2 +-
 packages/runtime-dom/package.json          |  5 ++-
 packages/runtime-dom/src/index.ts          |  4 +--
 packages/runtime-dom/src/nodeOps.ts        | 37 ++++++++++++++++++++++
 pnpm-lock.yaml                             |  9 ++++++
 5 files changed, 53 insertions(+), 4 deletions(-)

diff --git a/packages/runtime-core/src/compat/global.ts b/packages/runtime-core/src/compat/global.ts
index 1ff127f633b..22f7b521396 100644
--- a/packages/runtime-core/src/compat/global.ts
+++ b/packages/runtime-core/src/compat/global.ts
@@ -548,7 +548,7 @@ function installCompatMount(
       }
 
       // clear content before mounting
-      container.replaceChildren()
+      container.innerHTML = ''
 
       // TODO hydration
       render(vnode, container, namespace)
diff --git a/packages/runtime-dom/package.json b/packages/runtime-dom/package.json
index 28c2f60f81b..58344486b86 100644
--- a/packages/runtime-dom/package.json
+++ b/packages/runtime-dom/package.json
@@ -49,8 +49,11 @@
   },
   "homepage": "https://github.com/vuejs/core/tree/main/packages/runtime-dom#readme",
   "dependencies": {
-    "@vue/shared": "workspace:*",
     "@vue/runtime-core": "workspace:*",
+    "@vue/shared": "workspace:*",
     "csstype": "^3.1.3"
+  },
+  "devDependencies": {
+    "@types/trusted-types": "^2.0.7"
   }
 }
diff --git a/packages/runtime-dom/src/index.ts b/packages/runtime-dom/src/index.ts
index a4257082929..01648aab1bc 100644
--- a/packages/runtime-dom/src/index.ts
+++ b/packages/runtime-dom/src/index.ts
@@ -15,7 +15,7 @@ import {
   isRuntimeOnly,
   warn,
 } from '@vue/runtime-core'
-import { nodeOps } from './nodeOps'
+import { nodeOps, unsafeToTrustedHTML } from './nodeOps'
 import { patchProp } from './patchProp'
 // Importing from the compiler, will be tree-shaken in prod
 import {
@@ -123,7 +123,7 @@ export const createApp = ((...args) => {
     }
 
     // clear content before mounting
-    container.replaceChildren()
+    container.innerHTML = unsafeToTrustedHTML('') as string
     const proxy = mount(container, false, resolveRootNamespace(container))
     if (container instanceof Element) {
       container.removeAttribute('v-cloak')
diff --git a/packages/runtime-dom/src/nodeOps.ts b/packages/runtime-dom/src/nodeOps.ts
index a318000aa91..4aab75364b5 100644
--- a/packages/runtime-dom/src/nodeOps.ts
+++ b/packages/runtime-dom/src/nodeOps.ts
@@ -1,4 +1,41 @@
+import { warn } from '@vue/runtime-core'
 import type { RendererOptions } from '@vue/runtime-core'
+import type {
+  TrustedHTML,
+  TrustedTypePolicy,
+  TrustedTypesWindow,
+} from 'trusted-types/lib'
+
+let policy: TrustedTypePolicy | undefined = undefined
+function getPolicy(): TrustedTypePolicy | undefined {
+  const ttWindow = window as unknown as TrustedTypesWindow
+  if (ttWindow.trustedTypes && !policy) {
+    try {
+      policy = ttWindow.trustedTypes.createPolicy('vue', {
+        createHTML: val => val,
+        createScript: val => val,
+        createScriptURL: val => val,
+      })
+    } catch (e: unknown) {
+      // `createPolicy` throws a TypeError if the name is a duplicate
+      // and the CSP trusted-types directive is not using `allow-duplicates`.
+      // So we have to catch that error.
+      warn(`Error creating trusted types policy: ${e}`)
+    }
+  }
+  return policy
+}
+
+// __UNSAFE__
+// Reason: potentially setting innerHTML.
+// This function merely perform a type-level trusted type conversion
+// for use in `innerHTML` assignment, etc.
+// Be careful of whatever value passed to this function.
+function unsafeToTrustedHTML(value: string): TrustedHTML | string {
+  return getPolicy()?.createHTML(value) || value
+}
+
+export { getPolicy, unsafeToTrustedHTML }
 
 export const svgNS = 'http://www.w3.org/2000/svg'
 export const mathmlNS = 'http://www.w3.org/1998/Math/MathML'
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index db9ebbdc939..976100dcdf2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -316,6 +316,10 @@ importers:
       csstype:
         specifier: ^3.1.3
         version: 3.1.3
+    devDependencies:
+      '@types/trusted-types':
+        specifier: ^2.0.7
+        version: 2.0.7
 
   packages/runtime-test:
     dependencies:
@@ -1149,6 +1153,9 @@ packages:
   '@types/semver@7.5.8':
     resolution: {integrity: sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==}
 
+  '@types/trusted-types@2.0.7':
+    resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
+
   '@types/yauzl@2.10.3':
     resolution: {integrity: sha512-oJoftv0LSuaDZE3Le4DbKX+KS9G36NzOeSap90UIK0yMA/NhKJhqlSGtNDORNRaIbQfzjXDrQa0ytJ6mNRGz/Q==}
 
@@ -4179,6 +4186,8 @@ snapshots:
 
   '@types/semver@7.5.8': {}
 
+  '@types/trusted-types@2.0.7': {}
+
   '@types/yauzl@2.10.3':
     dependencies:
       '@types/node': 20.12.12

From 3ef9b8c7b27fc807b130e4fca86bf4773170e62f Mon Sep 17 00:00:00 2001
From: Haoqun Jiang <haoqunjiang@gmail.com>
Date: Sun, 5 May 2024 00:45:16 +0800
Subject: [PATCH 03/15] fix: trusted types compat for `insertStaticContent`

It seems that the only source of the `content` is the output of
`stringifyStatic` in `compiler-dom`. I guess no additional check is
needed here.
---
 packages/runtime-dom/src/nodeOps.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/runtime-dom/src/nodeOps.ts b/packages/runtime-dom/src/nodeOps.ts
index 4aab75364b5..dea6ed6dc28 100644
--- a/packages/runtime-dom/src/nodeOps.ts
+++ b/packages/runtime-dom/src/nodeOps.ts
@@ -111,12 +111,13 @@ export const nodeOps: Omit<RendererOptions<Node, Element>, 'patchProp'> = {
       }
     } else {
       // fresh insert
-      templateContainer.innerHTML =
+      templateContainer.innerHTML = unsafeToTrustedHTML(
         namespace === 'svg'
           ? `<svg>${content}</svg>`
           : namespace === 'mathml'
             ? `<math>${content}</math>`
-            : content
+            : content,
+      ) as string
 
       const template = templateContainer.content
       if (namespace === 'svg' || namespace === 'mathml') {

From f85347946a325b784cb6cd4067801ca9448d0c48 Mon Sep 17 00:00:00 2001
From: Haoqun Jiang <haoqunjiang@gmail.com>
Date: Mon, 6 May 2024 15:24:31 +0800
Subject: [PATCH 04/15] test: add e2e tests for trusted types compatibility

---
 package.json                                  |  2 +
 packages/vue/__tests__/e2e/trusted-types.html | 17 ++++
 .../vue/__tests__/e2e/trusted-types.spec.ts   | 87 +++++++++++++++++++
 pnpm-lock.yaml                                | 13 +++
 4 files changed, 119 insertions(+)
 create mode 100644 packages/vue/__tests__/e2e/trusted-types.html
 create mode 100644 packages/vue/__tests__/e2e/trusted-types.spec.ts

diff --git a/package.json b/package.json
index d454391c703..2ec9e8a9e39 100644
--- a/package.json
+++ b/package.json
@@ -72,6 +72,7 @@
     "@types/minimist": "^1.2.5",
     "@types/node": "^20.12.12",
     "@types/semver": "^7.5.8",
+    "@types/serve-handler": "^6.1.4",
     "@vitest/coverage-istanbul": "^1.5.2",
     "@vue/consolidate": "1.0.0",
     "conventional-changelog-cli": "^4.1.0",
@@ -103,6 +104,7 @@
     "rollup-plugin-polyfill-node": "^0.13.0",
     "semver": "^7.6.2",
     "serve": "^14.2.3",
+    "serve-handler": "^6.1.5",
     "simple-git-hooks": "^2.11.1",
     "terser": "^5.31.0",
     "todomvc-app-css": "^2.4.3",
diff --git a/packages/vue/__tests__/e2e/trusted-types.html b/packages/vue/__tests__/e2e/trusted-types.html
new file mode 100644
index 00000000000..a5743a63090
--- /dev/null
+++ b/packages/vue/__tests__/e2e/trusted-types.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="data:;base64,iVBORw0KGgo=">
+    <meta
+      http-equiv="content-security-policy"
+      content="require-trusted-types-for 'script'"
+    />
+    <title>Vue App</title>
+    <script src="../../dist/vue.global.js"></script>
+  </head>
+
+  <body>
+    <div id="app"></div>
+  </body>
+</html>
diff --git a/packages/vue/__tests__/e2e/trusted-types.spec.ts b/packages/vue/__tests__/e2e/trusted-types.spec.ts
new file mode 100644
index 00000000000..3afa470c491
--- /dev/null
+++ b/packages/vue/__tests__/e2e/trusted-types.spec.ts
@@ -0,0 +1,87 @@
+import { once } from 'node:events'
+import { createServer } from 'node:http'
+import path from 'node:path'
+import { beforeAll } from 'vitest'
+import serveHandler from 'serve-handler'
+
+import { E2E_TIMEOUT, setupPuppeteer } from './e2eUtils'
+
+// use the `vue` package root as the public directory
+// because we need to serve the Vue runtime for the tests
+const serverRoot = path.resolve(import.meta.dirname, '../../')
+const testPort = 9090
+const basePath = path.relative(
+  serverRoot,
+  path.resolve(import.meta.dirname, './trusted-types.html'),
+)
+const baseUrl = `http://localhost:${testPort}/${basePath}`
+
+const { page, html } = setupPuppeteer()
+
+let server: ReturnType<typeof createServer>
+beforeAll(async () => {
+  // sets up the static server
+  server = createServer((req, res) => {
+    return serveHandler(req, res, {
+      public: serverRoot,
+      cleanUrls: false,
+    })
+  })
+
+  server.listen(testPort)
+  await once(server, 'listening')
+})
+
+afterAll(async () => {
+  server.close()
+  await once(server, 'close')
+})
+
+describe('e2e: trusted types', () => {
+  beforeEach(async () => {
+    await page().goto(baseUrl)
+    await page().waitForSelector('#app')
+  })
+
+  test(
+    'hello world app',
+    async () => {
+      await page().evaluate(() => {
+        const { createApp, ref, h } = (window as any).Vue
+        createApp({
+          setup() {
+            const msg = ref('✅success: hello world')
+            return function render() {
+              return h('div', msg.value)
+            }
+          },
+        }).mount('#app')
+      })
+      expect(await html('#app')).toContain('<div>✅success: hello world</div>')
+    },
+    E2E_TIMEOUT,
+  )
+
+  test(
+    'static vnode',
+    async () => {
+      await page().evaluate(() => {
+        const { createApp, createStaticVNode } = (window as any).Vue
+        createApp({
+          render() {
+            return createStaticVNode('<div>✅success: static vnode</div>')
+          },
+        }).mount('#app')
+      })
+      expect(await html('#app')).toContain('<div>✅success: static vnode</div>')
+    },
+    E2E_TIMEOUT,
+  )
+
+  test.todo('v-html with custom policy')
+  test.todo(
+    'other sensitive props (<iframe srcdoc> <embed src>, <object data>, and <object codebase>) with custom policy',
+  )
+
+  test.todo('hydration? I am not sure if it is necessary')
+})
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 976100dcdf2..3ff7bdeee14 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -47,6 +47,9 @@ importers:
       '@types/semver':
         specifier: ^7.5.8
         version: 7.5.8
+      '@types/serve-handler':
+        specifier: ^6.1.4
+        version: 6.1.4
       '@vitest/coverage-istanbul':
         specifier: ^1.5.2
         version: 1.5.2(vitest@1.5.2(@types/node@20.12.12)(jsdom@24.0.0)(sass@1.77.2)(terser@5.31.0))
@@ -140,6 +143,9 @@ importers:
       serve:
         specifier: ^14.2.3
         version: 14.2.3
+      serve-handler:
+        specifier: ^6.1.5
+        version: 6.1.5
       simple-git-hooks:
         specifier: ^2.11.1
         version: 2.11.1
@@ -1153,6 +1159,9 @@ packages:
   '@types/semver@7.5.8':
     resolution: {integrity: sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==}
 
+  '@types/serve-handler@6.1.4':
+    resolution: {integrity: sha512-aXy58tNie0NkuSCY291xUxl0X+kGYy986l4kqW6Gi4kEXgr6Tx0fpSH7YwUSa5usPpG3s9DBeIR6hHcDtL2IvQ==}
+
   '@types/trusted-types@2.0.7':
     resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
 
@@ -4186,6 +4195,10 @@ snapshots:
 
   '@types/semver@7.5.8': {}
 
+  '@types/serve-handler@6.1.4':
+    dependencies:
+      '@types/node': 20.12.7
+
   '@types/trusted-types@2.0.7': {}
 
   '@types/yauzl@2.10.3':

From e4b0b421d1090669cb6bb22ea63652b462ec8ee6 Mon Sep 17 00:00:00 2001
From: Haoqun Jiang <haoqunjiang@gmail.com>
Date: Tue, 7 May 2024 00:44:50 +0800
Subject: [PATCH 05/15] test: add v-html test for trusted types

---
 .../vue/__tests__/e2e/trusted-types.spec.ts   | 30 ++++++++++++++-----
 1 file changed, 23 insertions(+), 7 deletions(-)

diff --git a/packages/vue/__tests__/e2e/trusted-types.spec.ts b/packages/vue/__tests__/e2e/trusted-types.spec.ts
index 3afa470c491..927f5949254 100644
--- a/packages/vue/__tests__/e2e/trusted-types.spec.ts
+++ b/packages/vue/__tests__/e2e/trusted-types.spec.ts
@@ -44,7 +44,7 @@ describe('e2e: trusted types', () => {
   })
 
   test(
-    'hello world app',
+    'should render the hello world app',
     async () => {
       await page().evaluate(() => {
         const { createApp, ref, h } = (window as any).Vue
@@ -63,7 +63,7 @@ describe('e2e: trusted types', () => {
   )
 
   test(
-    'static vnode',
+    'should render static vnode without error',
     async () => {
       await page().evaluate(() => {
         const { createApp, createStaticVNode } = (window as any).Vue
@@ -78,10 +78,26 @@ describe('e2e: trusted types', () => {
     E2E_TIMEOUT,
   )
 
-  test.todo('v-html with custom policy')
-  test.todo(
-    'other sensitive props (<iframe srcdoc> <embed src>, <object data>, and <object codebase>) with custom policy',
-  )
+  test(
+    'should accept v-html with custom policy',
+    async () => {
+      await page().evaluate(() => {
+        const testPolicy = (window as any).trustedTypes.createPolicy('test', {
+          createHTML: (input: string): string => input,
+        })
 
-  test.todo('hydration? I am not sure if it is necessary')
+        const { createApp, ref, h } = (window as any).Vue
+        createApp({
+          setup() {
+            const msg = ref('✅success: v-html')
+            return function render() {
+              return h('div', { innerHTML: testPolicy.createHTML(msg.value) })
+            }
+          },
+        }).mount('#app')
+      })
+      expect(await html('#app')).toContain('<div>✅success: v-html</div>')
+    },
+    E2E_TIMEOUT,
+  )
 })

From 0dc028e0267ee859d344e8b93830bbbab7d213e0 Mon Sep 17 00:00:00 2001
From: Haoqun Jiang <haoqunjiang@gmail.com>
Date: Tue, 7 May 2024 00:51:15 +0800
Subject: [PATCH 06/15] fix: use textContent instead of innerHTML for clearing
 container

Setting `textContent` to empty string is the equivalent of setting
`innerHTML` to empty string, but it doesn't trigger trusted types policy
violation.

Though maybe not as clear and performant as `trustedTypes.emptyHTML`,
the code is more succint considering that we don't need to check for the
existence of `trustedTypes` before using it.
---
 packages/runtime-core/src/compat/global.ts | 2 +-
 packages/runtime-dom/src/index.ts          | 4 ++--
 packages/runtime-dom/src/nodeOps.ts        | 2 --
 3 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/packages/runtime-core/src/compat/global.ts b/packages/runtime-core/src/compat/global.ts
index 22f7b521396..c395619d0cb 100644
--- a/packages/runtime-core/src/compat/global.ts
+++ b/packages/runtime-core/src/compat/global.ts
@@ -548,7 +548,7 @@ function installCompatMount(
       }
 
       // clear content before mounting
-      container.innerHTML = ''
+      container.textContent = ''
 
       // TODO hydration
       render(vnode, container, namespace)
diff --git a/packages/runtime-dom/src/index.ts b/packages/runtime-dom/src/index.ts
index 01648aab1bc..989a5fd3b80 100644
--- a/packages/runtime-dom/src/index.ts
+++ b/packages/runtime-dom/src/index.ts
@@ -15,7 +15,7 @@ import {
   isRuntimeOnly,
   warn,
 } from '@vue/runtime-core'
-import { nodeOps, unsafeToTrustedHTML } from './nodeOps'
+import { nodeOps } from './nodeOps'
 import { patchProp } from './patchProp'
 // Importing from the compiler, will be tree-shaken in prod
 import {
@@ -123,7 +123,7 @@ export const createApp = ((...args) => {
     }
 
     // clear content before mounting
-    container.innerHTML = unsafeToTrustedHTML('') as string
+    container.textContent = ''
     const proxy = mount(container, false, resolveRootNamespace(container))
     if (container instanceof Element) {
       container.removeAttribute('v-cloak')
diff --git a/packages/runtime-dom/src/nodeOps.ts b/packages/runtime-dom/src/nodeOps.ts
index dea6ed6dc28..d1f7ad42c91 100644
--- a/packages/runtime-dom/src/nodeOps.ts
+++ b/packages/runtime-dom/src/nodeOps.ts
@@ -35,8 +35,6 @@ function unsafeToTrustedHTML(value: string): TrustedHTML | string {
   return getPolicy()?.createHTML(value) || value
 }
 
-export { getPolicy, unsafeToTrustedHTML }
-
 export const svgNS = 'http://www.w3.org/2000/svg'
 export const mathmlNS = 'http://www.w3.org/1998/Math/MathML'
 

From cc5cd3ccbed8e483cb5fd084f0b21ddc7c498c8a Mon Sep 17 00:00:00 2001
From: Haoqun Jiang <haoqunjiang@gmail.com>
Date: Wed, 8 May 2024 00:23:40 +0800
Subject: [PATCH 07/15] refactor: skip unused `createScript` and
 `createScriptURL`

---
 packages/runtime-dom/src/nodeOps.ts | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/runtime-dom/src/nodeOps.ts b/packages/runtime-dom/src/nodeOps.ts
index d1f7ad42c91..e12870b59c9 100644
--- a/packages/runtime-dom/src/nodeOps.ts
+++ b/packages/runtime-dom/src/nodeOps.ts
@@ -6,15 +6,17 @@ import type {
   TrustedTypesWindow,
 } from 'trusted-types/lib'
 
-let policy: TrustedTypePolicy | undefined = undefined
-function getPolicy(): TrustedTypePolicy | undefined {
+type VueTrustedTypePolicy =
+  | Pick<TrustedTypePolicy, 'name' | 'createHTML'>
+  | undefined
+
+let policy: VueTrustedTypePolicy = undefined
+function getPolicy(): VueTrustedTypePolicy {
   const ttWindow = window as unknown as TrustedTypesWindow
   if (ttWindow.trustedTypes && !policy) {
     try {
       policy = ttWindow.trustedTypes.createPolicy('vue', {
         createHTML: val => val,
-        createScript: val => val,
-        createScriptURL: val => val,
       })
     } catch (e: unknown) {
       // `createPolicy` throws a TypeError if the name is a duplicate

From e9f8419c9aa2b98c786e92de711f32755000d153 Mon Sep 17 00:00:00 2001
From: Haoqun Jiang <haoqunjiang@gmail.com>
Date: Wed, 8 May 2024 15:24:49 +0800
Subject: [PATCH 08/15] feat: add a feature flag to turn on trusted types
 policy creation, and default to false

---
 packages/global.d.ts                | 1 +
 packages/runtime-dom/src/nodeOps.ts | 6 +++++-
 rollup.config.js                    | 3 +++
 scripts/dev.js                      | 1 +
 vitest.config.ts                    | 1 +
 5 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/global.d.ts b/packages/global.d.ts
index 38320b81e04..5d8e2db1127 100644
--- a/packages/global.d.ts
+++ b/packages/global.d.ts
@@ -18,6 +18,7 @@ declare var __FEATURE_OPTIONS_API__: boolean
 declare var __FEATURE_PROD_DEVTOOLS__: boolean
 declare var __FEATURE_SUSPENSE__: boolean
 declare var __FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__: boolean
+declare var __FEATURE_PROD_TRUSTED_TYPES__: boolean
 
 // for tests
 declare namespace jest {
diff --git a/packages/runtime-dom/src/nodeOps.ts b/packages/runtime-dom/src/nodeOps.ts
index e12870b59c9..ead05b76eee 100644
--- a/packages/runtime-dom/src/nodeOps.ts
+++ b/packages/runtime-dom/src/nodeOps.ts
@@ -13,7 +13,11 @@ type VueTrustedTypePolicy =
 let policy: VueTrustedTypePolicy = undefined
 function getPolicy(): VueTrustedTypePolicy {
   const ttWindow = window as unknown as TrustedTypesWindow
-  if (ttWindow.trustedTypes && !policy) {
+  if (
+    (__DEV__ || __FEATURE_PROD_TRUSTED_TYPES__) &&
+    ttWindow.trustedTypes &&
+    !policy
+  ) {
     try {
       policy = ttWindow.trustedTypes.createPolicy('vue', {
         createHTML: val => val,
diff --git a/rollup.config.js b/rollup.config.js
index e8d5984184d..dc25ffd7e86 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -192,6 +192,9 @@ function createConfig(format, output, plugins = []) {
       __FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__: isBundlerESMBuild
         ? `__VUE_PROD_HYDRATION_MISMATCH_DETAILS__`
         : `false`,
+      __FEATURE_PROD_TRUSTED_TYPES__: isBundlerESMBuild
+        ? `__VUE_PROD_TRUSTED_TYPES__`
+        : `false`,
     }
 
     if (!isBundlerESMBuild) {
diff --git a/scripts/dev.js b/scripts/dev.js
index 7db79442ee9..3fbce1aa428 100644
--- a/scripts/dev.js
+++ b/scripts/dev.js
@@ -127,6 +127,7 @@ for (const target of targets) {
         __FEATURE_OPTIONS_API__: `true`,
         __FEATURE_PROD_DEVTOOLS__: `false`,
         __FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__: `false`,
+        __FEATURE_PROD_TRUSTED_TYPES__: `false`,
       },
     })
     .then(ctx => ctx.watch())
diff --git a/vitest.config.ts b/vitest.config.ts
index ae14f3fb76e..96c8b97201b 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -17,6 +17,7 @@ export default defineConfig({
     __FEATURE_SUSPENSE__: true,
     __FEATURE_PROD_DEVTOOLS__: false,
     __FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__: false,
+    __FEATURE_PROD_TRUSTED_TYPES__: false,
     __COMPAT__: true,
   },
   resolve: {

From a608074e43e2c02213d45740082a2e4006699162 Mon Sep 17 00:00:00 2001
From: Haoqun Jiang <haoqunjiang@gmail.com>
Date: Wed, 8 May 2024 15:36:02 +0800
Subject: [PATCH 09/15] docs: add documentation about the
 __VUE_PROD_TRUSTED_TYPES__ flag

---
 packages/runtime-core/src/featureFlags.ts | 5 +++++
 packages/vue/README.md                    | 4 ++++
 2 files changed, 9 insertions(+)

diff --git a/packages/runtime-core/src/featureFlags.ts b/packages/runtime-core/src/featureFlags.ts
index 6dd136277bd..34deb0a3006 100644
--- a/packages/runtime-core/src/featureFlags.ts
+++ b/packages/runtime-core/src/featureFlags.ts
@@ -25,6 +25,11 @@ export function initFeatureFlags() {
     getGlobalThis().__VUE_PROD_HYDRATION_MISMATCH_DETAILS__ = false
   }
 
+  if (typeof __FEATURE_PROD_TRUSTED_TYPES__ !== 'boolean') {
+    __DEV__ && needWarn.push(`__VUE_PROD_TRUSTED_TYPES__`)
+    getGlobalThis().__VUE_PROD_TRUSTED_TYPES__ = false
+  }
+
   if (__DEV__ && needWarn.length) {
     const multi = needWarn.length > 1
     console.warn(
diff --git a/packages/vue/README.md b/packages/vue/README.md
index 2aca524e03d..364201a219c 100644
--- a/packages/vue/README.md
+++ b/packages/vue/README.md
@@ -49,6 +49,10 @@
   - Default: `false`
   - Enable / disable detailed warnings for hydration mismatches in production
 
+- `__VUE_PROD_TRUSTED_TYPES__`
+  - Default: `false`
+  - Enable / disable built-in Trusted Types Policy for compatibility with the [`trusted-types` CSP directive](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/trusted-types)
+
 The build will work without configuring these flags, however it is **strongly recommended** to properly configure them in order to get proper tree-shaking in the final bundle.
 
 ### For Server-Side Rendering

From 60e5471bc0c1ad6fcd564e69539850c31ce69986 Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Thu, 30 May 2024 11:30:00 +0800
Subject: [PATCH 10/15] chore: fix lockfile mismatch

---
 pnpm-lock.yaml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3ff7bdeee14..05b47f6620e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -4197,7 +4197,7 @@ snapshots:
 
   '@types/serve-handler@6.1.4':
     dependencies:
-      '@types/node': 20.12.7
+      '@types/node': 20.12.12
 
   '@types/trusted-types@2.0.7': {}
 

From bef7c83289a0f8c41a0a76836a711cfe3267866b Mon Sep 17 00:00:00 2001
From: Haoqun Jiang <haoqunjiang@gmail.com>
Date: Fri, 31 May 2024 18:26:43 +0800
Subject: [PATCH 11/15] chore: fix lint error

---
 packages/runtime-dom/src/nodeOps.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/runtime-dom/src/nodeOps.ts b/packages/runtime-dom/src/nodeOps.ts
index ead05b76eee..5b278470c8a 100644
--- a/packages/runtime-dom/src/nodeOps.ts
+++ b/packages/runtime-dom/src/nodeOps.ts
@@ -38,6 +38,9 @@ function getPolicy(): VueTrustedTypePolicy {
 // for use in `innerHTML` assignment, etc.
 // Be careful of whatever value passed to this function.
 function unsafeToTrustedHTML(value: string): TrustedHTML | string {
+  /* eslint-disable-next-line no-restricted-syntax --
+   * the minified compilation result of a single `()?.` isn't very verbose,
+   * we use the syntax for readability here. */
   return getPolicy()?.createHTML(value) || value
 }
 

From d97b541762d16a62b63014eb08e5a376880dd714 Mon Sep 17 00:00:00 2001
From: Evan You <evan@vuejs.org>
Date: Fri, 2 Aug 2024 11:59:41 +0800
Subject: [PATCH 12/15] chore: fix broken lockfile

---
 pnpm-lock.yaml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2fd7142c804..f1f5881b22f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -4222,7 +4222,7 @@ snapshots:
 
   '@types/serve-handler@6.1.4':
     dependencies:
-      '@types/node': 20.12.12
+      '@types/node': 20.14.13
 
   '@types/trusted-types@2.0.7': {}
 

From 6950fb5dfd900f86a270a1ba0dca129001990b0e Mon Sep 17 00:00:00 2001
From: Evan You <evan@vuejs.org>
Date: Fri, 2 Aug 2024 12:12:28 +0800
Subject: [PATCH 13/15] chore: make warning dev only

---
 packages/runtime-dom/src/nodeOps.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/runtime-dom/src/nodeOps.ts b/packages/runtime-dom/src/nodeOps.ts
index 84eb24a134a..ac624f5efda 100644
--- a/packages/runtime-dom/src/nodeOps.ts
+++ b/packages/runtime-dom/src/nodeOps.ts
@@ -26,7 +26,7 @@ function getPolicy(): VueTrustedTypePolicy {
       // `createPolicy` throws a TypeError if the name is a duplicate
       // and the CSP trusted-types directive is not using `allow-duplicates`.
       // So we have to catch that error.
-      warn(`Error creating trusted types policy: ${e}`)
+      __DEV__ && warn(`Error creating trusted types policy: ${e}`)
     }
   }
   return policy

From da0c8eb95fd6c0a9f6829f7f624565f26b927da6 Mon Sep 17 00:00:00 2001
From: Evan You <evan@vuejs.org>
Date: Fri, 2 Aug 2024 12:31:25 +0800
Subject: [PATCH 14/15] refactor: always enable trustedtypes policy if possible

---
 packages/global.d.ts                      |  1 -
 packages/runtime-core/src/featureFlags.ts |  5 ---
 packages/runtime-dom/src/nodeOps.ts       | 46 +++++++++--------------
 packages/vue/README.md                    |  4 --
 rollup.config.js                          |  3 --
 scripts/dev.js                            |  3 +-
 vitest.config.ts                          |  1 -
 7 files changed, 18 insertions(+), 45 deletions(-)

diff --git a/packages/global.d.ts b/packages/global.d.ts
index 4226648beed..79b55171384 100644
--- a/packages/global.d.ts
+++ b/packages/global.d.ts
@@ -18,7 +18,6 @@ declare var __FEATURE_OPTIONS_API__: boolean
 declare var __FEATURE_PROD_DEVTOOLS__: boolean
 declare var __FEATURE_SUSPENSE__: boolean
 declare var __FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__: boolean
-declare var __FEATURE_PROD_TRUSTED_TYPES__: boolean
 
 declare module '*.vue' {}
 
diff --git a/packages/runtime-core/src/featureFlags.ts b/packages/runtime-core/src/featureFlags.ts
index 34deb0a3006..6dd136277bd 100644
--- a/packages/runtime-core/src/featureFlags.ts
+++ b/packages/runtime-core/src/featureFlags.ts
@@ -25,11 +25,6 @@ export function initFeatureFlags() {
     getGlobalThis().__VUE_PROD_HYDRATION_MISMATCH_DETAILS__ = false
   }
 
-  if (typeof __FEATURE_PROD_TRUSTED_TYPES__ !== 'boolean') {
-    __DEV__ && needWarn.push(`__VUE_PROD_TRUSTED_TYPES__`)
-    getGlobalThis().__VUE_PROD_TRUSTED_TYPES__ = false
-  }
-
   if (__DEV__ && needWarn.length) {
     const multi = needWarn.length > 1
     console.warn(
diff --git a/packages/runtime-dom/src/nodeOps.ts b/packages/runtime-dom/src/nodeOps.ts
index ac624f5efda..1fbcf483420 100644
--- a/packages/runtime-dom/src/nodeOps.ts
+++ b/packages/runtime-dom/src/nodeOps.ts
@@ -6,30 +6,21 @@ import type {
   TrustedTypesWindow,
 } from 'trusted-types/lib'
 
-type VueTrustedTypePolicy =
-  | Pick<TrustedTypePolicy, 'name' | 'createHTML'>
-  | undefined
-
-let policy: VueTrustedTypePolicy = undefined
-function getPolicy(): VueTrustedTypePolicy {
-  const ttWindow = window as unknown as TrustedTypesWindow
-  if (
-    (__DEV__ || __FEATURE_PROD_TRUSTED_TYPES__) &&
-    ttWindow.trustedTypes &&
-    !policy
-  ) {
-    try {
-      policy = ttWindow.trustedTypes.createPolicy('vue', {
-        createHTML: val => val,
-      })
-    } catch (e: unknown) {
-      // `createPolicy` throws a TypeError if the name is a duplicate
-      // and the CSP trusted-types directive is not using `allow-duplicates`.
-      // So we have to catch that error.
-      __DEV__ && warn(`Error creating trusted types policy: ${e}`)
-    }
+let policy: Pick<TrustedTypePolicy, 'name' | 'createHTML'> | undefined =
+  undefined
+
+const tt = (window as unknown as TrustedTypesWindow).trustedTypes
+if (tt) {
+  try {
+    policy = /*#__PURE__*/ tt.createPolicy('vue', {
+      createHTML: val => val,
+    })
+  } catch (e: unknown) {
+    // `createPolicy` throws a TypeError if the name is a duplicate
+    // and the CSP trusted-types directive is not using `allow-duplicates`.
+    // So we have to catch that error.
+    __DEV__ && warn(`Error creating trusted types policy: ${e}`)
   }
-  return policy
 }
 
 // __UNSAFE__
@@ -37,12 +28,9 @@ function getPolicy(): VueTrustedTypePolicy {
 // This function merely perform a type-level trusted type conversion
 // for use in `innerHTML` assignment, etc.
 // Be careful of whatever value passed to this function.
-function unsafeToTrustedHTML(value: string): TrustedHTML | string {
-  /* eslint-disable-next-line no-restricted-syntax --
-   * the minified compilation result of a single `()?.` isn't very verbose,
-   * we use the syntax for readability here. */
-  return getPolicy()?.createHTML(value) || value
-}
+const unsafeToTrustedHTML: (value: string) => TrustedHTML | string = policy
+  ? val => policy.createHTML(val)
+  : val => val
 
 export const svgNS = 'http://www.w3.org/2000/svg'
 export const mathmlNS = 'http://www.w3.org/1998/Math/MathML'
diff --git a/packages/vue/README.md b/packages/vue/README.md
index 3b3912948fa..ae9eb402a51 100644
--- a/packages/vue/README.md
+++ b/packages/vue/README.md
@@ -49,10 +49,6 @@
   - Default: `false`
   - Enable / disable detailed warnings for hydration mismatches in production
 
-- `__VUE_PROD_TRUSTED_TYPES__`
-  - Default: `false`
-  - Enable / disable built-in Trusted Types Policy for compatibility with the [`trusted-types` CSP directive](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/trusted-types)
-
 The build will work without configuring these flags, however it is **strongly recommended** to properly configure them in order to get proper tree-shaking in the final bundle.
 
 ### For Server-Side Rendering
diff --git a/rollup.config.js b/rollup.config.js
index 66fd7e5da26..b780881690d 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -192,9 +192,6 @@ function createConfig(format, output, plugins = []) {
       __FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__: isBundlerESMBuild
         ? `__VUE_PROD_HYDRATION_MISMATCH_DETAILS__`
         : `false`,
-      __FEATURE_PROD_TRUSTED_TYPES__: isBundlerESMBuild
-        ? `__VUE_PROD_TRUSTED_TYPES__`
-        : `false`,
     }
 
     if (!isBundlerESMBuild) {
diff --git a/scripts/dev.js b/scripts/dev.js
index d2f2b093073..f1128095620 100644
--- a/scripts/dev.js
+++ b/scripts/dev.js
@@ -147,9 +147,8 @@ for (const target of targets) {
         __COMPAT__: String(target === 'vue-compat'),
         __FEATURE_SUSPENSE__: `true`,
         __FEATURE_OPTIONS_API__: `true`,
-        __FEATURE_PROD_DEVTOOLS__: `true`,
+        __FEATURE_PROD_DEVTOOLS__: `false`,
         __FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__: `true`,
-        __FEATURE_PROD_TRUSTED_TYPES__: `true`,
       },
     })
     .then(ctx => ctx.watch())
diff --git a/vitest.config.ts b/vitest.config.ts
index 74f07686c24..f63328ab480 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -16,7 +16,6 @@ export default defineConfig({
     __FEATURE_SUSPENSE__: true,
     __FEATURE_PROD_DEVTOOLS__: false,
     __FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__: false,
-    __FEATURE_PROD_TRUSTED_TYPES__: false,
     __COMPAT__: true,
   },
   resolve: {

From 1dbec32064a435b5e55078a99763f67fcfcc1209 Mon Sep 17 00:00:00 2001
From: Evan You <evan@vuejs.org>
Date: Fri, 2 Aug 2024 12:38:00 +0800
Subject: [PATCH 15/15] chore: fix window access

---
 packages/runtime-dom/src/nodeOps.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/runtime-dom/src/nodeOps.ts b/packages/runtime-dom/src/nodeOps.ts
index 1fbcf483420..8ed70c7d330 100644
--- a/packages/runtime-dom/src/nodeOps.ts
+++ b/packages/runtime-dom/src/nodeOps.ts
@@ -9,7 +9,10 @@ import type {
 let policy: Pick<TrustedTypePolicy, 'name' | 'createHTML'> | undefined =
   undefined
 
-const tt = (window as unknown as TrustedTypesWindow).trustedTypes
+const tt =
+  typeof window !== 'undefined' &&
+  (window as unknown as TrustedTypesWindow).trustedTypes
+
 if (tt) {
   try {
     policy = /*#__PURE__*/ tt.createPolicy('vue', {