Angular: Cifrar localStorage

Crear una aplicación web implica persistir datos de manera rápida. Eso lo podemos hacer gracias a localStorage, y, su implementación puede ser diferente para cada caso. Hoy veremos como usarlo de manera segura y efectiva.

Tabla de contenido

1. Configuración del proyecto
2. Creación de componentes
3. Seguridad a localStorage

Configuración del proyecto

Para éste ejemplo usaremos un componente y un servicio.

También instalaremos dos librerías adicionales.

En un nuevo proyecto creamos los archivos e instalamos las dependencias que necesitamos.

$ ng generate component view/home
$ ng generate service services/secure-storage

$ npm install secure-ls --save
$ npm install @intmainreturn/randomizer --save

Creación de componentes

Esto será un ejemplo práctico y sencillo, así que modificamos lo siguiente.

home.component.ts

import { Component, OnInit } from '@angular/core';
import * as randomizer from '@intmainreturn/randomizer';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  public serialActivation: string;

  ngOnInit(): void {
    const SERIAL_ACTIVATION = randomizer.serial();
    localStorage.setItem('serialActivation', SERIAL_ACTIVATION);

    this.serialActivation = localStorage.getItem('serialActivation');
  }

}

home.component.html

<p>Serial de activacion: {{serialActivation}}</p>

Veamos como queda nuestra vista. Claro, aún es inseguro y seguimos expuestos.

Seguridad a localStorage

Abre el archivo secure-storage.service.ts y agrega lo siguiente.

import { Injectable } from '@angular/core';
import * as SecureLS from 'secure-ls';

@Injectable({
  providedIn: 'root'
})
export class SecureStorageService {

  private secureLs: any = new SecureLS({
      encodingType: 'rc4',
      isCompression: false,
      encryptionSecret: 'Mys3cr3tPa$$w0rd@321'
  });
  
  public getItem(item: string): string{
    return this.secureLs.get(item);
  }
  public setItem(key: string, data): void{
    this.secureLs.set(key, data);
  }
}

Asegúrate de personalizar la opción encryptionSecret con caracteres especiales y de larga longitud para una mayor seguridad y dificultad.

Para usar este servicio lo agregamos en el constructor del archivo home.component.ts y cambiamos algunas cosas más. Quedaría de la siguiente manera.

import { Component, OnInit } from '@angular/core';
import * as randomizer from '@intmainreturn/randomizer';
import {SecureStorageService} from '../../services/secure-storage.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  public serialActivation: string;

  constructor(private storageService: SecureStorageService) {}

  ngOnInit(): void {
    const SERIAL_ACTIVATION = randomizer.serial();
    this.storageService.setItem('serialActivation', SERIAL_ACTIVATION);

    this.serialActivation = this.storageService.getItem('serialActivation');
  }

}

Veamos en nuestro navegador el resultado.

Vaya! Hemos aplicado seguridad en nuestro localStorage.

En el siguiente post les enseñaré un tip para reforzar la seguridad y aplicar medidas más avanzadas para localStorage.

Saludos y bendiciones.