Discussion on: Should you care about XSS in Vue.js?

View post

This article is wrong, @nandod1707 you should change or remove it.

You thought that

{{ constructor.constructor("alert('xss')")() }}

is the same of

s = `constructor.constructor("alert('xss')")()`
{{ s }}

But the first opens the alert, the second outputs the string
With the first you are hacking yourself.

In a real app you are in the second scenario, where s is taken from the server, and Vue correctly shows it as a string.

Anyone can try, though: (spoiler: it show's the string)

<template>
  <div>{{ s }}</div>
</template>

<script>
export default {
  data() {
    return {
      s: `constructor.constructor("alert('xss')")()`
    }
  },
}
</script>

Nando Delgado • Jul 26 '19

Hi EJ! Thanks for your comment. Sure, what you're saying is similar to what we suggest in the article of putting server side variables inside a global variable. The goal of the article is to point out how to avoid making an app vulnerable through bad practices, and your example seems to be in line with that :)

EJ Santoemma • Jul 26 '19

Hi Nando. The standard (and only) way to show a value coming from outside is to put it into a property (data, props, vuex, ...) and then show it in the template via the mustaches, v-text or v-html.

That global variable trick is a solution to a non problem.
Your "constructor" example had been discussed and should be a thing of the past.

I'm replying here because I found your article on Hacker News last week, and thought that it can generate FUD to those learning any reactive framework.

Like your hint to limit the use of Vue...

Peace :)