javascript / expert
Snippet
Laufzeit-Subresource-Integritätsprüfung für dynamische React-Chunk-Lader
Dynamisches Code-Splitting in React-Komponenten, die nicht vertrauenswürdigen CDNs ausgesetzt sind, birgt das Risiko der Ausführung manipulierter JavaScript-Bundles. Die Berechnung kryptografischer SHA-256-Hashes abgerufener Chunk-Puffer mithilfe der Web Crypto API vor dem dynamischen Import-Aufruf erzwingt Subresource Integrity zur Laufzeit.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
async function secureImport(moduleUrl, expectedSubresourceHash) {const response = await fetch(moduleUrl);const buffer = await response.arrayBuffer();const hashBuffer = await crypto.subtle.digest('SHA-256', buffer);const hashArray = Array.from(new Uint8Array(hashBuffer));const base64Hash = 'sha256-' + btoa(String.fromCharCode(...hashArray));if (base64Hash !== expectedSubresourceHash) {throw new SecurityError(`Subresource Integrity match failed for ${moduleUrl}`);}const blob = new Blob([buffer], { type: 'application/javascript' });const objectUrl = URL.createObjectURL(blob);return import(/* webpackIgnore: true */ objectUrl);}
react
Erklärung
1
const hashBuffer = await crypto.subtle.digest('SHA-256', buffer);
Berechnet ein SHA-256-Digest über rohe binäre Modul-Bytes mithilfe der hardwarebeschleunigten Web Crypto API.
2
const base64Hash = 'sha256-' + btoa(String.fromCharCode(...hashArray));
Konvertiert das berechnete Digest-Byte-Array in einen standardmäßigen Base64-kodierten Subresource Integrity (SRI)-String.
3
if (base64Hash !== expectedSubresourceHash) {
Vergleicht den zur Laufzeit berechneten Hash mit der erwarteten Manifest-Signatur und verhindert die Ausführung manipulierter Nutzlasten.
4
return import(/* webpackIgnore: true */ objectUrl);
Importiert verifizierten JavaScript-Ausführungscode nach der Integritätsfreigabe dynamisch über eine Blob-URL.