javascript / expert
Snippet
Injizieren dynamischer CSP-Nonces über React-Kontext zur Validierung Inliner Skripte
Um Cross-Site-Scripting (XSS) beim Rendern dynamischer Inline-Skripte in React-Anwendungen zu verhindern, müssen kryptografische Content Security Policy (CSP) Nonces sicher im Komponentencenter weitergegeben werden. Die Verwendung von React Context in Kombination mit Custom Hooks stellt sicher, dass jedes dynamisch erzeugte Skript-Tag vor dem Rendern explizit eine kryptografisch sichere Nonce erfordert und überprüft.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import React, { createContext, useContext, useId } from 'react';const NonceContext = createContext<string | null>(null);export const NonceProvider: React.FC<{ nonce: string; children: React.ReactNode }> = ({ nonce, children }) => (<NonceContext.Provider value={nonce}>{children}</NonceContext.Provider>);export const useSafeScript = (scriptContent: string) => {const nonce = useContext(NonceContext);if (!nonce) throw new Error('Security Violation: Missing CSP Nonce context provider.');return {dangerouslySetInnerHTML: { __html: scriptContent },nonce};};
react
Erklärung
1
const NonceContext = createContext<string | null>(null);
Erstellt einen typisierten React-Kontext zur Aufbewahrung des vom Server generierten CSP-Nonce-Strings.
2
if (!nonce) throw new Error('Security Violation: Missing CSP Nonce context provider.');
Erzwingt eine strikte Sicherheitsgrenze, die das Rendern stoppt, wenn ein Inline-Skript ohne authentifizierte CSP-Nonce ausgeführt wird.
3
nonce
Bindet das gültige kryptografische Nonce-Attribut direkt an das zurückgegebene Element-Eigenschaftsobjekt.