Date de création : 2020/12/11 09:46

Si on utilise le localStorage il peut être utile de ne pas laisser des données sensibles visibles.

Pour cela il suffit de crypter ces données avec un petit bout de code, et nous avons justement un package npm qui fait cela: CryptoJS.

pour commencer il faut bien sur:

• Node.js
• npm (Node.js package manager)
• et un project Angular

et il ne reste plus qu'a faire un:

npm install crypto-js --save

le plus simple avec angular est de faire un service qu'on appel pour crypter ou décrypter:

ng g service service/AES/AESEncryptDecryptService

et mettre ce code dedans

import { Injectable } from '@angular/core';
import * as CryptoJS from 'crypto-js';
 
@Injectable({
  providedIn: 'root'
})
export class AESEncryptDecryptService {
 
  secretKey = "YourSecretKeyForEncryption&Descryption";
  constructor() { }
 
  encrypt(value : string) : string{
    return CryptoJS.AES.encrypt(value, this.secretKey.trim()).toString();
  }
 
  decrypt(textToDecrypt : string){
    return CryptoJS.AES.decrypt(textToDecrypt, this.secretKey.trim()).toString(CryptoJS.enc.Utf8);
  }
}

Enfin dans le component qui va devoir l'utiliser un import:

import { AESEncryptDecryptService } from '../services/aesencrypt-decrypt.service';

et une déclaration dans le constructeur :

constructor(private _AESEncryptDecryptService: AESEncryptDecryptService) { }

Pour l'utilisation on fait:

let encryptedText = _self._AESEncryptDecryptService.encrypt("Hello World");
let decryptedText = _self._AESEncryptDecryptService.decrypt(encryptedText);

donc maintenant que le cryptage fonctionne on va l'ajouter au localstorage.

Les commandes habituelles ne change pas:

L'extrait de code suivant accède à l'objet local Storage du domaine courant et lui ajoute une entrée en utilisant Storage.setItem().¹⁾

localStorage.setItem('monChat', 'Tom');

La syntaxe pour la lecture de l'article localStorage est la suivante :

var cat = localStorage.getItem('myCat');

La syntaxe pour la suppression de l'élément localStorage est la suivante :

localStorage.removeItem('myCat');

La syntaxe pour supprimer tous les éléments de localStorage est la suivante :

localStorage.clear();

Il suffit d'intercaler notre cryptage dedans: pour l'ecriture cela donne:

localStorage.setItem('MonCat',this._AESEncryptDecryptService.encrypt('Tom');

1. On prend la value 'Tom'.
2. on la fait passer dans this._AESEncryptDecryptService.encrypt.
3. on la delcare value de la Key 'Moncat'
4. on l'envoi dans le localStorage

Bon maintenant pour le décryptage c'est presque pareille mais c'est l'ordre qui change:

let data = JSON.parse(this._AESEncryptDecryptService.decrypt(localStorage.getItem('MonCat')));

1. on récupère la value de la key du localStorage 'MonCat'.
2. on la décrypte avec this._AESEncryptDecryptService.encrypt.
3. on la parse avec JSON.parse

maintenant compliquons un peut la chose

on peut très bien sortir la clé de Cryptage du service et le passe dans l’environnement:

export class AESEncryptDecryptService {
 
  secretKey = environment.privateKey;
  constructor() { }

puis dans le fichier environment.ts il suffit de rajouter une key,value au json :

export const environment = {
  production: false,
  privateKey:'MaSuperSecretKey'
};

Page dans la catégorie: