Hide session storage values in Angular

Question

I have developed single page application in angular 5 which uses session storage to store some navigation parameters, flags, info etc. but session storage values can be seen/modified by end user under browser's Application -->session Storage tab.

Temporarily I have encrypted those values but that is not permanent fix.

How can I hide those values using Angular? Any other suggestions/solutions?

Try cookies then. Go through https://stackoverflow.com/q/19867599/8252164 — samuellawrentz, Jul 18 '18 at 09:48
I had a same Issue, so this is what I did: In my authguard as the query prams are saved in session storage I navigate the user to normal link without query parameters and instead use the data from the session storage... — Immad Hamid, Jul 18 '18 at 09:58

score 0 · Answer 1 · answered Jul 18 '18 at 10:04

0

I had a same Issue, so this is what I did:

In my AuthGuard as I get the query prams I save it in session storage in encrypted form and then I navigate the user to link without query parameters and as the user hit that link I decrypt the values that are present in session storage and show the result...

answered Jul 18 '18 at 10:04

Immad Hamid

789
1
8
21

Thanks for reply, already I have applied encryption-decryption logic – Kiran Gurade Jul 18 '18 at 10:58
how you have done it kindly tell me also so that i can also implement the same thing. – Nagendra Kumar Dec 12 '19 at 13:55

score 0 · Answer 2 · answered Jul 15 '23 at 05:41

You can create Storage event to subscribe the session storage value , hear is an example code

 this.message$ = fromEvent<StorageEvent>(window, 'storage').pipe(

     filter((event) => event.storageArea === sessionStorage),
     filter((event) => event.key === 'isLoggedIn'),
     map((event) => event.newValue)
);

In the html , you can do something like this ,

 <button *ngIf="(message$ | async) == 'true' ? true : false"> 
 Logout</button>

Hide session storage values in Angular

2 Answers2