Vue Academy · Lekcja

Zapobieganie XSS w Vue

Automatyczne escapowanie w Vue, zagrożenia związane z v-html, czyszczenie za pomocą DOMPurify oraz trusted types.

Zapobieganie XSS w Vue to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 4 lekcji w sumie.

Czym jest XSS

Cross-Site Scripting (XSS) to atak polegający na wstrzyknięciu złośliwego skryptu do strony, który następnie uruchamia się w przeglądarce innego użytkownika. Może on wykraść pliki cookie, tokeny i dane. Vue domyślnie zapewnia ochronę, ale niektóre wzorce mogą ponownie otworzyć tę furtkę.

Vue automatycznie zabezpiecza interpolację

Tekst wewnątrz interpolacji mustache {{ }} jest automatycznie zamieniany na bezpieczny tekst HTML. Ciąg użytkownika zawierający znaczniki zostaje wyświetlony jako nieszkodliwy tekst, a nie wykonany.

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

Wiązanie atrybutów również jest bezpieczne

Wiązanie za pomocą v-bind / :attr również zabezpiecza wartości, więc wstrzyknięte cudzysłowy nie mogą wydostać się poza atrybut i wstrzyknąć procedur obsługi.

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

Zagrożenia związane z v-html

v-html ustawia bezpośrednio właściwość innerHTML. Nie wykonuje żadnego zabezpieczenia, więc wszelkie znaczniki — w tym skrypty i procedury obsługi zdarzeń — są renderowane jako aktywny HTML.

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

Jak wykorzystywane jest v-html

Nawet bez znacznika skryptu kod HTML przygotowany przez atakującego może uruchomić kod za pośrednictwem atrybutów procedur obsługi zdarzeń lub danych typu img onerror.

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

Zasada: nigdy nie przekazuj danych użytkownika do v-html

Najprostsza zasada brzmi: nigdy nie przekazuj niezaufanej treści do v-html. Gdy źródłem danych jest użytkownik, zawsze używaj zwykłej interpolacji, która zabezpiecza tekst.

Gdy trzeba renderować HTML

Czasami rzeczywiście potrzebny jest rozbudowany HTML, na przykład treść z systemu CMS lub wynik konwersji Markdown. W takim przypadku przed powiązaniem treści należy ją oczyścić.

Oczyszczanie za pomocą DOMPurify

DOMPurify usuwa niebezpieczne znaczniki i atrybuty, zachowując bezpieczne formatowanie. Należy je zainstalować i oczyścić treść przed użyciem v-html.

npm install dompurify

Najpierw oczyść, potem powiąż

Wartość należy przepuścić przez DOMPurify.sanitize w właściwości computed, a następnie powiązać oczyszczony wynik.

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

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

Konfigurowanie dozwolonych znaczników

Można ograniczyć listę dozwolonych elementów, aby po oczyszczaniu pozostały tylko oczekiwane znaczniki.

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

Inne źródła, którym nie należy ufać

Nie należy ufać również adresom URL: odwołanie javascript: w powiązanym łączu może wykonać kod. Należy sprawdzać lub oczyszczać wartości href i nigdy nie tworzyć dynamicznych źródeł <script> na podstawie danych użytkownika.

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

Szybkie sprawdzenie

Trzeba renderować kod HTML przesłany przez użytkownika. Jakie podejście jest bezpieczne?

Podsumowanie

Vue automatycznie zabezpiecza interpolację {{ }} i wiązania atrybutów, neutralizując większość ataków XSS. Niebezpiecznym wyjątkiem jest v-html, który renderuje nieprzetworzony HTML. Nigdy nie należy przekazywać do niego bezpośrednio danych użytkownika; gdy potrzebny jest rozbudowany HTML, trzeba najpierw oczyścić go za pomocą DOMPurify, a także nie ufać adresom URL dostarczanym przez użytkownika.

Często zadawane pytania

Czy lekcja „Zapobieganie XSS w Vue” jest bezpłatna?

Tak — pełny tekst „Zapobieganie XSS w Vue” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Zapobieganie XSS w Vue”?

Automatyczne escapowanie w Vue, zagrożenia związane z v-html, czyszczenie za pomocą DOMPurify oraz trusted types. Ćwiczysz Vue Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Vue Academy?

Nie wymagamy żadnego doświadczenia. Vue Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „Zapobieganie XSS w Vue”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Vue Academy?

Tak. Każda lekcja Vue Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do Vue Academy