39. Bezpieczeństwo w React — XSS i ochrona API keys

Bezpieczeństwo React — ochrona aplikacji

React domyślnie chroni przed XSS (Cross-Site Scripting) przez automatyczny escaping wartości w JSX. Pułapki bezpieczeństwa: dangerouslySetInnerHTML bez sanitacji, API keys w kodzie frontend, brak walidacji danych. Bezpieczna aplikacja to nie tylko “działa” — to “nie daje się zhakować”.

Jeden bug bezpieczeństwa może kosztować firmę miliony (RODO, dane użytkowników, wizerunek). Pracodawcy oczekują świadomości bezpieczeństwa od każdego developera.

1. Wyjaśnić czym jest XSS i jak przebiega atak
2. Opisać jak React chroni przed XSS (auto-escaping)
3. Omówić pułapki: dangerouslySetInnerHTML, URL injection
4. Pokazać bezpieczne zarządzanie API keys

1. XSS atak — wstrzyknięcie <script> w dane wyświetlane innym użytkownikom
2. React auto-escaping — JSX zawsze escape’uje — <script> zamiast <script>
3. dangerouslySetInnerHTML — kiedy używać, DOMPurify jako sanitacja
4. API keys — NIE w kodzie frontend, zmienne środowiskowe z prefiksem VITE_
5. HTTPS — szyfrowanie transmisji

• Struktura minimalna

1. Wstęp — zagrożenia w aplikacjach webowych
2. Rozdział 1: XSS — atak, jak React chroni, pułapki
3. Rozdział 2: Zarządzanie sekretami — API keys, zmienne środowiskowe
4. Rozdział 3: Dobre praktyki bezpieczeństwa
5. Podsumowanie
6. Bibliografia

Bezpieczeństwo to odpowiedzialność każdego!

Opisz prawdziwy incydent (bez nazwy firmy) gdzie brak bezpieczeństwa kosztował. Potem pokaż jak prosty błąd (klucz API w git) może być wykryty przez bota w minutę. To najlepsza motywacja do nauki.