Javascript Vue or React storing sensitive information client side safety

Question

As an example I have a Vue.js application. When the app is loaded, I fetch some sensitive data from the server over HTTPS and store it in the Vuex Store client side.

Is there any way someone can read that data via the Developer Tools in the browser or some other way? Is it safe? Is there any way for someone to write to the Vuex Store in the same manner?

Answer 1

Is there any way someone can read that data via the Developer Tools in the browser or some other way?

Yes. All you need is a reference to a Vue component, then you can access its $store property.

In dev tools, select an element in the DOM corresponding to a Vue component. Then in the console, enter:

$0.__vue__.$store

and you have access to the Vuex store. $0 corresponds to the selected DOM element.

In general, you should always assume that all client-side data can be accessible by the user in one way or another. There may be ways you can "hide" this data, or make it more difficult to access.