vue-template-compiler double-escaping newlines in _ssrNode text string templates

[felixbuenemann]

Version

2.5.9

Reproduction link

https://gist.github.com/2b3c1a683b334022c626917b0abb2adc

(I used a Gist, because ssrCompile is not exposed by the globals build of Vue.)

Steps to reproduce

compiler = require('vue-template-compiler')
template = "<div id=\"foo,\nbar\">\n<textarea id=\"foo,\nbar\">foo\nbar</textarea>\n</div>"
result = compiler.ssrCompile(template)
console.log(result.render)
// output: with(this){return _c('div',{attrs:{"id":"foo,\nbar"}},[_ssrNode("<textarea id=\"foo,\\nbar\">foo\nbar</textarea>")])}

What is expected?

vue-template-compiler should not double-escape newlines in attributes for _ssrNode string templates.

What is actually happening?

vue-template-compiler double-escapes newlines in attributes of _ssrNodes.

---

If you look at the output from the reproduction steps, you will see that the newline character '\n' is only double escaped, if it is part of an attribute in an ssrNode, if is nor optimized to a string template and stored in the attrs property, is it fine and other newlines that are outside attributes are also fine.

The bug was observed with vue-template-compiler v2.5.9 and node.js v8.9.1.

While the above example seems silly, newlines in attribute are very common when using responsive images, with multiple sizes in the srcset attribute, which are usually broken onto one line per size/url for readability and this is how a colleague of mine ran into this bug, where responsive images were working differently between ssr and rehydration due to the problem, because the browser aborted srcset parsing when finding the "\n" literal string.

[felixbuenemann]

While the report explicitly mentions newlines, the double escaping also occurs for other escape sequences like \t.

[felixbuenemann]

It looks like the attribute is first escaped using JSON.stringify in processAttrs call to addAttr and then finally the whole string template is escaped again using JSON.stringify(textBuffer) inside flattenSegments, which causes the double escaping.

[felixbuenemann]

I could fix the problem by applying the following patch to the genAttrSegment function:

diff --git a/src/server/optimizing-compiler/modules.js b/src/server/optimizing-compiler/modules.js
index 41b1af1d..69a7be87 100644
--- a/src/server/optimizing-compiler/modules.js
+++ b/src/server/optimizing-compiler/modules.js
@@ -77,7 +77,7 @@ function genAttrSegment (name: string, value: string): StringSegment {
         ? ` ${name}="${name}"`
         : value === '""'
           ? ` ${name}`
-          : ` ${name}=${value}`
+          : ` ${name}="${JSON.parse(value)}"`
     }
   } else {
     return {