Przejdź do głównej zawartości
Codex13

15. Bezpieczeństwo w React

O czym jest ta prezentacja?

Dział zatytułowany „O czym jest ta prezentacja?”

Bezpieczeństwo w React

React domyślnie chroni przed XSS (escaping wszystkich wartości w JSX), ale są pułapki: dangerouslySetInnerHTML, niezabezpieczone URL-e, API keys w kodzie. Bezpieczna aplikacja to nie tylko działa — to nie daje się zhakować.

Kluczowe pytania do odpowiedzi

Dział zatytułowany „Kluczowe pytania do odpowiedzi”
  1. Co to jest XSS? — Cross-Site Scripting: wstrzyknięcie złośliwego JS w dane wyświetlane użytkowniku
  2. Jak React chroni przed XSS? — Automatyczny escaping: <script> w JSX staje się &lt;script&gt;
  3. Dlaczego dangerouslySetInnerHTML jest niebezpieczne? — Omija escaping — wstawia raw HTML
  4. Jak chronić API keys? — Zmienne środowiskowe na backendzie, NIE w kodzie frontendu

Zakres merytoryczny

Dział zatytułowany „Zakres merytoryczny”
  1. XSS — co to jest — atak, jak działa, przykład
  2. React auto-escaping — dlaczego JSX jest bezpieczny domyślnie
  3. dangerouslySetInnerHTML — kiedy używać, jak sanitizować (DOMPurify)
  4. API keys w frontend — dlaczego NIGDY nie w kodzie JS
  5. HTTPS i Content Security Policy — podstawy

Wymagane elementy wizualne

Dział zatytułowany „Wymagane elementy wizualne”

Schemat

Diagram ataku XSS: użytkownik wpisuje <script>alert('hack')</script> → formularz → baza → wyświetlenie bez sanitacji → uruchomienie JS atakującego. Pokaż jak React/sanitacja blokuje ten flow.

Przykład kodu JSX

dangerouslySetInnerHTML bez i z DOMPurify. Pokaż różnicę w wynikowym HTML.

Warianty realizacji

Dział zatytułowany „Warianty realizacji”
  • Co to jest XSS z przykładem
  • React auto-escaping — dlaczego bezpieczny
  • Niebezpieczne praktyki: API keys w kodzie

Forma: 10 slajdów, 10 minut

Ocena: 3.0

Scenariusze i przykłady

Dział zatytułowany „Scenariusze i przykłady”

Przykład 1 — Auto-escaping w JSX

Dział zatytułowany „Przykład 1 — Auto-escaping w JSX”
// Bezpieczne: React automatycznie escapuje
const userInput = '<script>alert("hack!")</script>';
return <p>{userInput}</p>;
// W DOM: <p>&lt;script&gt;alert("hack!")&lt;/script&gt;</p>
// Widoczny jako tekst, nie wykonywany!


// NIEBEZPIECZNE: omija escaping
return <p dangerouslySetInnerHTML={{ __html: userInput }} />;
// W DOM: <script>alert("hack!")</script> — WYKONA SIĘ!


// BEZPIECZNE z sanitacją:
import DOMPurify from 'dompurify';
const clean = DOMPurify.sanitize(userInput);
return <p dangerouslySetInnerHTML={{ __html: clean }} />;

Przykład 2 — API keys — jak to robić

Dział zatytułowany „Przykład 2 — API keys — jak to robić”
// ŹLE: API key w kodzie (widoczny dla każdego!)
const API_KEY = 'sk-1234567890abcdef';  // COMMIT TO GIT = DISASTER
fetch(`https://api.openai.com/v1/completions`, {
  headers: { Authorization: `Bearer ${API_KEY}` }
});


// DOBRZE: zmienna środowiskowa (Vite)
// .env.local (NIGDY nie commituj do git!)
// VITE_API_URL=https://my-backend.com/api


// W kodzie React (tylko publiczne adresy, NIE tajne klucze):
const API_URL = import.meta.env.VITE_API_URL;
// Tajne klucze tylko na BACKENDZIE — React/frontend to publiczny kod!

Wskazówki do wystąpienia

Dział zatytułowany „Wskazówki do wystąpienia”

Demo XSS

Pokażcie stronę bez sanitacji gdzie wpisanie <img src=x onerror=alert(1)> powoduje alert. Potem pokażcie tę samą stronę z React — nic się nie dzieje. Klasa to zapamiętają!

GitHub leak

Wspomnijcie o prawdziwych incydentach: programiści commitowali klucze AWS do GitHub i dostawali rachunek na tysiące dolarów w ciągu minut. Boty skanują GitHub 24/7.

Zasoby

Dział zatytułowany „Zasoby”
OWASP Top 10 Najważniejsze zagrożenia bezpieczeństwa webowego.
DOMPurify Biblioteka do sanitacji HTML.

Do dzieła!

Dział zatytułowany „Do dzieła!”

Bezpieczeństwo to odpowiedzialność każdego developera!

Jeden bug bezpieczeństwa może kosztować firmę miliony. Ten temat wyróżni Was jako developerów świadomych zagrożeń!