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