Snippet

Schutz vor Prototype Pollution in React State-Update-Handlern

Beim dynamischen Setzen von verschachteltem Objektstatus in React über Benutzereingaben könnten Angreifer versuchen, über manipulierte Schlüssel `Object.prototype` zu manipulieren. Die Verwendung eines Sets verbotener Bezeichner zusammen mit `Object.freeze` und prototypenlosen Objekten via `Object.create(null)` verhindert Angriffe durch Prototype Pollution.

snippet.js

javascript

import { useState } from 'react';
 
const FORBIDDEN_KEYS = new Set(['__proto__', 'constructor', 'prototype']);
 
export function SecureNestedForm() {
  const [profile, setProfile] = useState(() => Object.create(null));
 
  const handleDeepFieldUpdate = (keyPath, value) => {
    if (FORBIDDEN_KEYS.has(keyPath)) {
      throw new TypeError(`Restricted property assignment: ${keyPath}`);
    }
 
    setProfile((prev) => {
      const sanitizedKey = String(keyPath).trim();
      return Object.freeze({
        ...prev,
        [sanitizedKey]: typeof value === 'string' ? value.slice(0, 100) : value
      });
    });
  };
 
  return (
    <input
      aria-label="User Bio"
      onChange={(e) => handleDeepFieldUpdate('bio', e.target.value)}
      value={profile.bio || ''}
    />
  );
}

react

Erklärung

const FORBIDDEN_KEYS = new Set(['__proto__', 'constructor', 'prototype']);

Deklariert ein Set mit gefährlichen Schlüsseln, die für Prototype-Pollution-Angriffe genutzt werden können.

const [profile, setProfile] = useState(() => Object.create(null));

Initialisiert den React-Zustand mit einem Wörterbuch-Objekt ohne Prototypen-Kette.

return Object.freeze({

Friert das resultierende Zustandsobjekt unveränderlich ein, um nachgelagerte Mutationen zu verhindern.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Fortgeschrittene →

Schutz vor Prototype Pollution in React State-Update-Handlern

Verwandt