Buenas Prácticas para la Seguridad en el Desarrollo Frontend
La seguridad en el desarrollo frontend es crucial para proteger tanto a los usuarios como a la aplicación de posibles vulnerabilidades y ataques, como los ataques de Cross-Site Scripting (XSS). Nosotros como desarrolladores frontend debemos de reducir al máximo estas posibles vulnerabilidades.
Primero entendamos: ¿Qué es Cross-Site Scripting (XSS)?
Es un tipo de ataque informático que puede permitir a una tercera persona inyectar scripts maliciosos en páginas web visitadas por un usuario. Estos scripts pueden ser en código JavaScript o en otro lenguaje similar. Se puede evitar usando medidas como CSP, política del mismo origen, etcétera.
A continuación te voy a presentar algunas buenas prácticas y medidas de seguridad que se deben tener en cuenta durante el desarrollo frontend:
1. Validación y Escape de Datos
Validar y escapar los datos antes de renderizarlos en el navegador es esencial para prevenir ataques XSS.
Buenas Prácticas:
- Utilizar funciones de escape de HTML proporcionadas por los frameworks o bibliotecas (por ejemplo, {{ data | escapeHTML }} en Angular).
- Utilizar sanitizadores de HTML para eliminar cualquier código malicioso.
- Validar y filtrar los datos del lado del servidor antes de enviarlos al cliente.
Ejemplo en Angular:
Uso de la directiva [innerHTML] para evitar XSS
<div [innerHTML]=”data | escapeHTML”></div>
Link de documentación oficial de angular donde puedes aprender sobre cómo implementar la sanitización de las rutas https://angular.io/guide/security
2. Configuración de Encabezados de Seguridad
Configurar correctamente los encabezados de seguridad en la aplicación frontend puede ayudar a mitigar varios tipos de ataques, incluidos los XSS y los ataques de inyección de contenido.
Buenas Prácticas:
- Configurar encabezados HTTP como Content-Security-Policy (CSP), X-Content-Type-Options y X-Frame-Options para restringir el comportamiento de la aplicación.
- Establecer encabezados de respuesta adecuados para prevenir ataques de Clickjacking y MIME Sniffing.
Ejemplo:
// Configuración de CSP en el servidor
Content-Security-Policy: default-src ‘self’;
3. Uso Seguro de Bibliotecas y Dependencias
Utilizar bibliotecas y dependencias seguras y mantenerlas actualizadas es fundamental para reducir la superficie de ataque.
Buenas Prácticas:
- Utilizar herramientas de análisis de dependencias para identificar vulnerabilidades en las bibliotecas de terceros.
- Mantener actualizadas todas las bibliotecas y dependencias utilizadas en el proyecto.
- Evitar incluir bibliotecas de origen desconocido o sin mantenimiento activo.
Ejemplo:
Ejecutando el comando npm audit podrás obtener un resumen de cuales son las vulnerabilidades que tiene tu proyecto según las dependencias instaladas y que puedes ver en tu package.json. Además con el comando npm audit fix podras solucionar estas vulnerabilidades automáticamente.
Link para visualizar la documentacion del comando npm audit: https://docs.npmjs.com/cli/v10/commands/npm-audit
https://www.todojs.com/npm-audit-avisa-de-vulnerabilidades/
// Archivo package.json con dependencias actualizadas
{
“dependencies”: {
“react”: “¹⁷.0.2”,
“express”: “⁴.17.1” }
}
4. Protección contra Ataques CSRF
Descripción: Implementar protección contra ataques de falsificación de solicitudes entre sitios (CSRF) es importante para prevenir acciones no autorizadas realizadas en nombre de un usuario autenticado.
Buenas Prácticas:
- Utilizar tokens anti-CSRF y enviarlos con cada solicitud que modifique datos en el servidor.
- Validar el origen de la solicitud y verificar que provenga de un dominio confiable.
- Implementar medidas de seguridad en el backend para detectar y prevenir ataques CSRF.
Ejemplo:
// Generación de token anti-CSRF en el backend
const token = generateCSRFToken();
res.cookie(‘csrfToken’, token, { httpOnly: true });
5. Educación y Concienciación sobre Seguridad
Descripción: Fomentar la educación y la concienciación sobre seguridad entre los desarrolladores y el equipo de desarrollo es crucial para identificar y mitigar vulnerabilidades desde el principio.
Buenas Prácticas:
- Proporcionar formación regular sobre las últimas amenazas de seguridad y las mejores prácticas de desarrollo seguro.
- Realizar revisiones de código periódicas para identificar y corregir posibles problemas de seguridad.
- Promover una cultura de seguridad dentro del equipo, fomentando la responsabilidad compartida en la protección de la aplicación.
Conclusión
Aca te dejo el link de la documentación oficial de Google sobre como evitar estos ataques y vulnerabilidades https://web.dev/articles/trusted-types
La seguridad en el desarrollo frontend es una responsabilidad compartida que requiere un enfoque proactivo y continuo para identificar, mitigar y prevenir vulnerabilidades. Al seguir estas buenas prácticas y mantenerse actualizado sobre las últimas amenazas de seguridad, los desarrolladores pueden contribuir a crear aplicaciones más seguras y protegidas contra ataques malintencionados.
