Vue Academy · Lezione

Prevenzione degli attacchi XSS in Vue

Escaping automatico di Vue, rischi di v-html, DOMPurify per la sanitizzazione, trusted types.

Prevenzione degli attacchi XSS in Vue è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 1 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'è XSS

Il Cross-Site Scripting (XSS) è un attacco in cui uno script dannoso viene inserito in una pagina ed eseguito nel browser di un altro utente. Può sottrarre cookie, token e dati. Vue offre protezione predefinita, ma alcuni schemi possono riaprire la vulnerabilità.

Vue esegue automaticamente l'escape delle interpolazioni

Il testo contenuto nell'interpolazione mustache {{ }} viene sottoposto automaticamente all'escape HTML. Una stringa dell'utente contenente tag viene visualizzata come testo innocuo, non eseguita.

<!-- userInput = "<script>alert(1)</script>" -->
<p>{{ userInput }}</p>
<!-- renders the literal text, no script runs -->

Anche il binding degli attributi è sicuro

Anche il binding con v-bind / :attr esegue l'escape dei valori, quindi le virgolette inserite non possono uscire dall'attributo e inserire gestori di eventi.

<div :title="userInput">Hover me</div>

Il rischio di v-html

v-html imposta direttamente innerHTML. Non esegue l'escape, quindi qualsiasi markup, inclusi script e gestori di eventi, viene visualizzato come HTML attivo.

<!-- DANGEROUS with untrusted input -->
<div v-html="userInput"></div>

Come viene sfruttato v-html

Anche senza un tag script, l'HTML dell'attaccante può eseguire codice tramite attributi di gestione degli eventi o payload img onerror.

// attacker-supplied value
const userInput = "<img src=x onerror=stealCookies()>";

Regola: non usare mai v-html con input dell'utente

La regola più semplice è non passare mai contenuti non attendibili a v-html. Utilizzi invece l'interpolazione semplice, che esegue l'escape, ogni volta che la sorgente è controllata dall'utente.

Quando è necessario visualizzare HTML

A volte è realmente necessario usare HTML avanzato, ad esempio per il contenuto di un CMS o l'output di Markdown. In questo caso è necessario sanificare l'HTML prima di associarlo.

Sanificare con DOMPurify

DOMPurify rimuove i tag e gli attributi pericolosi mantenendo la formattazione sicura. Lo installi e sanifichi il contenuto prima di usare v-html.

npm install dompurify

Sanificare prima del binding

Elabori il valore con DOMPurify.sanitize all'interno di una proprietà computed, quindi associ il risultato ripulito.

import DOMPurify from "dompurify";
import { computed } from "vue";

const safeHtml = computed(() =>
  DOMPurify.sanitize(props.rawHtml)
);
// template: <div v-html="safeHtml"></div>

Configurare i tag consentiti

Può limitare l'elenco degli elementi consentiti, in modo che sopravvivano alla sanificazione solo i tag previsti.

DOMPurify.sanitize(html, {
  ALLOWED_TAGS: ["b", "i", "em", "strong", "a", "p"],
  ALLOWED_ATTR: ["href"]
});

Altre sorgenti da non considerare attendibili

Non consideri attendibili nemmeno gli URL: un attributo javascript: in un link associato può eseguire codice. Convalidi o sanifichi gli href e non costruisca mai sorgenti dinamiche <script> a partire da dati dell'utente.

// reject dangerous protocols
const safe = /^https?:/.test(url) ? url : "#";

Verifica rapida

È necessario visualizzare HTML inviato dagli utenti. Qual è l'approccio sicuro?

Riepilogo

Vue esegue automaticamente l'escape dell'interpolazione {{ }} e dei binding degli attributi, neutralizzando la maggior parte degli attacchi XSS. L'eccezione pericolosa è v-html, che visualizza HTML non elaborato. Non vi passi mai direttamente l'input dell'utente; quando è necessario usare HTML avanzato, lo sanifichi prima con DOMPurify e consideri non attendibili anche gli URL forniti dall'utente.

Domande Frequenti

La lezione «Prevenzione degli attacchi XSS in Vue» è gratuita?

Sì — il testo completo di «Prevenzione degli attacchi XSS in 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 «Prevenzione degli attacchi XSS in Vue»?

Escaping automatico di Vue, rischi di v-html, DOMPurify per la sanitizzazione, trusted types. 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 1 di 4.

Quanto tempo richiede la lezione «Prevenzione degli attacchi XSS in 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