El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Millors pràctiques de seguretat

Següent ►
►

En aquest tema, explorarem les millors pràctiques de seguretat per a aplicacions Angular. La seguretat és un aspecte crític en el desenvolupament de qualsevol aplicació web, i Angular proporciona diverses eines i tècniques per ajudar a protegir les teves aplicacions contra vulnerabilitats comunes.

Continguts

  1. Introducció a la seguretat en Angular
  2. Protecció contra Cross-Site Scripting (XSS)
  3. Autenticació i autorització
  4. Protecció contra Cross-Site Request Forgery (CSRF)
  5. Gestió de dades sensibles
  6. Millors pràctiques de configuració
  7. Exercicis pràctics

Introducció a la seguretat en Angular

Angular proporciona diverses eines i mecanismes per ajudar a protegir les aplicacions web. Algunes de les vulnerabilitats més comunes que cal tenir en compte són:

  • Cross-Site Scripting (XSS)
  • Cross-Site Request Forgery (CSRF)
  • Injecció de codi
  • Fugida de dades sensibles

Protecció contra Cross-Site Scripting (XSS)

El XSS és una de les vulnerabilitats més comunes en aplicacions web. Angular té mecanismes integrats per prevenir XSS, com ara la sanitització automàtica de dades.

Exemples pràctics

Interpolació segura

Angular sanititza automàticament les dades interpolades per prevenir XSS.

<p>{{ userInput }}</p>

Enllaç de propietats

L'enllaç de propietats també és segur per defecte.

<img [src]="userImageUrl">

Consells addicionals

  • Evita utilitzar innerHTML directament. Si és necessari, utilitza el servei DomSanitizer per sanititzar el contingut.
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

constructor(private sanitizer: DomSanitizer) {}

getSanitizedHtml(html: string): SafeHtml {
  return this.sanitizer.bypassSecurityTrustHtml(html);
}

Autenticació i autorització

L'autenticació i l'autorització són fonamentals per assegurar que només els usuaris autoritzats puguin accedir a certes parts de l'aplicació.

Implementació d'autenticació

Utilitza serveis per gestionar l'estat d'autenticació.

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  private isAuthenticated = false;

  constructor(private router: Router) {}

  login(username: string, password: string): boolean {
    // Implementa la lògica d'autenticació
    this.isAuthenticated = true;
    return this.isAuthenticated;
  }

  logout(): void {
    this.isAuthenticated = false;
    this.router.navigate(['/login']);
  }

  isLoggedIn(): boolean {
    return this.isAuthenticated;
  }
}

Protecció de rutes

Utilitza guàrdies de rutes per protegir les rutes que requereixen autenticació.

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { AuthService } from './auth.service';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {

  constructor(private authService: AuthService, private router: Router) {}

  canActivate(): boolean {
    if (this.authService.isLoggedIn()) {
      return true;
    } else {
      this.router.navigate(['/login']);
      return false;
    }
  }
}

Protecció contra Cross-Site Request Forgery (CSRF)

El CSRF és un atac que força a un usuari autenticat a executar accions no desitjades en una aplicació web en la qual està autenticat.

Implementació de protecció CSRF

Angular no proporciona protecció CSRF per defecte, però pots implementar-la al servidor i assegurar-te que el client Angular envia els tokens CSRF correctament.

import { HttpClient, HttpHeaders } from '@angular/common/http';

constructor(private http: HttpClient) {}

sendPostRequest(data: any) {
  const headers = new HttpHeaders({
    'X-CSRF-Token': 'token-value'
  });

  return this.http.post('/api/data', data, { headers });
}

Gestió de dades sensibles

És important gestionar les dades sensibles amb cura per evitar fugides d'informació.

Consells per gestionar dades sensibles

  • No emmagatzemis dades sensibles en el client (per exemple, en localStorage).
  • Utilitza HTTPS per encriptar les dades en trànsit.
  • Sanititza totes les dades d'entrada i sortida.

Millors pràctiques de configuració

Configura l'aplicació Angular per millorar la seguretat.

Deshabilitar el mode de desenvolupament

Assegura't de deshabilitar el mode de desenvolupament en producció.

import { enableProdMode } from '@angular/core';

if (environment.production) {
  enableProdMode();
}

Configurar el Content Security Policy (CSP)

Configura el CSP per prevenir atacs XSS i altres vulnerabilitats.

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline';">

Exercicis pràctics

Exercici 1: Implementar autenticació bàsica

  1. Crea un servei d'autenticació que gestioni l'estat d'autenticació.
  2. Implementa una guàrdia de rutes per protegir les rutes que requereixen autenticació.
  3. Crea un formulari de login i connecta'l amb el servei d'autenticació.

Exercici 2: Protegir una aplicació contra XSS

  1. Identifica les parts de l'aplicació on es mostren dades d'usuari.
  2. Assegura't que totes les dades d'usuari es mostren de manera segura utilitzant interpolació i enllaç de propietats.

Exercici 3: Configurar CSP

  1. Configura el Content Security Policy (CSP) per a la teva aplicació Angular.
  2. Prova l'aplicació per assegurar-te que el CSP no trenca cap funcionalitat.

Conclusió

En aquesta secció, hem explorat diverses tècniques i millors pràctiques per assegurar les aplicacions Angular. Hem après a protegir-nos contra vulnerabilitats comunes com XSS i CSRF, a implementar autenticació i autorització, i a gestionar dades sensibles de manera segura. A més, hem vist com configurar l'aplicació per millorar la seguretat. Seguint aquestes pràctiques, podràs desenvolupar aplicacions Angular més segures i robustes.

◄ Anterior
◄
Següent ►
►

Curs d'Angular

Mòdul 1: Introducció a Angular

Mòdul 2: Components d'Angular

Mòdul 3: Enllaç de dades i directives

Mòdul 4: Serveis i injecció de dependències

Mòdul 5: Enrutament i navegació

Mòdul 6: Formularis a Angular

Mòdul 7: Client HTTP i observables

Mòdul 8: Gestió d'estat

Mòdul 9: Proves a Angular

Mòdul 10: Conceptes avançats d'Angular

Mòdul 11: Desplegament i millors pràctiques

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats