Question 1

Was ist ein XSS (Cross-Site Scripting) Angriff?

Accepted Answer

Ein XSS-Angriff besteht darin, bösartigen JavaScript-Code in eine Webanwendung einzuschleusen, um ihn im Browser anderer Benutzer auszuführen. Der Angreifer nutzt Validierungs- oder Escape-Schwachstellen aus, um Cookies, Session-Tokens zu stehlen oder nicht autorisierte Aktionen durchzuführen. React bietet nativen Schutz durch automatisches Escaping von JSX-Werten, aber Schwachstellen bleiben bei dangerouslySetInnerHTML oder direkter DOM-Manipulation bestehen.

Question 2

Wie schützt React standardmäßig gegen XSS-Angriffe?

Accepted Answer

React escaped automatisch alle über JSX eingefügten Werte, indem es sie vor dem Rendern in Klartext umwandelt. Dieser Schutz verhindert die Ausführung bösartiger Skripts, selbst wenn HTML-Code in die Daten injiziert wird. Im Gegensatz zu innerHTML, das HTML interpretiert und ausführt, behandelt React Tags als Klartext, wodurch die Injektion von bösartigem JavaScript über Standard-Props oder State unmöglich wird.

Question 3

Warum gilt dangerouslySetInnerHTML in React als gefährlich?

Accepted Answer

Diese Eigenschaft umgeht Reacts nativen XSS-Schutz, indem sie rohes HTML ohne Escaping direkt in das DOM einfügt. Wenn der Inhalt aus einer nicht vertrauenswürdigen Quelle oder einer externen API stammt, kann er bösartiges JavaScript enthalten, das ausgeführt wird. Der explizite Name dangerouslySetInnerHTML zwingt Entwickler, das Sicherheitsrisiko bewusst zu erkennen und eine ordnungsgemäße Sanitization mit Bibliotheken wie DOMPurify zu implementieren.

React Sicherheit & Best Practices

Was ist ein XSS (Cross-Site Scripting) Angriff?

Antwort

Wie schützt React standardmäßig gegen XSS-Angriffe?

Antwort

Warum gilt dangerouslySetInnerHTML in React als gefährlich?

Antwort

Was ist der Hauptunterschied zwischen einem Stored XSS und Reflected XSS Angriff?

Welchen Ansatz sollte man bevorzugen, um HTML von einer externen API in React anzuzeigen?

Weitere React / Next.js-Interviewthemen

JavaScript-Grundlagen

React-Grundlagen

React Hooks

Komponentenlebenszyklus

React Router

Zustandsverwaltung mit Context

Formulare & Controlled Components

Datenabruf & API

React Query (TanStack Query)

Styling & CSS-in-JS

Next.js Grundlagen

TypeScript mit React

Next.js Data Fetching

Next.js Server Actions

Routing & Navigation in Next.js

Next.js API Routes

Next.js Metadata & SEO

Next.js Middleware & Auth

React Testing

Zustand State Management

React Performance-Optimierung

Error Boundaries & Error Handling

Advanced React Patterns

Erweiterte Next.js-Funktionen

Next.js Deployment & Produktion

Architecture & Design Patterns

React Server Components

Next.js Internationalisierung

Meistere React / Next.js für dein nächstes Interview