fix(ssr): fix escape and handling for raw Text, Comment and Static vn…

…odes
vuejs · May 1, 2020 · 5b09e74 · 5b09e74
1 parent 1bddeea
commit 5b09e74
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 3 deletions.
diff --git a/packages/server-renderer/__tests__/renderToString.spec.ts b/packages/server-renderer/__tests__/renderToString.spec.ts
@@ -6,7 +6,9 @@ import {
   resolveComponent,
   ComponentOptions,
   ref,
-  defineComponent
+  defineComponent,
+  createTextVNode,
+  createStaticVNode
 } from 'vue'
 import { escapeHtml, mockWarn } from '@vue/shared'
 import { renderToString, renderComponent } from '../src/renderToString'
@@ -511,6 +513,33 @@ describe('ssr: renderToString', () => {
     })
   })
 
+  describe('raw vnode types', () => {
+    test('Text', async () => {
+      expect(await renderToString(createTextVNode('hello <div>'))).toBe(
+        `hello &lt;div&gt;`
+      )
+    })
+
+    test('Comment', async () => {
+      // https://www.w3.org/TR/html52/syntax.html#comments
+      expect(
+        await renderToString(
+          h('div', [
+            createCommentVNode('>foo'),
+            createCommentVNode('->foo'),
+            createCommentVNode('<!--foo-->'),
+            createCommentVNode('--!>foo<!-')
+          ])
+        )
+      ).toBe(`<div><!--foo--><!--foo--><!--foo--><!--foo--></div>`)
+    })
+
+    test('Static', async () => {
+      const content = `<div id="ok">hello<span>world</span></div>`
+      expect(await renderToString(createStaticVNode(content))).toBe(content)
+    })
+  })
+
   describe('scopeId', () => {
     // note: here we are only testing scopeId handling for vdom serialization.
     // compiled srr render functions will include scopeId directly in strings.

diff --git a/packages/server-renderer/src/renderToString.ts b/packages/server-renderer/src/renderToString.ts
@@ -7,6 +7,7 @@ import {
   createVNode,
   Text,
   Comment,
+  Static,
   Fragment,
   ssrUtils,
   Slots,
@@ -229,6 +230,9 @@ function ssrCompile(
   return (compileCache[template] = Function('require', code)(require))
 }
 
+// https://www.w3.org/TR/html52/syntax.html#comments
+const commentStripRE = /^-?>|<!--|-->|--!>|<!-$/g
+
 function renderVNode(
   push: PushFn,
   vnode: VNode,
@@ -237,10 +241,17 @@ function renderVNode(
   const { type, shapeFlag, children } = vnode
   switch (type) {
     case Text:
-      push(children as string)
+      push(escapeHtml(children as string))
       break
     case Comment:
-      push(children ? `<!--${children}-->` : `<!---->`)
+      push(
+        children
+          ? `<!--${(children as string).replace(commentStripRE, '')}-->`
+          : `<!---->`
+      )
+      break
+    case Static:
+      push(children as string)
       break
     case Fragment:
       push(`<!--[-->`) // open