HTML entities in attributes are not always decoded for string templates

[jmijn]

Version

2.5.17

Reproduction link

https://jsfiddle.net/sf9cg0db/

Steps to reproduce

Try to dynamically load an input field with a value that contains an encoded single quote (') as plain HTML. Normally the input field will display the single quote in the input box. However, Vue shows the ' in the input box.

I tested this with multiple encoded chars, and everything works correctly, except for the single quote. As stated by @HcySunYang, all entities except the 6 he listed have this issue.

What is expected?

A single quote is shown in the input field when loaded async with Vue

What is actually happening?

' is show in the input field when loaded async with Vue

[HcySunYang]

This is not related to whether the component is asynchronous or not. Non-asynchronous components also have this problem. Vue's html-parser will only process the following entity content:

const decodingMap = {
  '&lt;': '<',
  '&gt;': '>',
  '&quot;': '"',
  '&amp;': '&',
  '&#10;': '\n',
  '&#9;': '\t'
}

it's here: https://github.com/vuejs/vue/blob/dev/src/compiler/parser/html-parser.js#L38-L45.

[jmijn]

So ''' should be added to the map?

Update: https://jsfiddle.net/sf9cg0db/12/
You are right, also é for example doesn't work... So if manually 6 out of all entities are correctly converted, how should this be fixed then?

[rafaelcorradini]

It would not be better to use something like this package?
https://github.com/mdevils/node-html-entities

[Justineo]

Actually Vue is already using he on Node.js (compile-time and SSR) and leveraging DOM API on the browser side to perform entity decoding. It seems that only attribute values are decoded using the decodingMap mentioned above and I'm not sure it's intentional or just a miss.

[matzeeable]

Running into a similar issue when a PHP code is returning an encoded HTML attribute, especially within WordPress with the esc_attr function: https://qsandbox.com/tools/wp-functions/function/esc_attr

Behind the scenes, it uses PHP htmlspecialchars:

The difference is the leading 0 which is not interpreted by the decoding map:

vue/src/compiler/parser/html-parser.js

Lines 33 to 43 in 8d3fce0

	const decodingMap = {
	'&lt;': '<',
	'&gt;': '>',
	'&quot;': '"',
	'&amp;': '&',
	'&#10;': '\n',
	'&#9;': '\t',
	'&#39;': "'"
	}
	const encodedAttr = /&(?:lt|gt|quot|amp|#39);/g
	const encodedAttrWithNewLines = /&(?:lt|gt|quot|amp|#39|#10|#9);/g

The leading 0 should not run into any issues in browser behavior as it is interpreted as integer: https://appdevtools.com/html-entity-encoder-decoder