Question 1

Co to jest atak XSS (Cross-Site Scripting)?

Accepted Answer

Atak XSS polega na wstrzyknięciu złośliwego kodu JavaScript do aplikacji webowej w celu wykonania go w przeglądarkach innych użytkowników. Atakujący wykorzystuje luki w walidacji lub eskejpowaniu, aby kraść cookies, tokeny sesji lub wykonywać nieautoryzowane działania. React zapewnia natywną ochronę poprzez automatyczne eskejpowanie wartości JSX, jednak luki pozostają przy dangerouslySetInnerHTML lub bezpośredniej manipulacji DOM.

Question 2

Jak React domyślnie chroni przed atakami XSS?

Accepted Answer

React automatycznie eskejpuje wszystkie wartości wstawiane przez JSX, konwertując je na zwykły tekst przed renderowaniem. Ta ochrona zapobiega uruchamianiu złośliwych skryptów nawet jeśli kod HTML zostanie wstrzyknięty do danych. W przeciwieństwie do innerHTML, który interpretuje i wykonuje HTML, React traktuje tagi jako zwykły tekst, uniemożliwiając wstrzyknięcie złośliwego JavaScript przez standardowe props lub state.

Question 3

Dlaczego dangerouslySetInnerHTML jest uważane za niebezpieczne w React?

Accepted Answer

Ta właściwość omija natywną ochronę XSS React, wstawiając surowy HTML bezpośrednio do DOM bez eskejpowania. Jeśli treść pochodzi z niezaufanego źródła lub zewnętrznego API, może zawierać złośliwy JavaScript, który zostanie wykonany. Wyraźna nazwa dangerouslySetInnerHTML zmusza programistów do świadomego uznania ryzyka bezpieczeństwa i wdrożenia odpowiedniej sanityzacji z bibliotekami takimi jak DOMPurify.

React Bezpieczeństwo & Najlepsze Praktyki

Co to jest atak XSS (Cross-Site Scripting)?

Odpowiedź

Jak React domyślnie chroni przed atakami XSS?

Odpowiedź

Dlaczego dangerouslySetInnerHTML jest uważane za niebezpieczne w React?

Odpowiedź

Jaka jest główna różnica między atakiem XSS Stored a Reflected?

Jakie podejście należy preferować, aby wyświetlić HTML z zewnętrznego API w React?

Inne tematy rekrutacyjne React / Next.js

Podstawy JavaScript

Podstawy React

React Hooks

Cykl życia komponentu

React Router

Zarządzanie stanem z Context

Formularze i Controlled Components

Pobieranie danych i API

React Query (TanStack Query)

Styling & CSS-in-JS

Podstawy Next.js

TypeScript z React

Pobieranie danych w Next.js

Server Actions w Next.js

Routing i Nawigacja w Next.js

API Routes w Next.js

Metadata & SEO w Next.js

Middleware i Auth w Next.js

Testowanie React

Zustand State Management

Optymalizacja wydajności React

Error Boundaries & Error Handling

Advanced React Patterns

Zaawansowane funkcje Next.js

Wdrożenie i Produkcja Next.js

Architecture & Design Patterns

React Server Components

Internacjonalizacja Next.js

Opanuj React / Next.js na następną rozmowę