Vue Academy · Lekcja

Content Security Policy (CSP) w Vue

Nagłówki CSP, skrypty oparte na nonce, polityki oparte na hashach oraz konfiguracja CSP w Vite.

Content Security Policy (CSP) w Vue to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 2 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 CSP

Content Security Policy to nagłówek odpowiedzi HTTP, który informuje przeglądarkę, z jakich źródeł można ładować skrypty, style i obrazy oraz z jakimi źródłami można się łączyć. Stanowi silną drugą linię obrony przed XSS — nawet wstrzyknięte skrypty zostaną zablokowane, jeśli ich źródło nie jest dozwolone.

Nagłówek

CSP jest dostarczana za pomocą nagłówka odpowiedzi Content-Security-Policy. Każda dyrektywa określa dozwolone źródła dla danego typu zasobu.

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

Ograniczanie źródeł skryptów

Dyrektywa script-src określa, skąd można ładować skrypty. Ograniczenie jej do 'self' blokuje skrypty wbudowane i skrypty firm trzecich, które mógłby wstrzyknąć atakujący.

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

Unikanie unsafe-inline

'unsafe-inline' zezwala na skrypty wbudowane i atrybuty procedur obsługi zdarzeń — dokładnie te mechanizmy, które wykorzystują ataki XSS. Silna polityka pomija tę wartość, dzięki czemu wstrzyknięty kod wbudowany nie zostanie uruchomiony.

Unikanie unsafe-eval

'unsafe-eval' zezwala na użycie eval i konstruktora Function. Kompilacja środowiska uruchomieniowego Vue 3 nie wymaga tej wartości (szablony są wstępnie kompilowane), dlatego można i należy ją pominąć.

Skrypty wbudowane oparte na nonce

Gdy skrypt wbudowany jest rzeczywiście potrzebny, należy nadać mu losowy nonce dla każdej odpowiedzi i umieścić ten nonce w polityce. Wykonają się tylko skrypty zawierające pasujący nonce.

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

Dlaczego nonce są lepsze od unsafe-inline

Nonce jest nieprzewidywalny i zmienia się przy każdej odpowiedzi, więc atakujący, który wstrzyknie skrypt, nie może go odgadnąć. Dzięki temu skrypty wbudowane nadal działają bez ogólnego zagrożenia związanego z unsafe-inline.

CSP i style Vue

Vue i wiele bibliotek interfejsu użytkownika wstrzykuje style w czasie działania. Należy zezwolić na nie za pomocą style-src z nonce lub hashem albo wyodrębnić CSS do plików, aby wystarczyło style-src 'self'.

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

Wtyczka Vite CSP Nonce na potrzeby programowania

Serwer deweloperski Vite wstrzykuje skrypty, co może kolidować ze ścisłą polityką CSP. Wtyczka CSP nonce dodaje pasujący nonce do znaczników wstrzykiwanych przez Vite podczas programowania.

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

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

connect-src dla API

Należy ograniczyć za pomocą connect-src miejsca, z których aplikacja może pobierać dane, aby wstrzyknięty kod nie mógł wyprowadzać danych do domeny kontrolowanej przez atakującego.

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

Tryb Report-Only

Politykę CSP można bezpiecznie wdrażać za pomocą Content-Security-Policy-Report-Only, który zgłasza naruszenia bez ich blokowania. Dzięki temu można dostosować politykę przed jej wyegzekwowaniem.

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

Szybkie sprawdzenie

Jakiej wartości dyrektywy CSP należy unikać, aby ochrona przed XSS pozostała skuteczna?

Podsumowanie

CSP to nagłówek HTTP ograniczający dozwolone źródła skryptów, stylów i połączeń, który blokuje wstrzyknięty kod nawet wtedy, gdy atak XSS się powiedzie. Należy unikać unsafe-inline i unsafe-eval, używać nonce generowanych dla każdej odpowiedzi w przypadku wymaganych skryptów wbudowanych oraz korzystać podczas programowania z wtyczki Vite CSP nonce. Przed egzekwowaniem polityki należy wdrożyć ją w trybie Report-Only.

Często zadawane pytania

Czy lekcja „Content Security Policy (CSP) w Vue” jest bezpłatna?

Tak — pełny tekst „Content Security Policy (CSP) 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 „Content Security Policy (CSP) w Vue”?

Nagłówki CSP, skrypty oparte na nonce, polityki oparte na hashach oraz konfiguracja CSP w Vite. Ć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 2 z 4.

Ile czasu zajmuje lekcja „Content Security Policy (CSP) 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