From: Evan You <evan@vuejs.org>
Date: Wed, 28 Aug 2024 09:37:39 +0000 (+0800)
Subject: fix(runtime-dom): setting innerHTML when patching props should go through trusted... 
X-Git-Tag: v3.5.0-rc.1~17
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=d875de54e9e03e0768fe550aa4c4886a4baf3bd7;p=thirdparty%2Fvuejs%2Fcore.git

fix(runtime-dom): setting innerHTML when patching props should go through trusted types
---

diff --git a/packages/runtime-dom/src/modules/props.ts b/packages/runtime-dom/src/modules/props.ts
index 7b7b700e04..4dfcee6aee 100644
--- a/packages/runtime-dom/src/modules/props.ts
+++ b/packages/runtime-dom/src/modules/props.ts
@@ -1,9 +1,6 @@
-// __UNSAFE__
-// Reason: potentially setting innerHTML.
-// This can come from explicit usage of v-html or innerHTML as a prop in render
-
 import { DeprecationTypes, compatUtils, warn } from '@vue/runtime-core'
 import { includeBooleanAttr } from '@vue/shared'
+import { unsafeToTrustedHTML } from '../nodeOps'
 
 // functions. The user is responsible for using them with only trusted content.
 export function patchDOMProp(
@@ -12,11 +9,15 @@ export function patchDOMProp(
   value: any,
   parentComponent: any,
 ): void {
+  // __UNSAFE__
+  // Reason: potentially setting innerHTML.
+  // This can come from explicit usage of v-html or innerHTML as a prop in render
   if (key === 'innerHTML' || key === 'textContent') {
     // null value case is handled in renderer patchElement before patching
     // children
-    if (value == null) return
-    el[key] = value
+    if (value != null) {
+      el[key] = key === 'innerHTML' ? unsafeToTrustedHTML(value) : value
+    }
     return
   }
 
diff --git a/packages/runtime-dom/src/nodeOps.ts b/packages/runtime-dom/src/nodeOps.ts
index 8ed70c7d33..d7422bf616 100644
--- a/packages/runtime-dom/src/nodeOps.ts
+++ b/packages/runtime-dom/src/nodeOps.ts
@@ -31,9 +31,8 @@ if (tt) {
 // 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.
-const unsafeToTrustedHTML: (value: string) => TrustedHTML | string = policy
-  ? val => policy.createHTML(val)
-  : val => val
+export 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'