Non-breaking space characters passed via props are double-escaped in component template output

[s-robertson]

Version

2.5.2

Reproduction link

https://jsfiddle.net/srobertson203/98Lp2ch0/

Steps to reproduce

1. Create a new component that accepts a string prop.
2. Use the handlebar syntax to display the prop within the component's template.
3. Use the component in a Vue application and pass a string containing a non-breaking space character for the prop.

What is expected?

The non-breaking space character should be escaped as an HTML entity in the raw HTML, but appear as a normal space in the rendered HTML.

What is actually happening?

The non-breaking space character is double-escaped as an HTML entity and instead appears as   in the rendered HTML.

---

As shown in the jsfiddle, all other characters that should be escaped as HTML entities (such as & and < or >)are behaving as expected. It's only the non-breaking space character that's double-escaped.

[posva]

The browser is escaping it before passing it as an attribute. Add console.log(document.querySelector('#app > *')) before new Vue to see it
That's why it looks like it's escaped twice 😅

[eibx]

I've made 3 cases in the jsfiddle below - that might help explain the problem.

• First case is that   get turned into  
• Second case is that in a long list of UTF-8 characters only NON-BREAKING SPACE is the one to be escaped.
• And third when getting the same list of characters, but retrieving it from a regular HTMLElement with document.querySelector('#test').title the character aren't escape.

https://jsfiddle.net/98Lp2ch0/16/

[mikermcneil]

@s-robertson @posva @eibx Jumping in late, but I can verify this is happening with slot-scope with Vue v2.5.17:

Here is the character in question, for reference:

And here's the error we were seeing before replacing the   character with :

parasails.js:518 Uncaught Error: Failed to generate render function:

SyntaxError: Unexpected token & in

with(this){return _c('div',{attrs:{"id":"example"}},[_c('masthead'),_v(" "),_c('div',{staticClass:"container"},[_……… 
(and so on)

[eibx]

@mikermcneil I've made an example in #8895 that shows that all attributes in a Vue context doesn't handle non-breaking spaces.

[lurein]

for folks that are looking for a workaround for this:
When passing a string with non-breaking spaces as a prop, I just replaced the spaces with characters unlikely to be part of the string, in my case 'zzz'
var newName = program_name.replace(/\s/g,'zzz');

Then, in the actual component where I need to display or use this prop, I have a computed function that undoes the above action and replaces the placeholder chars with spaces again

correctedProgramName(){ //this reverses the space-replacing we had to do in reporting-dashboard.js
        let correctedProgramName = this.program_name.replace(/zzz/g, ' ')
        return correctedProgramName
      }

[ronnyfm]

I see this closed, but I do not see the reason why since a fix is not provided.

[JuniorTour]

PR #11599 will fix this issue:

Fixed Reproduction link: https://jsfiddle.net/juniortour/q2dxc65h/

After:

Before:

[ronnyfm]

Thanks, Junior, it looks like it is not being reviewed by anyone yet :(

[ronnyfm]

The browser is escaping it before passing it as an attribute. Add console.log(document.querySelector('#app > *')) before new Vue to see it
That's why it looks like it's escaped twice 😅

Hey @posva I see you closed this one, but the PR with the fix is not approved, is there a procedure to get it approved? Thanks.