Snippet

Vermeidung von XSS durch sicheres Rendern dynamischer Zeichenketten

Standardmäßig behandelt React interpolierte Zeichenketten-Daten in JSX als einfachen Text und maskiert Sonderzeichen wie < und > automatisch. Dieser integrierte Sicherheitsmechanismus verhindert die Ausführung bösartiger Skripte im Browser, ohne dass eine manuelle HTML-Bereinigung erforderlich ist.

snippet.js

javascript

import React, { useState } from 'react';
 
function UserComment({ rawInput }) {
  const [commentText] = useState(rawInput);
 
  return (
    <div className="comment-box">
      <p>User feedback: {commentText}</p>
    </div>
  );
}

react

Erklärung

const [commentText] = useState(rawInput);

Speichert den vom Benutzer eingegebenen Kommentartext als einfachen primitiven String-Wert im Zustand.

<p>User feedback: {commentText}</p>

Bettet den String-Inhalt sicher ein, wobei React potenzielle HTML-Tags automatisch maskiert und so Script-Injection verhindert.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Anfänger →

Vermeidung von XSS durch sicheres Rendern dynamischer Zeichenketten

Verwandt