Vue.js XSS vulnerability

user_11868975 0
Viewed 114

I'm a little bit confused regarding vue.js vulnerability to XSS attacks. My case is as follows:

  • take input from user (let's say simple open text), let's say: input_text
  • save it to database
  • on other page load it to vue variable inputed_text
  • show it with <p>{{ inputed_text }}</p>

And now the question is: am I vulnerable to XSS attack? I tried a few solutions:

  1. Sanitize input on server-side - but the problem is, that vue.js shows input encoded (so I need to use v-html)
  2. No sanitization at all - because of auto-sanitizing from Vue.js during rendering output

In both cases I tested: alert('XSS') <script>alert('XSS')</script> {{ alert('XSS') }} {{constructor.constructor("alert('xss')")() }}

No effect at all (XSS attack not possible). So now: how it should be done correctly? Or there is a possibility to XSS, but I don't see it?

vue.js xss php
1 Answers

As you said, Input text is going to save in database. Hence, data could be exposed in some other application which sharing the same database.

For safer side, It's better to sanitize the user input before submitting to database. Attacker can inject malicious script in two ways :

  • By using input element via browser
  • By modifying the request payload via swagger or any other API tool.

My suggestion would be to remove the unwanted characters at your API level as any how at the end data will come to API if data will be modified while input via browser or in request payload via any API tool.

Implementation Suggestion : You can defined a blacklist RegEx which will contain the invalid characters and then you can match the input string with the blacklist and replace the blacklist character with the empty character if any match happen.

const blackListCharacters = /(<[^>]+>)/ig
 
const inputString = "<script>alert('Hi')<script>"

const res = inputString.replace(blackListCharacters, '');

console.log(res); // alert('Hi')

user_41163000
Related