fix(compiler): escape html for safer template output

Copied from https://github.com/vuejs/core/pull/13919/files

Author: zhiyuanzmj

packages/compiler/src/transforms/transformText.ts

@@ -1,3 +1,4 @@
+import { escapeHtml } from '@vue/shared'
 import {
   DynamicFlag,
   IRNodeTypes,
@@ -88,7 +89,7 @@ export const transformText: NodeTransform = (node, context) => {
   } else if (node.type === 'JSXText') {
     const value = resolveJSXText(node)
     if (value) {
-      context.template += value
+      context.template += escapeHtml(value)
     } else {
       context.dynamic.flags |= DynamicFlag.NON_TEMPLATE
     }
@@ -136,7 +137,7 @@ function processTextContainer(children: TextLike[], context: TransformContext) {
   const values = createTextLikeExpressions(children, context)
   const literals = values.map(getLiteralExpressionValue)
   if (literals.every((l) => l != null)) {
-    context.childrenTemplate = literals.map((l) => String(l))
+    context.childrenTemplate = literals.map((l) => escapeHtml(String(l)))
   } else {
     context.childrenTemplate = [' ']
     context.registerOperation({

packages/compiler/src/transforms/vText.ts

@@ -1,5 +1,5 @@
 import { createDOMCompilerError, DOMErrorCodes } from '@vue/compiler-dom'
-import { isVoidTag } from '@vue/shared'
+import { escapeHtml, isVoidTag } from '@vue/shared'
 import { IRNodeTypes } from '../ir'
 import {
   getLiteralExpressionValue,
@@ -35,7 +35,7 @@ export const transformVText: DirectiveTransform = (dir, node, context) => {
 
   const literal = getLiteralExpressionValue(exp)
   if (literal != null) {
-    context.childrenTemplate = [String(literal)]
+    context.childrenTemplate = [escapeHtml(String(literal))]
   } else {
     context.childrenTemplate = [' ']
     context.registerOperation({

packages/compiler/test/transforms/__snapshots__/transformText.spec.ts.snap

@@ -0,0 +1,15 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`compiler: text transform > consecutive text 1`] = `
+"
+  const n0 = _createNodes(() => (msg))
+  return n0
+"
+`;
+
+exports[`compiler: text transform > no consecutive text 1`] = `
+"
+  const n0 = _createNodes("hello world")
+  return n0
+"
+`;

packages/compiler/test/transforms/transformText.spec.ts

@@ -0,0 +1,68 @@
+// TODO: add tests for this transform
+import { NodeTypes } from '@vue/compiler-dom'
+import { describe, expect, it } from 'vitest'
+import {
+  IRNodeTypes,
+  transformChildren,
+  transformElement,
+  transformText,
+  transformVBind,
+  transformVOn,
+} from '../../src'
+
+import { makeCompile } from './_utils'
+
+const compileWithTextTransform = makeCompile({
+  nodeTransforms: [transformElement, transformChildren, transformText],
+  directiveTransforms: {
+    bind: transformVBind,
+    on: transformVOn,
+  },
+})
+
+describe('compiler: text transform', () => {
+  it('no consecutive text', () => {
+    const { code, ir, helpers } = compileWithTextTransform(
+      '<>{ "hello world" }</>',
+    )
+    expect(code).toMatchSnapshot()
+    expect(helpers).contains.all.keys('createNodes')
+    expect(ir.block.operation).toMatchObject([
+      {
+        type: IRNodeTypes.CREATE_NODES,
+        values: [
+          {
+            type: NodeTypes.SIMPLE_EXPRESSION,
+            content: 'hello world',
+            isStatic: true,
+          },
+        ],
+      },
+    ])
+  })
+
+  it('consecutive text', () => {
+    const { code, ir, helpers } = compileWithTextTransform('<>{ msg }</>')
+    expect(code).toMatchSnapshot()
+    expect(helpers).contains.all.keys('createNodes')
+    expect(ir.block.operation).toMatchObject([
+      {
+        type: IRNodeTypes.CREATE_NODES,
+        values: [
+          {
+            type: NodeTypes.SIMPLE_EXPRESSION,
+            content: '() => (msg)',
+            isStatic: false,
+          },
+        ],
+      },
+    ])
+    expect(ir.block.effect.length).toBe(0)
+  })
+
+  it('escapes raw static text when generating the template string', () => {
+    const { ir } = compileWithTextTransform('<code>&lt;script&gt;</code>')
+    expect(ir.templates[0]).toContain('<code>&lt;script&gt;</code>')
+    expect(ir.templates[0]).not.toContain('<code><script></code>')
+  })
+})