Angular session in new tab

Question

I'm developing application with Angular (version 6, using ngx-rocket starter). I'm concerned about sharing app sessions between tabs in browser. All answers I found are very old. I'm here to ask how to handle that properly (without security issues).

This solution: https://stackoverflow.com/a/32766809/9172963 works, but I'm not really like the idea of putting javascript into index.html of angular app. Other solutions, like for example: Communication between tabs or windows is not at option because app need to work in Edge browser.

There's no other way to store data on client side except `localStorage` or `cookies`. Don't want to disappoint you but there's no other way to store session at client side. — Ali Shahbaz, Oct 23 '18 at 14:12
This might help you, https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage — Ali Shahbaz, Oct 23 '18 at 14:14
Yeah, I'm aware of that. My idea was to pass data from session storage via local storage, just like in one of solutions I linked in post. I based on this article: https://blog.guya.net/2015/06/12/sharing-sessionstorage-between-tabs-for-secure-multi-tab-authentication/ — mplatek89, Oct 23 '18 at 14:20

score 0 · Answer 1 · answered Oct 23 '18 at 14:14

Using javascript local storage should be ok if you are not storing user roles and rights. You do not have to insert javascript in index.html.

Just create a service something like:

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class LocalStorageService {
  public localStorage;
  constructor() { 
    this.localStorage = window.localStorage;
  }


  getObject(key){
    let value = this.localStorage.getItem(key);
    return JSON.parse(value);
  }

  setObject(key, value){
    this.localStorage.setItem(key, JSON.stringify(value));
  }

  get(key){
    return this.localStorage.getItem(key);
  }

  set(key, value){
    this.localStorage.setItem(key,value);
  }

  clear(){
    this.localStorage.clear();
    //console.log("cleared");
  }
}

Then you can save data in one tab and get it on the other using this service. Just be sure to not save data that you dont want the user to be able to change like user roles and rights. If user access is a must have along the different tabs then get it from the server with the authentication you would use in one tab either way.

Hope it helps

Angular session in new tab

1 Answers1