Demonstrating all the records present in key users are being stored in the collection of a user in the form of JavaScript objects as shown above.
- Data is stored without any encryption on disk. i.e. anyone who has access to the system can get access to the data.
- In localStorage, if until the website deletes the data or user explicitly clears the data by telling the browser i.e. the data will be persistent for a lifetime.
Security Concerns
As all the local storage is saved on the client-side, it can be tempered or can be seen by anyone who has sound knowledge of browser working and web. Just type localStorage in a console window or go-to resource and there they are.
Local storage is a threat when a browser is being shared by multiple users example like a cyber cafe, where any person can inject a malicious script that can steal the user assets.
Let’s start and create a normal meeting scheduling app in Visual studio using ASP.NET MVC and session storage.
Create Simple Model classes as shown below
Let’s create our View, just a gentle reminder I will be using session storage for storage of data on the client browser and when all the information is gathered same will be inserted into the db.
UI
Table for Meeting Master
ID here is an Identity column wherein TblParticipants MomId is not Identity.
Table for Participants,
We will be using Entity Framework for mapping our Models to the DB schema.
- public classDAL: DbContext
- {
- //DBSet class represents an entity set that is used for create, read, update, and delete operations.
- public DbSet < MeetingMaster > mtngMaster
- {
- get;
- set;
- }
- publicDbSet < Participants > participants
- {
- get;
- set;
- }
- protected override void OnModelCreating(DbModelBuilder modelBuilder)
- {
- //map your classes to tables
- modelBuilder.Entity < MeetingMaster > ().ToTable("TblMeetingMaster");
- modelBuilder.Entity < Participants > ().ToTable("TblParticipants");
- }
- }
Let’s start and debug our program step by step,
Secretary creates a list of Participants to be added and click on Add participants. Here the list of participants will be stored in session storage rather than storing it session on the server-side. We will encode the value using base-64 encoded to keep the value secret. These values can be manipulated easily by injecting malicious JavaScript while if the user directly changes the value it will fail to decode as it will not be 64 bit encoded. We will test the same scenario during the debugging.
Debugger Stages
Stage 1
We can see the textbox values being encoded in 64 bit.
'sessionStorage.Participants' checks for if there is already any Participants key present in sessionStorage if not then create an array of Participants and push the Participant object into the array and then save the same in sessionStorage.
The value stored in session Storage with key Participants.
As new key has been inserted in session storage, now if we check 'sessionStorage.Participants will receive the above output. If I try to inject the JavaScript over here and delete the key and insert a new key it can be easily done. Let’s see what happens,
I cleared session storage and tried to change the value and added encoded 64 of ‘hacker’ this may seem foolish as I am changing the value from the console window. Let’s check what value appears on the browser for participants.
As we can see the value has been manipulated, the same can happen when someone injects malicious script and changes the data, so it’s strictly said not to store important credentials and the user's important information in localStorage or sessionStorage as it’s vulnerable to attacks easily.
Let’s focus and create a Meeting app using ASP.NET MVC.
Secretary has inserted the details and creates the meeting.
We create an object of all the details to be passed to the Controller, as we know before passing the objects we need to Stringify the objects as shown below,
Hits come to the Controllers,
All the values passed from the View to the Controller, and participants' values are encoded in 64 bit.
Decoding of Participant's name and email.
Meeting has been successfully created with id 1.
Successful creation of meeting.
Let’s check the database values,
You can add mailing features also so that all the participants will receive the mail regarding minutes of the Meeting.
Summary
Hence I conclude that Web Storage is a really amazing concept with drawbacks as well. I was unaware of Web Storage features before this so I wanted to unleash this topic from scratch. I hope this article will be helpful to everyone. I would be happy and will feel appreciated if you could comment and improvise me in doing better and learning the security measures to be taken while using sessionStorage or LocalStorage.