0

QUESTION UPDATED

I am inspecting a client's application written with Vue.js and I found there a following construction.

// Somewhere else in the code
var data = JSON.parse(jsonString); 

// In the vue component
<img :src="require(`@/assets/img/${data.someKey}.png`)">

jsonString is returned from a client's own server, however if the server is compromised then this data can be manipulated.

The application is running in electron environment.

Is this construction is safe to assume that data.someKey will always contain a safe data or there are some ways to abuse this construction and execute an XSS either though a require or through ${}?

The whole construction is very questionable and client's developers are convinced that JSON.parse is a sufficient protection in this case.

INITIAL QUESTION

I have a following construction in JS

var data = JSON.parse(jsonString); 

`${data.someKey}`

jsonString comes from an untrusted source.

Is this construction is safe to assume that data.someKey will always contain a safe data or there are some ways to abuse this construction and execute an XSS?

Max
  • 2,063
  • 2
  • 17
  • 16
  • I would say yes it's safe? The code you shared has no side-effects – apokryfos Jul 04 '23 at 09:51
  • 2
    "jsonString comes from an untrusted source" — XSS is a risk that occurs when you dynamically generate source code. The code you've shown us isn't doing that. There might be a risk in how you generate `jsonString` in the first place. There might be a risk in what you do with `data` afterwards. – Quentin Jul 04 '23 at 09:55
  • _"jsonString comes from an untrusted source."_ - and "coming from", means what _exactly_? If you have `var jsonString = "{stuff from untrusted source output here}";` before that, or the above code would in reality actually be `var data = JSON.parse("{stuff from untrusted source output here}");` - then of course you could have a problem there. – CBroe Jul 04 '23 at 09:55
  • Based on your update, no it is not safe to use in that context and may even leave you vulnerable to more kinds of attack than XSS since I am assuming there is a bit there that runs serverside as well. Someone can possibly manipulate your require to load arbitrary files from your filesystem. – apokryfos Jul 04 '23 at 10:01

1 Answers1

3

Unless you use your JSON data as raw HTML or an attribute, for example:

element.innerHTML = `${data.someKey}`;

or

element.onclick = `${data.someKey}`;

it's safe.

Regading Vue, injecting raw HTML also dangerous:

<script setup>
  const data = JSON.parse(`{"someKey": "<img onerror=alert('Wow!') src=X />" }`); 
</script>

<template>
  <div v-html="data.someKey"></div>
</template>

But regarding your example:

<img :src="require(`@/assets/img/${data.someKey}.png`)">

it's safe because Vue doesn't generate raw HTML but rather set attributes with DOM methods which is totally safe.

You cannot bust a computed attribute in Vue, the value is escaped:

<img data-v-e2be38e7="" alt="Vue logo" class="logo" src="x&quot; onerror=&quot;alert('busted')&quot;" width="125" height="125">
Alexander Nenashev
  • 8,775
  • 2
  • 6
  • 17