Angular本地存储安全分析详解

import { Component, OnInit } from '@angular/core';
import { LocalStorageService } from 'ngx-webstorage';
@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.css']
})
export class UsersComponent implements OnInit {
  currentUser: any;
  constructor(private localStorage: LocalStorageService) { }
  ngOnInit(): void {
    this.currentUser = this.localStorage.retrieve('currentUser');
  }
  login() {
    // 在此处完成用户登录操作
    this.currentUser = { name: 'John', age: 30 };
    this.localStorage.store('currentUser', this.currentUser);
  }
  logout() {
    this.localStorage.clear('currentUser');
  }
}

npm install angular-local-storage

import { LocalStorageService } from 'angular-local-storage';

export class ExampleComponent {
  prefix = "myapp_"; // 设置一个安全前缀
  private dataKey = `${this.prefix}data_key`;
  constructor(private localStorage: LocalStorageService) {}
  setData(data: any): void {
    this.localStorage.set(this.dataKey, data);
  }
  getData(): any {
    return this.localStorage.get(this.dataKey);
  }
  removeData(): void {
    this.localStorage.remove(this.dataKey);
  }
}

import * as CryptoJS from 'crypto-js';
export class ExampleComponent {
  static readonly keySize = 256;
  static readonly ivSize = 128;
  private secretKey = CryptoJS.lib.WordArray.random(ExampleComponent.keySize / 8).toString(CryptoJS.enc.Hex);
  private iv = CryptoJS.lib.WordArray.random(ExampleComponent.ivSize / 8).toString(CryptoJS.enc.Hex);
  private dataKey = `${this.prefix}data_key`;
  constructor(private localStorage: LocalStorageService) {}
  setData(data: any): void {
    const encryptedData = CryptoJS.AES.encrypt(JSON.stringify(data), this.secretKey, { iv: this.iv }).toString();
    this.localStorage.set(this.dataKey, encryptedData);
  }
  getData(): any {
    const encryptedData = this.localStorage.get(this.dataKey);
    if (encryptedData) {
      const decryptedData = CryptoJS.AES.decrypt(encryptedData, this.secretKey, { iv: this.iv });
      return JSON.parse(decryptedData.toString(CryptoJS.enc.Utf8));
    } else {
      return null;
    }
  }
  removeData(): void {
    this.localStorage.remove(this.dataKey);
  }
}