handle multiline atribute value parsing in IE (fix #3663)

Author: yyx990803

flow/compiler.js

@@ -14,6 +14,7 @@ declare type CompilerOptions = {
   preserveWhitespace?: boolean;
   isFromDOM?: boolean;
   shouldDecodeTags?: boolean;
+  shouldDecodeNewlines?: boolean;
 
   // runtime user-configurable
   delimiters?: [string, string]; // template delimiters

src/compiler/parser/html-parser.js

@@ -48,15 +48,19 @@ const isSpecialTag = makeMap('script,style', true)
 
 const reCache = {}
 
-const ampRE = /&/g
 const ltRE = /</g
 const gtRE = />/g
+const nlRE = /
/g
+const ampRE = /&/g
 const quoteRE = /"/g
 
-function decodeAttr (value, shouldDecodeTags) {
+function decodeAttr (value, shouldDecodeTags, shouldDecodeNewlines) {
   if (shouldDecodeTags) {
     value = value.replace(ltRE, '<').replace(gtRE, '>')
   }
+  if (shouldDecodeNewlines) {
+    value = value.replace(nlRE, '\n')
+  }
   return value.replace(ampRE, '&').replace(quoteRE, '"')
 }
 
@@ -65,7 +69,6 @@ export function parseHTML (html, options) {
   const expectHTML = options.expectHTML
   const isUnaryTag = options.isUnaryTag || no
   const isFromDOM = options.isFromDOM
-  const shouldDecodeTags = options.shouldDecodeTags
   let index = 0
   let last, lastTag
   while (html) {
@@ -215,7 +218,11 @@ export function parseHTML (html, options) {
       const value = args[3] || args[4] || args[5] || ''
       attrs[i] = {
         name: args[1],
-        value: isFromDOM ? decodeAttr(value, shouldDecodeTags) : value
+        value: isFromDOM ? decodeAttr(
+          value,
+          options.shouldDecodeTags,
+          options.shouldDecodeNewlines
+        ) : value
       }
     }
 

src/compiler/parser/index.js

@@ -62,6 +62,7 @@ export function parse (
     isUnaryTag: options.isUnaryTag,
     isFromDOM: options.isFromDOM,
     shouldDecodeTags: options.shouldDecodeTags,
+    shouldDecodeNewlines: options.shouldDecodeNewlines,
     start (tag, attrs, unary) {
       // check namespace.
       // inherit parent ns if there is one

src/entries/web-runtime-with-compiler.js

@@ -2,7 +2,8 @@
 
 import Vue from './web-runtime'
 import { warn, cached } from 'core/util/index'
-import { query, shouldDecodeTags } from 'web/util/index'
+import { query } from 'web/util/index'
+import { shouldDecodeTags, shouldDecodeNewlines } from 'web/util/compat'
 import { compileToFunctions } from 'web/compiler/index'
 
 const idToTemplate = cached(id => {
@@ -54,6 +55,7 @@ Vue.prototype.$mount = function (
         warn,
         isFromDOM,
         shouldDecodeTags,
+        shouldDecodeNewlines,
         delimiters: options.delimiters
       }, this)
       options.render = render

src/platforms/web/util/compat.js

@@ -0,0 +1,21 @@
+/* @flow */
+
+import { inBrowser } from 'core/util/index'
+
+// check whether current browser encodes a char inside attribute values
+function shouldDecode (content: string, encoded: string): boolean {
+  const div = document.createElement('div')
+  div.innerHTML = `<div a="${content}">`
+  return div.innerHTML.indexOf(encoded) > 0
+}
+
+// According to
+// https://w3c.github.io/DOM-Parsing/#dfn-serializing-an-attribute-value
+// when serializing innerHTML, <, >, ", & should be encoded as entities.
+// However, only some browsers, e.g. PhantomJS, encodes < and >.
+// this causes problems with the in-browser parser.
+export const shouldDecodeTags = inBrowser ? shouldDecode('>', '&gt;') : false
+
+// #3663
+// IE encodes newlines inside attribute values while other browsers don't
+export const shouldDecodeNewlines = inBrowser ? shouldDecode('\n', '&#10;') : false

src/platforms/web/util/index.js

@@ -11,17 +11,6 @@ export const isIE = UA && /msie|trident/.test(UA)
 export const isIE9 = UA && UA.indexOf('msie 9.0') > 0
 export const isAndroid = UA && UA.indexOf('android') > 0
 
-// According to
-// https://w3c.github.io/DOM-Parsing/#dfn-serializing-an-attribute-value
-// when serializing innerHTML, <, >, ", & should be encoded as entities.
-// However, only some browsers, e.g. PhantomJS, encodes < and >.
-// this causes problems with the in-browser parser.
-export const shouldDecodeTags = inBrowser ? (function () {
-  const div = document.createElement('div')
-  div.innerHTML = '<div a=">">'
-  return div.innerHTML.indexOf('&gt;') > 0
-})() : false
-
 /**
  * Query an element selector if it's not an element already.
  */

test/unit/features/options/el.spec.js

@@ -67,7 +67,7 @@ describe('Options el', () => {
   })
 
   // https://w3c.github.io/DOM-Parsing/#dfn-serializing-an-attribute-value
-  it('properly decode attribute values when parsing templates from DOM', function () {
+  it('properly decode attribute values when parsing templates from DOM', () => {
     const el = document.createElement('div')
     el.innerHTML = '<a href="/a?foo=bar&baz=qux" name="<abc>" single=\'"hi"\'></a>'
     const vm = new Vue({ el })
@@ -76,6 +76,13 @@ describe('Options el', () => {
     expect(vm.$el.children[0].getAttribute('single')).toBe('"hi"')
   })
 
+  it('decode attribute value newlines when parsing templates from DOM in IE', () => {
+    const el = document.createElement('div')
+    el.innerHTML = `<a :style="{\ncolor:'red'\n}"></a>`
+    const vm = new Vue({ el })
+    expect(vm.$el.children[0].style.color).toBe('red')
+  })
+
   it('warn cannot find element', () => {
     new Vue({ el: '#non-existent' })
     expect('Cannot find element: #non-existent').toHaveBeenWarned()