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

Author: yyx990803

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
   }
 

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'