javascript / intermediate
Snippet
Absicherung von dynamischem Prop-Spreading gegen Prototype-Pollution
Das direkte Ausbreiten ungeprüfter dynamischer Objekte auf React-JSX-Elemente kann zu Prototype-Pollution oder unbeabsichtigter Event-Handler-Ausführung führen. Die Validierung von Schlüsseln mit Object.hasOwn und das Filtern von Prototyp-Eigenschaften verhindert Manipulationen der Objekthierarchie.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import React from 'react';export function SecureDynamicButton({ userSuppliedProps, label }) {const sanitizeProps = (props) => {const safe = Object.create(null);const dangerousKeys = ['__proto__', 'prototype', 'constructor'];for (const [key, value] of Object.entries(props || {})) {if (!dangerousKeys.includes(key) && Object.hasOwn(props, key)) {safe[key] = value;}}return safe;};const safeProps = sanitizeProps(userSuppliedProps);return <button {...safeProps}>{label}</button>;}
react
Erklärung
1
const safe = Object.create(null);
Erzeugt ein reines Dictionary-Objekt ohne Standard-Object.prototype-Kette.
2
const dangerousKeys = ['__proto__', 'prototype', 'constructor'];
Definiert gesperrte Eigenschaftsnamen, die häufig für Prototype-Pollution-Angriffe genutzt werden.
3
if (!dangerousKeys.includes(key) && Object.hasOwn(props, key)) {
Prüft mit Object.hasOwn auf echte eigene Eigenschaften und schließt Prototyp-Manipulatoren aus.
4
return <button {...safeProps}>{label}</button>;
Übergibt ausschließlich bereinigte und geprüfte Props an das JSX-Element.