Vue Academy · Lezione

Content Security Policy (CSP) con Vue

Header CSP, script basati su nonce, policy basate su hash, configurazione CSP di Vite.

Content Security Policy (CSP) con Vue è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.

Che cos'è la CSP

La Content Security Policy è un'intestazione di risposta HTTP che indica al browser quali sorgenti di script, stili, immagini e connessioni sono consentite. È una solida seconda linea di difesa contro XSS: anche gli script inseriti vengono bloccati se la loro sorgente non è consentita.

L'intestazione

La CSP viene fornita tramite l'intestazione di risposta Content-Security-Policy. Ogni direttiva elenca le sorgenti consentite per un tipo di risorsa.

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

Limitare le sorgenti degli script

La direttiva script-src controlla da dove possono essere caricati gli script. Limitarla a 'self' blocca gli script inline e di terze parti che un attaccante potrebbe inserire.

Content-Security-Policy: script-src 'self' https://cdn.trusted.com;

Evitare unsafe-inline

'unsafe-inline' consente gli script inline e gli attributi dei gestori di eventi, esattamente ciò che sfruttano gli attacchi XSS. Una policy solida lo omette, così il codice inline inserito non viene eseguito.

Evitare unsafe-eval

'unsafe-eval' consente eval e il costruttore Function. La build runtime di Vue 3 non ne ha bisogno, perché i template sono precompilati, quindi può e dovrebbe ometterlo.

Script inline basati su nonce

Quando è realmente necessario uno script inline, gli assegni un nonce casuale per ogni risposta e inserisca quel nonce nella policy. Vengono eseguiti solo gli script che contengono il nonce corrispondente.

<!-- header includes: script-src 'nonce-abc123' -->
<script nonce="abc123">
  // allowed because nonce matches
</script>

Perché i nonce sono migliori di unsafe-inline

Un nonce è imprevedibile e cambia a ogni risposta, quindi un attaccante che inserisce uno script non può indovinarlo. In questo modo gli script inline continuano a funzionare senza il rischio generale di unsafe-inline.

CSP e stili di Vue

Vue e molte librerie UI inseriscono gli stili durante l'esecuzione. Può consentirli tramite style-src usando un nonce o un hash, oppure estrarre il CSS in file, così è sufficiente style-src 'self'.

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

Plugin Vite CSP Nonce per lo sviluppo

Il server di sviluppo di Vite inserisce script, che possono entrare in conflitto con una CSP rigida. Un plugin CSP nonce applica un nonce corrispondente ai tag inseriti da Vite durante lo sviluppo.

// vite.config.ts
import { defineConfig } from "vite";

export default defineConfig({
  html: {
    cspNonce: "DEV_NONCE"
  }
});

connect-src per le API

Limiti con connect-src i destinatari a cui l'app può inviare richieste, così il codice inserito non può esfiltrare dati verso un dominio controllato dall'attaccante.

Content-Security-Policy: connect-src 'self' https://api.example.com;

Modalità Report-Only

Introduca la CSP in modo sicuro con Content-Security-Policy-Report-Only, che segnala le violazioni senza bloccarle, consentendole di perfezionare la policy prima di applicarla.

Content-Security-Policy-Report-Only: default-src 'self'; report-uri /csp-report;

Verifica rapida

Quale valore di una direttiva CSP è necessario evitare per mantenere forte la protezione contro XSS?

Riepilogo

La CSP è un'intestazione HTTP che limita le sorgenti consentite per script, stili e connessioni, bloccando il codice inserito anche se un attacco XSS riesce a passare. Eviti unsafe-inline e unsafe-eval; utilizzi nonce diversi per ogni risposta per gli script inline necessari e un plugin Vite CSP nonce durante lo sviluppo. Introduca la policy in modalità Report-Only prima di applicarla.

Domande Frequenti

La lezione «Content Security Policy (CSP) con Vue» è gratuita?

Sì — il testo completo di «Content Security Policy (CSP) con Vue» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 4 lezioni in totale.

Cosa imparerò in «Content Security Policy (CSP) con Vue»?

Header CSP, script basati su nonce, policy basate su hash, configurazione CSP di Vite. Eserciti Vue Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Vue Academy?

Non è richiesta alcuna esperienza precedente. Vue Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.

Quanto tempo richiede la lezione «Content Security Policy (CSP) con Vue»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Vue Academy?

Sì. Ogni lezione Vue Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Vue Academy