(!) Double critical issue in TextMessage.vue

[OBezdietko]

1. Last autolinker feature changes breaks displaying of messsage.data.meta information. Used v-html directive deletes all data in div.sc-message--text which holds a paragraph with meta data

2. Passing a user input to v-html very dangerous because of XSS As mentioned in https://github.com/gregjacobs/Autolinker.js/issues/197 autolinker do nothing with dangerous user input. So vue-beatiful-chat is in the risk zone too, because you also not escape user input

[mattmezza]

Hi @OBezdietko thanks for reporting.

Luckily this commit is not released yet so I'm gonna fix that before releasing it. v-html is indeed very dangerous cause of XSS. Do you know any Vue component that already linkifies content?

I will then wrap all the message text into a <span> at least, so that message and metadata are separate and this won't happen again.

Let me know if you already have a PR for this, otherwise I have to work on it asap.

Thanks

[OBezdietko]

Hi @mattmezza thank for fast response I made on my own side next fast workaround (without anti-XSS encoding)

messageText() {
  let html = Autolinker.link( this.data.text, {
    className: 'chatLink',
    truncate: { length: 50, location: 'smart' }
  })

  if(this.data.meta){
   html += `<p class='sc-message--meta' style="color:${this.messageColors.color}">${this.data.meta}</p>`
  }

  return html
}

Only for fixing message.data.meta issue. Didn't made any fork and PR yet. Just playing with your component and trying to figure out will it fit on my needs.

[mattmezza]

Cool, thanks for sharing. It might come handy when fixing later this weekend.

On 13 Sep 2018, at 4:09 PM, OBezdietko notifications@github.com wrote:

Hi @mattmezza thank for fast response I made on my own side next fast workaround (without anti-XSS encoding)

messageText() { let html = Autolinker.link( this.data.text, { className: 'chatLink', truncate: { length: 50, location: 'smart' } })

if(this.data.meta){ html += <p class='sc-message--meta' style="color:${this.messageColors.color}">${this.data.meta}</p> }

return html } Only for fixing message.data.meta issue. Didn't made any fork and PR yet. Just playing with your component and trying to figure out will it fit on my needs.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[mattmezza]

Thank you @OBezdietko for opening this issue. It is now solved I believe 👍 sorry for having you wait ;)