8 tip per rendere la tua applicazione Angular più sicura

Per garantire la sicurezza di un progetto Angular, dovresti concentrarti su diverse aree chiave che affrontano vulnerabilità comuni e best practice: vediamo quali!

TOC

• Utilizzo di CSP
• Utilizza HTTPS
• Validazione degli input
• Protezione da falsificazione di richieste tra siti (CSRF)
• Uso di Interceptor Angular
• Aggiorna le dipendenze
• Utilizza Route Guard
• Audit di sicurezza

Utilizzo di CSP

Applicare dei criteri come CSP per mitigare i rischi di XSS è fondamentale: significa, -ad esempio- utilizzare degli header specifici per far sì che il contenuto di una response venga caricato solo se l’origine della request coincide con il dominio dell’applicazione.

In particolare, Content-Security-Policy è il nome di un tipo di header che è possibile aggiungere alla response da inviare all’utente per migliorare la sicurezza della pagina o del contenuto.

Ad esempio, è possibile definire la direttiva default-src per il recupero di risorse quali JavaScript, immagini, CSS, font e via dicendo. Serve a spiegare qual è la sorgente che è possibile accettare: in questo esempio, solo se coincide con l’origine.

Content-Security-Policy: default-src 'self';

Ce ne sono anche di più specifiche che dipendono dal tipo di contenuto: style-src, img-src, script-src e via dicendo.

Utilizza HTTPS

Assicurati che tutte le comunicazioni avvengano tramite HTTPS per proteggere i dati in transito da intercettazioni e attacchi man-in-the-middle. Ciò include la configurazione del tuo server per reindirizzare il traffico HTTP a HTTPS.

Utilizzando un server come Nginx, ad esempio, è possibile eseguire il redirect con una regola come la seguente:

server {
    listen 80;
    server_name yourdomain.com;

    return 301 https://$host$request_uri; # Redirect all HTTP requests to HTTPS
}

Validazione degli input

Eseguire la convalida di tutti gli input degli utenti per prevenire attacchi è cruciale. Si possono utilizzare i Validators forniti dai Reactive Forms.

Un altro approccio consiste nella sanitizzazione: si tratta dell’ispezione da parte di Angular di un valore non attendibile, trasformandolo in un valore sicuro da inserire nel DOM. In molti casi, la sanificazione non modifica affatto un valore, ma piuttosto agisce sui possibili sospetti che ci sia della manipolazione. La sanificazione dipende dal contesto: un valore che è innocuo in CSS è potenzialmente pericoloso in un URL.

Il seguente snippet mostra come associare il valore di htmlSnippet. Una volta interpolato il contenuto di un elemento, viene associato alla proprietà innerHTML di un elemento:

<p class="e2e-inner-html-interpolated">{{ htmlSnippet }}</p>
<p>Result of binding to innerHTML:</p>
<p class="e2e-inner-html-bound" [innerHTML]="htmlSnippet"></p>

Il contenuto interpolato viene sempre sottoposto sempre a escape: il codice HTML non viene interpretato e il browser visualizza parentesi graffe nel contenuto di testo dell’elemento.

L’interpolazione in Angular è una tecnica utilizzata per incorporare dati dinamici nel modello HTML racchiudendo le espressioni tra doppie parentesi graffe ({{ }}), consentendo la visualizzazione delle proprietà dei componenti o dei valori calcolati direttamente nella vista.

Protezione da falsificazione di richieste tra siti (CSRF)

CSRF sta per Cross-site request forgery e si riferisce ad una vulnerabilità dove l’attancante inganna un utente autenticato inducendolo a eseguire azioni indesiderate su un’applicazione web attendibile. Queste azioni vengono eseguite utilizzando le credenziali della vittima, sfruttando la fiducia che l’applicazione ha nel browser dell’utente.

Per aggirare questo problema, puoi usare un token CSRF: questi token devono essere inviati con ogni richiesta di modifica dello stato (ad esempio, POST, PUT, DELETE) per verificare l’autenticità delle richieste.

Un esempio è il seguente: lato server, si può generare un token CSRF e inviarlo al client in un cookie, utilizzando una libreria come csurf:

const cookieParser = require('cookie-parser');
const csrf = require('csurf');

const csrfProtection = csrf({ cookie: true });

app.use(cookieParser());
app.use(csrfProtection);

app.get('/api/some-endpoint', (req, res) => {
    res.cookie('XSRF-TOKEN', req.csrfToken());
    res.send({ message: 'CSRF token set' });
});

Lato Angular, basta importare HttpClientXsrfModule nel tuo Angular module per abilitare la gestione di questo token:

import { NgModule } from '@angular/core';
import { HttpClientModule, HttpClientXsrfModule } from '@angular/common/http';

@NgModule({
    imports: [
        HttpClientModule,
        HttpClientXsrfModule.withOptions({
            cookieName: 'XSRF-TOKEN', // Nome del cookie che contiene il CSRF
            headerName: 'X-XSRF-TOKEN' // Nome del campo header
        })
    ],
})
export class AppModule {}

Ricordati di assicurarti che il server convalidi l’intestazione X-XSRF-TOKEN rispetto al cookie XSRF-TOKEN per ogni richiesta ed di escludere determinati percorsi (ad esempio, login e logout) dalla protezione CSRF se necessario, poiché potrebbero non richiedere azioni di modifica dello stato

Uso di Interceptor Angular

Utilizza gli Interceptor HTTP per aggiungere automaticamente token di autenticazione (come JWT) alle request, assicurando una comunicazione sicura con il backend e l’applicazione.

Un esempio di implementazione di AuthGuard è il seguente:

// auth.guard.ts
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, 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(
        next: ActivatedRouteSnapshot,
        state: RouterStateSnapshot): boolean {
        if (this.authService.isAuthenticated()) {
            return true; 
        } else {
            this.router.navigate(['/login']); 
            return false;
        }
    }
}

In questo articolo trovi l’esempio completo.

Aggiorna le dipendenze

Verifica che le versioni di Angular e le sue dipendenze siano aggiornate con le ultime patch e gli ultimi aggiornamenti di sicurezza. Controlla regolarmente le vulnerabilità nelle librerie di terze parti utilizzate nel tuo progetto sfruttando il comando npm audit o anche strumenti come Snyk o Retire.js.

Utilizza Route Guard

Utilizza Route Guard per limitare l’accesso a determinate parti della tua applicazione in base all’autenticazione e all’autorizzazione dell’utente, assicurandoti che solo gli utenti autorizzati possano accedere alle aree sensibili.

Qui trovi un esempio completo di come utilizzarle con Angular!

Audit di sicurezza

Esegui audit di sicurezza regolari della tua applicazione per identificare potenziali vulnerabilità e garantire la conformità alle best practice.

Eseguire un audit di sicurezza regolare per le tue applicazioni è fondamentale per identificare vulnerabilità e garantire la conformità alle best practice. Il processo inizia con l’identificazione dei componenti dell’applicazione e la valutazione della sicurezza attraverso analisi statica e dinamica. Si procede poi con la rivisitazione dei controlli di accesso e l’aggiornamento del software per evitare vulnerabilità note.

Utilizzare strumenti di sicurezza e mantenere la conformità con gli standard di sicurezza è altrettanto importante. Infine, la formazione del personale e la documentazione delle azioni correttive completano il ciclo di sicurezza.

Assicurati inoltre che l’applicazione sia conforme a standard come OWASP, CSA STAR, o ISO 27001 e di utilizzare degli strumenti di sicurezza e di gestione degli audit:

Ecco una lista di strumenti utili per eseguire audit di sicurezza, segnalando se sono a pagamento o open source. Qui riportiamo un breve elenco di strumenti per la sicurezza e per la gestione degli audit.

Strumenti per la sicurezza

1. SAST (Static Application Security Testing):
   • SonarQube (Open Source): Analizza il codice sorgente per identificare vulnerabilità.
   • Veracode (A pagamento): Offre analisi avanzate del codice per trovare vulnerabilità di sicurezza.
2. DAST (Dynamic Application Security Testing):
   • OWASP ZAP (Open Source): Simula attacchi dinamici per scoprire vulnerabilità operative.
   • Acunetix (A pagamento): Identifica vulnerabilità web e applicative.
3. SCA (Software Composition Analysis):
   • OWASP Dependency-Check (Open Source): Analizza le librerie open source per individuare vulnerabilità note.
   • Snyk (A pagamento): Gestisce le dipendenze e identifica vulnerabilità nelle librerie.
4. RASP (Runtime Application Self-Protection):
   • OWASP ESAPI (Open Source): Offre protezione in tempo reale, ma è meno comune per RASP.
   • Imperva RASP (A pagamento): Protegge le applicazioni in esecuzione da attacchi reali.

Strumenti per la gestione degli audit

1. SafetyCulture (iAuditor) (A pagamento): Ideale per la gestione delle ispezioni e la reportistica in tempo reale tramite checklist personalizzabili.
2. MetricStream (A pagamento): Offre approfondimenti basati sull’IA per audit basati sul rischio.
3. Netwrix (A pagamento): Riduce i tempi di preparazione per gli audit e offre sicurezza end-to-end.
4. 626 Suite Audit (A pagamento): Gestisce verifiche e sopralluoghi tramite checklist personalizzate su dispositivi mobili.

Altri strumenti

1. Donesafe (A pagamento): Gestisce rischi e conformità in modo proattivo, supportando vari standard ISO.
2. Zucchetti Software (A pagamento): Gestisce ispezioni e checklist per assicurare la conformità alle normative.

Strumenti Open Source per audit di sicurezza

• OWASP ZAP: Per test dinamici di sicurezza.
• SonarQube: Per analisi statica del codice.
• OWASP Dependency-Check: Per analizzare le dipendenze delle librerie.