随着Web应用程序的不断增长，前端开发人员慢慢意识到使用浏览器提供的本地存储技术可以在不使用外部数据库的情况下方便地保存应用程序的数据。Angular作为目前最流行的前端框架之一，也在其API中提供了许多本地存储技术的支持。但是，在使用本地存储时，安全性问题也愈发重要。因此，本文将从安全角度出发介绍如何在Angular应用程序中使用本地存储，并提供一些实例说明。
什么是本地存储？
本地存储是指将数据存储在客户端（即用户的计算机内存或文件系统）而非服务器上。利用本地存储，可以更快地访问已缓存的数据，减轻服务器压力，提高用户体验。常见的本地存储技术有Cookie、Web Storage API和IndexedDB等。
Angular中的本地存储技术
Cookie
在Angular中，通过ngx-cookie-service库可以很容易地实现对Cookie的读写操作。但是，由于Cookie会随着每个请求自动发送到服务器，未加密的敏感信息可能被盗取，造成安全问题。
Web Storage API
Web Storage API分为两种：localStorage和sessionStorage，它们只能存储字符串类型的数据，但具有很好的可扩展性和可靠性。通常，我们使用@angular/common库中的LocalStorageService或SessionStorageService进行Web Storage的读写操作。
LocalStorage
LocalStorage与Cookie相似，但是LocalStorage最大的不同在于，它不会随着每个请求自动发送到服务器，而是完全由浏览器掌握。在使用LocalStorage时，需要注意以下几点：
只应存储必要的信息切勿将未加密的敏感信息存储在LocalStorage中及时清除无用的数据
下面是一个使用LocalStorageService存储用户信息的实例：
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');
}
}
SessionStorage
SessionStorage与LocalStorage类似，但是SessionStorage的数据仅在当前会话期间有效。在Angular中，使用SessionStorageService可以方便地处理SessionStorage的读写操作。
IndexedDB
IndexedDB允许离线访问、高效存储、高性能检索数据。在Angular中，使用ng-idb库可以轻松创建和管理IndexedDB中的对象存储。
安全角度的本地存储实例
第一步：引入localStorageService
在Angular中，可以使用第三方库“angular-local-storage”来操作本地存储。通过以下命令行将其安装到项目中：
npm install angular-local-storage
然后在需要使用localStorage的组件或服务中引入该库：
import { LocalStorageService } from 'angular-local-storage';
第二步：设置一个安全前缀
任何有经验的黑客都知道，如果未正确保护本地存储，那么他们可以修改存储在浏览器中的数据，从而完全破坏你的应用程序。为了防止这种情况的发生，最好给localStorage添加一个安全前缀。
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);
}
}
在上面的代码示例中，我们创建了一个前缀和一个dataKey，这个dataKey在本地存储中将存储我们的实际数据。此外，我们还编写了三个方法以便于操作数据。setData()方法将数据写入LocalStorage中，getData()方法检索该数据并返回它，removeData()方法从localStorage中删除该数据。
第三步：加密敏感数据
如果您处理的数据是敏感的，则更应该采取额外的措施确保其安全性。可以使用现代加密技术像AES加密算法，对你写入的数据进行加密，然后在程序中进行解密。在这种情况下，存储在本地的数据将是不可读的。
以下是一个例子：
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);
}
}
在上述代码例子中，我们使用CryptoJS加密库进行加密和解密。在setData()方法中，我们将要存储的数据字符串化之后，使用AES对其进行加密，然后将其存储在本地存储中。在getData()方法中，我们获取已经被加密的数据并对其进行解密，最后返回解密的原始数据。在removeData()方法中，我们删除数据时没有必要解密。
以上是从安全角度分析Angular本地存储的一些建议，希望对你有帮助。如果你有任何其他问题或疑惑，欢迎留言。
☎️🕳🕳☎️