DEV Community 👩‍💻👨‍💻

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

Collapse
 
narviktribe profile image
EJ Santoemma • Edited on

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>
Collapse
 
nandod1707 profile image
Nando Delgado Author

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 :)

Collapse
 
narviktribe profile image
EJ Santoemma

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 :)