Securing confidential information within Vuex

In summary, we have implemented Vue on the front-end and Hapi JS on the back-end. The front end utilizes MSAL.js for user authentication, passing an access token to the back-end. The access token is decoded using hapi-auth-jwt2, with the validate() function returning 

{ isValid: true, credentials : { ps_ref: 12345, md_userid: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a1c0d2c7c0d2c6d2c6e1949996958fc2cecc">[email protected]</a> }}
. This information is then passed to the handler function of a route that retrieves authentication groups/user roles (i.e. Auids) from our database along with user data.

Consider the structure of the user object below:

{
  Auids: (4) ["user", "webadmin", "accounts"]
  md_clock: 5678
  md_picture: "./images/"
  ps_fname1: "Test Name"
  ps_surname: "Test Surname"
  psname: "Test Name Test Surname"
  psref: 125125
}

We want to store this object in Vuex, but there are concerns about visibility to users with Vue Devtools or those who can execute something like rootElementOfApp.__vue__.$store.

The questions at hand are:

  1. How accessible is Vuex in production?

  2. If Vuex is easily accessed by the public, is it the best option for storing this object? Should we consider encoding the user object or at least the Auids within it if we proceed with Vuex?

javascriptsecurityvue.jsvuexencode

Answer №1

Storing information in JavaScript, HTML, or cookies is not inherently secure. It all depends on how you handle and manage the data. Generally speaking, you can store a wide range of information on the front end as long as it doesn't include sensitive data that could be exploited for malicious purposes like hacking into systems. Details such as addresses, contract numbers, and bank account information should be handled with caution.

User IDs (for internal use only) and user roles are examples of information that can safely be stored on the front end, but proper precautions must be taken to ensure client-side validation matches up with server-side validation.

While development tools in Vue are typically disabled in production mode, determined hackers may still find ways to access them, so extra security measures should always be implemented.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for maintaining consistent heights for two div elements in jQuery MobileEnsure that two div elements in jQuery

I am brand new to the jquery mobile framework and seeking your patience as I navigate through it. In my current project, I am required to display data in a tabular format. To achieve this, I have set up a structure with left and right columns: <div dat ...

javascriptjqueryjquery-mobile

How to efficiently search MongoDB for existing records and group them by unique array values

My dataset is structured like this: { "_id" : 1, "category" : [ { "name": "category1" }, { "name": "category2" } ], "event": [ { type: "house" ...

javascriptmongodb

Utilize Vue to access and read a file stored in the current directory

I am attempting to retrieve data from a text file that is located in the same directory as my .vue file. Unfortunately, I am encountering an issue where the content of the text file is not being displayed in both Chrome and Firefox. Instead, I am seeing th ...

javascriptajaxvue.jsvuejs2xmlhttprequest

Encountering difficulties when trying to display a nested object with two levels of depth using

I am currently developing an application where I need to display a nested object with two levels using the map method. The data structure is as follows: const categories = [ { catName: "Education", subCategory: [ { subCatName: "Col ...

javascriptreactjs

The Angular UI Bootstrap Datepicker fails to appear on top of the Bootstrap Modal

I'm currently working on an Angular app that utilizes UI Bootstrap. Within my app, I have a modal containing a Datepicker at the bottom. However, I've encountered an issue where the Datepicker remains confined within the modal when expanded. I at ...

javascripthtmlcssangularjsangular-ui-bootstrap

Difficulty encountered when attempting to utilize keyup functionality on input-groups that are added dynamically

I've exhausted all available questions on this topic and attempted every solution, but my keyup function remains unresponsive. $(document).ready(function() { $(document).on('keyup', '.pollOption', function() { var empty = ...

javascriptjqueryhtml

arrange objects based on their position using javascript

In my JavaScript code, I am trying to position objects above each other relative to a center point at coordinates 0,0. The number of objects, their sizes, and the spacing between them are all variable. This image illustrates my situation best (hopefully ; ...

javascriptmaththree.jsposition

Switch button while moving cursor

I'm struggling with getting this 2048x512 image, which has 4 stages of transition, to work properly. https://i.sstatic.net/1PBvX.png While I know how to switch it to the final stage on hover, I can't seem to figure out how to incorporate a trans ...

javascriptjquerycsscss-transitions

Transferring an organized array to processing

My goal is to transfer an array of integers from a php file called load.php to a JS script, which will then forward it to a Processing file written in JavaScript. In load.php, I define the array and send it using JSON (the array contains a minimum of 40 i ...

javascriptphpajaxjsonprocessing

Implementing event listeners with AngularJS after making a POST request

As I delve into the world of development, please forgive my lack of knowledge. My search for solutions brought me here. I am currently working on a comment and reply app. In order to add comments to my view, I am utilizing this specific function. $scope.i ...

javascriptangularjs

Opt for a submit <button> over an <input> button option

Is it possible to submit a form using <button> instead of <input>? I understand that a <button> cannot handle the form submission like a <input>, and I need to use the onclick method. I have attempted various solutions, but none se ...

javascriptphpjqueryhtmlforms

Using jQuery's append function will retrieve external source files within script tags, however, it will not officially render them in the DOM

After including a script with an external source and attempting to parse it using jQuery, the script is downloaded but not loaded into the DOM. This issue persists regardless of which jQuery DOM insertion method I use, such as .append(). Take a look at th ...

javascriptjquerydomsrcscript-element

What is the best way to bring my file into app.js using JavaScript?

I've been attempting to include a JavaScript file into app.js within the create-react-app package. I tried the following code to import my file: Just a heads up: my file is located in a folder called components within the Navigation folder. import s ...

javascriptreactjsimport

Which is more efficient: Loading all data at once as JSON in AngularJS or using a database to load only necessary parts?

I need to showcase products from an ERP system on a website. The ERP system can generate either an XML or JSON file containing all the product information. The website must have features like pagination, sorting, and filtering by attributes. Currently, my ...

javascriptjsonangularjsmongodb

Using JQuery to find the nearest element and narrowing down the search to its child elements

In my program, I have 3 forms identified by form1, form2, and form3. Each form contains its own set of dropdown lists named drop1 and drop2, along with a submit button. When the submit button is clicked in any form, it checks which option was selected from ...

javascriptjqueryhtmlformsfiltering

I'm having trouble grasping the project layout of a Vue project that was generated using vue-cli

Having recently ventured into Vue.js with no prior experience in frontend frameworks, I embarked on a project using the "vue create" command along with standard plugins. Everything seemed to be running smoothly until I decided to start from scratch by dele ...

javascripthtmlvue.jsvue-cli

The implementation of Ajax beforeSend and complete functions is not possible at the moment

I’ve been attempting to implement a spinner image while loading ajax data, but I can't seem to get it to work. Here's my code : $.ajax({ url: '/Observer/GetInfoProfileByProfileId', type: 'POST', data: { ProfileId: ...

javascriptajaxspinner

AngularJS Treeview - Rearranging tree nodes

My journey with Angular is just beginning, and I managed to create a treeview following this example: jsfiddle.net/eu81273/8LWUc/18/ The data structure I've adopted looks like this: treeview1 = [ { roleName: "User ...

javascriptjqueryangularjstreeview

Animating SVG while scrolling on a one-page website

Is there a way to incorporate SVG animation scrolling in a single page website? I am inspired by websites like and . The first one stands out to me because the animation is controlled by scrollup and scrolldown actions. I haven't written any of my S ...

javascriptjquerysvgparallaxscrollmagic

How can I insert a variable into the URL for fetching data in React?

Here's a fetch request I have: fetch(`https://example/e1/e11/${variable1}?param=A1&include=metadata`, { "method": "GET"... Is there an issue with declaring the variable1 in this manner? It seems to work fine when written lik ...

javascriptreactjsweburl