angular

Angular: Cifrar localStorage

A menudo las aplicaciones deben de ser protegidas. Guardar datos en localStorage puede ser fácil, los datos quedan expuestos para cualquier atacante.

Alexander Miss

Nov 5, 2020 — 2 min read

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.

Configuración del proyecto

Para éste ejemplo usaremos un componente y un servicio.

Archivo	Tipo	Descripcion
home	Component	Vista principal, tendrá los datos que se cifrarán
secure-storage	Service	Lógica para nuestro localStorage seguro

También instalaremos dos librerías adicionales.

Libreria	Descripcion
secure-ls	Cifra y comprime datos de alto nivel para localStorage
@intmainreturn/randomizer	Genera códigos aleatorios (Opcional)

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.