javascript / beginner
Snippet
Absicherung Kontrollierter Formulareingaben gegen Script-Injection
Obwohl React Zeichenketten in JSX standardmäßig maskiert, bietet das Bereinigen von Benutzereingaben in kontrollierten Komponenten zusätzlichen Schutz gegen unerwünschte Script- oder Markup-Zeichen vor deren Weiterverarbeitung.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import React, { useState } from 'react';function SafeCommentForm() {const [comment, setComment] = useState('');const handleChange = (e) => {const sanitized = e.target.value.replace(/[<>]/g, '');setComment(sanitized);};return (<div><input type="text" value={comment} onChange={handleChange} placeholder="Enter comment" /><p>Safe Preview: {comment}</p></div>);}export default SafeCommentForm;
react
Erklärung
1
const sanitized = e.target.value.replace(/[<>]/g, '');
Entfernt spitze Klammern aus dem Text, um grundlegende HTML-Tag-Konstruktionen zu neutralisieren.
2
setComment(sanitized);
Aktualisiert den Zustand der Komponente ausschließlich mit der bereinigten Zeichenkette.
3
<input type="text" value={comment} onChange={handleChange} placeholder="Enter comment" />
Verknüpft den kontrollierten Eingabewert und den Change-Handler mit dem Zustand.