Paso a paso: Cmo mejorar la seguridad de tu aplicacin frontend usando AWS Secret Manager, ejemplo con VueJs

Hoy vamos a tratar un tema que muchas veces pasamos por alto, la seguridad en aplicaciones frontend (aplicable tambin para backend), creemos porque son API KEY podemos simplemente dejarla de forma esttica en el cdigo, pero cuando se ven comprometidas no sabemos cmo remediar esta situacin, hoy te traigo una idea de como lidiar con este problema.

Agenda del post:

• La responsabilidad en trminos de seguridad para aplicaciones Frontend
• Localstorage, SessionStorage, inputs hiddens
• Archivos .ENV Que debemos guardar?
• Por qu no debemos tener API KEYS de terceros en nuestro cdigo
• AWS Secrets manager como vault de datos
• AWS Cognito para acceso temporal a nuestros recursos de AWS
• Cdigo final usando AWS SDK v3 en VueJs

La responsabilidad en trminos de seguridad para aplicaciones Frontend:

Contexto:
El desarrollo de aplicaciones frontend requiere de un certificado de seguridad SSL para evitar problemas con los navegadores web y mejorar el posicionamiento en los motores de bsqueda. Adems, es necesario asegurar la informacin sensible como las credenciales de servicios de terceros (API KEY nominadas) no queden insertadas en el cdigo. Por ltimo y no menos importante, este certificado (SSL) nos va permitir encriptar las conexiones que hagamos con nuestra aplicacin backend (propia o de terceros).

Durante el proceso de desarrollo de aplicaciones, de seguro has tenido acceso a credenciales de servicios de terceros (API KEY) que solamente deben ser utilizadas para ambientes de pruebas (localhost)

Como realmente aseguramos eso?
_Hoy en este artculo vamos a estar hablando de un proceso de gestin seguro y actualizado para las variables de entorno en el equipo de desarrollo utilizando AWS Secret Manager. _

Ya sea que recibas a un nuevo mieembro al equipo o alguien salga del mismo, mantener esas credenciales de forma segura y actualizadas siempre fue un dolor de cabeza para cada encargado de seguridad en los equipos de desarrollo.

Cmo lder por muchos aos de equipos he probado muchas herramientas de gestin y casi todas recaen en la "buena f" del desarrollador/a, por eso hoy te mostrar un proceso que he venido haciendo estos ltimos tiempos.

Comencemos hablando de situaciones que de seguro se te hacen familiares.

Guardar informacin sensible en LocalStorage

Te hago un spoiler: lo primero que ver cualquier analista de seguridad a tu aplicacin frontend es buscar datos sensibles que el usuario final pueda tener acceso, con solo hacer F12 (consola de desarrollador) puedes entrar y ver el LocalStorage.

As que la prxima vez que quieras guardar un nmero de identificacin legal (C.I. / D.N.I / S.S.N), una contrasea o algo similar piensalo dos veces, hay cosas debajo del sof que son ms difciles de encontrar que ac.

Archivos .ENV con informacin sensible

Partimos de un punto: Dentro de tu repositorio de GIT no ests haciendo "commit" de datos sensibles en los archivos .ENV

Porque as lo ests haciendo no?

Recuerda que las aplicaciones fronted se empaquetan y se entregan al navegador de forma completa (no entraremos ac en detalle del "lazy load" o patrones similares), por lo tanto con simplemente examinar el cdigo tendremos a todo lo que contiene la aplicacin, este punto es clave para cuando quieras hacer algo cmo en tu .ENV:
GOOLE_API_KEY=J64j564Mknss

Por qu no debemos tener API KEYS de terceros en nuestro cdigo

No lo hagas!, ya que al hacerlo estars exponiendo esas credenciales a cualquier usuario de tu web. S, s ya me dirs Pero yo entro en la app de Google y le indico el dominio que quiero como whitelist, y te dir es correcto PERO NO SUFICIENTE, en trminos de seguridad cada puerta que dejemos abierta es una oportunidad para que nuestros atacantes (intencionados o no) utilicen esa informacin para otros fines diferentes a los originales.

De seguro ya te estars preguntando: Si no tengo esa API KEY como hago para que mi aplicacin funcione correctamente?, la respuesta corta es: necesitas llamar a un tercero para solicitar esa informacin y recin ah poder hacer el request que necesites.

Antes de que pienses en la ineficiencia de este patrn de seguridad, djame que te explique las ventajas antes.

Imaginemos que por algn motivo esa API KEY se encuentra comprometida y quieres sustituirla por una nueva para remediar la situacin, deberas hacer algo parecido a estos pasos:

1. Si es una APP "Mobile", tendrs que crear una nueva versin, subirla al store correspondiente, luego liberar esa nueva versin y esperar a que todos tus usuarios se descarguen esta versin. Es un proceso lento y no escalable.

2. Por otro lado si es "Web", te tocar hacer algo similar; liberar una nueva versin, invalidar el cach (cosa que muchos no hacen en sus procesos de CI/CD) de aplicaciones web y esperar a que tus usuarios te visiten nuevamente y el navegador les entregue la ltima versin desplegada.

Ambos escenarios como puedes observar podemos estar hablando de horas o das (en el caso de APP Mobile) que el atacante podr seguir utilizando nuestras credenciales para otros usos. Durante ese tiempo estaremos comprometiendo a nuestros usuarios tambin.

Ac es donde entra en juego un servicio de tercero para almacenar esta informacin , sin importar si tu aplicacin en frontend o backend el funcionamiento es el mismo (una AWS Lambda por ejemplo).

Un tercero almacena los datos sensibles y cada vez que los necesitemos los consultamos y los usamos. As cuando nuestros datos lleguen a estar comprometidos o como medida de nuestras polticas de seguridad continua cambiaremos en un solo lugar y en cuestin de segundos ya nuestros usuarios estarn remediados.

AWS Secrets manager como vault de datos

Concepto copiado textualmente de AWS:

AWS Secrets Manager es un servicio de administracin de datos confidenciales que ayuda a proteger el acceso a sus aplicaciones, servicios y recursos de TI. El servicio le permite alternar, administrar y recuperar fcilmente credenciales de bases de datos, claves de API y otros datos confidenciales durante todo su ciclo de vida. Con Secrets Manager, puede proteger y administrar los datos confidenciales utilizados para acceder a los recursos en la nube de AWS, en servicios de terceros y localmente.

Ac podemos ver que no tenemos la necesidad de crear una solucin propia para paliar con este problema de seguridad, utilizando un servicio como AWS Secrets Manager te quitas ese dolor de cabeza y lo mejor de todo que es compatible con motores de base de datos o API de terceros.

Resumamos a muy alto nivel el servicio como:

1. Guardas un Secret como le suelen llamar, en tu cuenta de AWS
2. Ese Secret es cifrado en reposo (nadie ms que t tendr acceso al dato plano), por lo tanto no hay forma de que quede expuesto.
3. Mediante API o SDK de AWS vas a poder consumirlo fcilmente
4. 100% integrable con otros servicios como IAM y AWS Cognito (ms adelante veremos el caso prctico).
5. Podrs entrar en tu consola de AWS y cambiar el valor las veces que quieras sin necesidad de informar a quien lo est consumiendo.

Este servicio te permite como desarrollador frontend hacer despliegue de tus aplicaciones sin necesidad de exponer datos sensibles durante el proceso de CI/CD ni durante el empaquetado final.

Cuntas veces no le preguntaste a tu colega por una API KEY de tercero y mandarla mediante chats? Sin hablar de cuando cambiaban y nadie te avisaba al respecto y solo recibas un 401 Unauthorized sin entender el motivo aparente.

Amazon Cognito: para acceso temporal a nuestros recursos dentro de AWS

Esta solucin parece perfecta para una aplicacin backend, ya que podemos limitar la conexin de forma centralizada hacia el secret manager, pero ac estamos hablando de aplicaciones frontend, por eso entra en juego el servicio de AWS Cognito.

Texto copiado de AWS:

Amazon Cognito es un servicio de administracin de acceso e identidad del cliente (IAM) rentable y centrado en el desarrollador. Proporciona un almacn de identidad seguro y opciones de federacin que pueden escalar a millones de usuarios.

Mediante AWS Cognito, vamos a poder otorgar credenciales temporales a nuestros usuarios annimos para que puedan consumir los secretos almacenados en AWS Secret Manager sin necesidad de exponer datos sensibles.

Las identidades de Amazon Cognito NO son credenciales. Se intercambian por credenciales utilizando la compatibilidad con las identidades web federadas de AWS Security Token Service (AWS STS).

En los siguientes pasos vamos a poder ver cmo lograr intercambiar identidades de AWS Cognito por las credenciales temporales (con acceso limitado) que podremos utilizar con AWS Secret Manager para finalmente consumir nuestra aplicacin de terceros.

Parece super largo el proceso, pero son simplemente unas lneas de cdigo.

Cdigo de ejemplo (Vue Js)

Primero debemos usar Identidades de AWS Cognito para acceder a nuestros recursos de AWS

Lo primero que vamos hacer es crear una identity pool dentro de las entidades federadas de AWS Cognito.

Link:
https://us-east-1.console.aws.amazon.com/cognito/federated?region=us-east-1

Definimos nuestro nombre para la Identity pool name y nos aseguramos que est habilitado la opcin de Enable access to unauthenticated identities. Creamos el Pool

Vamos a necesitar crear un ROL para los usuarios unauthenticated, con permisos de acceder a Secret Manager usando la siguiente Policy, para eso en el paso 2 hacer click en ver detalles.
El primer Rol lo dejamos por defecto, nos centraremos en el unauthenticated Role.

Editamos la Policy y aadimos lo siguiente dentro de statement:

{  "Sid": "VisualEditor0",  "Effect": "Allow",  "Action": "secretsmanager:GetSecretValue",  "Resource": "*"}

Dejamos la consola de AWS por un momento, y vamos a nuestro proyecto javascript. Para fines prcticos lo haremos en VueJs pero lo puedes hacer en cualquier librera (Angular, React, Vanilla JS).

Vamos a nuestro proyecto a instalamos la siguiente librera de AWS SDK V3, la cual nos permite instalar las dependencias de forma bastante granular, haciendo que nuestra aplicacin sea lo ms liviana posible:

npm i @aws-sdk/credential-providers

Esta librera nos va permitir intercambiar nuestro IdentityPool ID por unas credenciales basadas en accessKeyId y secretAccessKey

npm i @aws-sdk/client-cognito-identity

Es el cliente de Cognito

npm i @aws-sdk/client-secrets-manager

Nos permite acceder a AWS Secret Manager mediante su SDK, teniendo en texto plano del valor guardado en el secreto.

TIP:

Siempre que sea posible, utiliza la AWS SDK v3 Javascript, te quitar dolores de cabeza en el futuro, an cuando los ejemplos que veas en internet tengan la referencia a la SDK v2 (deprecated).

Siempre investigando el mtodo que quieras utilizar logrars encontrar la documentacin oficial.

Volvemos a la consola: en AWS Secret Manager para crear nuestro secreto (Secret)

En la parte de tipo seleccionamos otro (Other), y escribimos un texto plano

Y completamos los datos como la siguiente imagen

Damos siguiente y dejamos un nombre para nuestro secreto.

Una buena prctica es indicar como prefijo el ambiente seguido del nombre que le queremos dar por ejemplo para local/dev sera:
dev/google_maps_apikey

Ambiente te Testing/QA
test/google_maps_apikey

Ambiente Productivo
prod/google_maps_apikey

De esta forma tendremos granularidad en los permisos y/o personas que tengan acceso.

Importante: dale continuar, continuar hasta que te diga Guardar Secreto ya que los otros pasos son opcionales para este ejemplo.

Ya con esto tendremos nuestro secreto almacenado en la nube, encriptado y seguro.

(opcional)
Si queremos ver el valor que tenemos almacenado simplemente

• Vamos a la lista de secretos, seleccionamos el secreto .
• Dentro hacemos click en retrieve value.

(opcional ver el secreto)

Tomen nota del ARN

(lo utilizaremos ms adelante).
arn:aws:secretsmanager:us-east-1:058452286234:secret:dev/google_maps_apikey-mMforO

ltima parte, conectar todo Ya casi estamos!

Continuemos con nuestra app frontend, volvemos al editor de cdigo.

En pasos anteriores habamos instalado una serie de dependencias, nosotros vamos a estar utilizando la funcin fromCognitoIdentityPool la cual nos permite hacer el intercambio del ID por credenciales temporales como dijimos anteriormente.

Importamos todo lo que necesitamos en nuestro componente de la siguiente manera:

import { CognitoIdentityClient } from "@aws-sdk/client-cognito-identity";import { fromCognitoIdentityPool } from "@aws-sdk/credential-providers";import {  SecretsManagerClient,  GetSecretValueCommand,} from "@aws-sdk/client-secrets-manager";

(importacin usando mtodo ECMAScript 6 si ests aplicando esta config a un sistema legacy puedes buscar en la documentacin como importar usando ES5)

Para poder tener en texto plano nuestro secreto debemos crear un cliente y pasarle un comando con el secreto que queremos ver, algo como esto (NO USAR sta solucin en ambientes, meramente educativo. Ms adelante tienes la solucin)

Problema de seguridad encontrado:

NUNCA debemos colocar accessKeyId ni secretAccessKey
en nuestros cdigos, por eso esta solucion no es la ms recomendada.

Al principio de todo el capitulo estabamos hablando de Amazon Cognito, y ac es cuando entra en juego, vamos a cambiar nuestro identitypoolId por una credenciales temporales de la siguiente manera:

 const region = "us-east-1"; // Cambia esto a la regin donde est configurado tu recurso de Secret Manager      const identityPoolId = "us-east-1:1b5cc45e-490e-439e-8692-a27a54ae029a"; // Cambia esto a tu ID de Identity Poolconst tempCredentials = fromCognitoIdentityPool({        client: new CognitoIdentityClient({ region }),        identityPoolId,        clientConfig: { region },});

Te resumo lo que estamos usando:

CognitoIdentityClient
Para obtener las credenciales temporales desde AWS Identity Pool

fromCognitoIdentityPool
de @aws-sdk/credential-provider-cognito-identity para crear un proveedor de credenciales que utilizar el cliente de Secret Manager.

GetSecretValueCommand
Obtener el valor del secreto.

** Cdigo con la solucin final **

Repositorio GIT de ejemplo

https://github.com/hectorfernandez02/cloudparatodos-aws-secret-manager-vuejs

Conclusiones:

Recomendamos guardar informacin sensible, como claves de API, contraseas y nmeros de identificacin legal (C.I. / D.N.I / S.S.N), en Secret Manager en lugar de en variables de entorno. Por otro lado, se pueden guardar en variables de entorno otras configuraciones de la aplicacin, como la URL de la aplicacin, la configuracin del servidor, las claves de API pblicas (no nominadas), etc.