Web Crypto API: Sicherheit und Verschlüsselung im Web

Die Web Crypto API hat sich als ein mächtiges Werkzeug erwiesen, um die Sicherheit von Webanwendungen zu erhöhen und die Kommunikation zwischen Benutzern und Diensten zu schützen. Die API bietet Entwicklern die Möglichkeit, kryptografische Funktionen direkt im Browser auszuführen, ohne auf externe Bibliotheken oder Plugins angewiesen zu sein. Dadurch wird eine neue Ebene der Kontrolle über verschlüsselte Daten geschaffen, während gleichzeitig die Benutzerfreundlichkeit und die Geschwindigkeit der Datenverarbeitung erhalten bleiben.

In diesem Blog-Beitrag werden wir tief in die Welt der Web Crypto API eintauchen. Wir werden untersuchen, warum Verschlüsselung im Web von entscheidender Bedeutung ist und wie die Web Crypto API dabei hilft, die Sicherheit von Webanwendungen zu erhöhen. Von der Generierung kryptografischer Schlüssel bis zur sicheren Speicherung sensibler Daten – wir werden die verschiedenen Aspekte dieser API erkunden und praktische Anwendungen durchgehen. Egal, ob du ein erfahrener Webentwickler oder Einsteiger in die Welt der Kryptografie bist, dieser Beitrag wird dir ein fundiertes Verständnis dafür vermitteln, wie die Web Crypto API die Sicherheitslandschafts des Webs verändert

Was ist die Web Crypto API?

Die Web Crypto API umfasst eine breite Palette kryptografischer Funktionen. Dazu gehören die sichere Generierung von Zufallszahlen, die Erstellung von Schlüsselpaaren, die Verschlüsselung und Entschlüsselung von Daten sowie die Erzeugung und Überprüfung digitaler Signaturen. Sie stellt Entwicklern eine konsistente und standardisierte Methode zur Verfügung, um sicherheitsrelevante Aufgaben im Browser durchzuführen, ohne auf unsichere oder nicht standardisierte Methoden zurückgreifen zu müssen.

Use Cases

Unterstützt ist eine Vielzahl von Anwendungsfällen, die die Sicherheit von Webanwendungen erhöhen. Einige der unterstützten kryptografischen Funktionen und Algorithmen sind:

• Symmetrische Verschlüsselung: Die API ermöglicht die Verwendung von Algorithmen wie AES-GCM (Advanced Encryption Standard – Galois/Counter Mode) für die symmetrische Verschlüsselung von Daten. Dies ist nützlich, um vertrauliche Informationen sicher zu übertragen und zu speichern.
• Asymmetrische Verschlüsselung: Algorithmen wie RSA und ECDSA (Elliptic Curve Digital Signature Algorithm) werden unterstützt, um eine sichere Kommunikation zwischen Parteien zu ermöglichen, ohne dass sie denselben geheimen Schlüssel teilen müssen.
• Sichere Zufallszahlengenerierung: Die API bietet die Möglichkeit, hochwertige Zufallszahlen zu generieren, die für Kryptografie und Sicherheitsmechanismen verwendet werden können.
• Digitale Signaturen: Die Erzeugung und Überprüfung digitaler Signaturen ermöglicht die Authentifizierung und Integritätsprüfung von Daten.
• Hashing: Die API unterstützt Hashing-Algorithmen wie SHA-256 (Secure Hash Algorithm 256-bit) für die Erstellung von Hash-Werten von Daten. Hashes werden verwendet, um die Integrität von Daten sicherzustellen und Passwörter sicher zu speichern.

Praktische Anwendungen und Beispiele
Schlüsselgenerierung:

Syntax: generateKey (algorithm, extractable, keyUsages)

Dieser Code-Block ist dafür verantwortlich, einen symmetrischen Schlüssel mithilfe der Web Crypto API zu generieren. Er verwendet den AES-GCM (Advanced Encryption Standard in Galois/Counter Mode) Algorithmus mit einer festgelegten Schlüssellänge von 256 Bits. Hier ist eine Erklärung der Parameter:

window.crypto.subtle.generateKey(
    {
        name: "AES-GCM",
        length: 256,
    },
    false,
    ["encrypt", "decrypt"]
).then(function (key) {
    encryptSomething(key);
}).catch(function (err) {
    handleError(err);
});

• name: Gibt den zu verwendenden Algorithmus an, in diesem Fall AES-GCM
• length: Legt die Schlüssellänge fest, in diesem diesem Beispiel 256 Bits, es könnte auch 128 oder 192 Bits sein
• false / true: Gibt an, ob der Schlüssel kann exportiert werden oder nicht
• [„encrypt“, „decrypt“, „wrapkey“, „unwrapkey“]: Gibt an, wofür ist der Schlüssel verwendet werden kann
• .then(function(key)){}: Gibt den generierten Schlüssel zurück

Schlüsselimport:

Syntax: importKey(format, keyData, algorithm, extractable, keyUsages)

Dieser Code-Block zeigt, wie man einen Schlüssel mithilfe der Web Crypto API importiert. Er importiert einen Schlüssel im JWK (JSON Web Key) Format.

window.crypto.subtle.importKey(
    "jwk",
    {   //Beispiel von jwk Schlüssel
        kty: "oct",
        k: "VJG2iUzGQa-4D9wZb1IEmx-rL-j9zIyObITG9HVdKUo",
        alg: "A256GCM",
        ext: true,
    },
    {
        name: "AES-GCM",
    },
    false,
    ["encrypt", "decrypt"]
).then(function (key) {
    encryptSomething(key);
}).catch(function (err) {
    console.error(err);
});

• „jwk“ / „raw“: Zeigt an, dass der Schlüssel im JWK (JSON Web Key) – Format oder im RAW (ArrayBuffer) vorliegt, der zweite Parameter stellt ein Beispiel für einen JWK-Schlüssel dar, mit Eigenschaften wie Schlüsseltyp (kty), tatsächlichem Schlüsselwert (k), Algorithmus (alg) und ob das Schlüsselmaterial extrahiert werden kann (ext)
• {name: „AES-GCM“}: Legt den Algorithmusnamen für den importierten Schlüssel fest
• false: Gibt an, dass der importierte Schlüssel nicht exportiert werden kann
• [„encrypt“, „decrypt“]: Gibt an, dass der importierte Schlüssel für die Verschlüsselung und Entschlüsselung verwendet werden kann
• .then(function(key)){}: Gibt den importierten Schlüssel zurück

Verschlüsselung (Symmetrisch):

Syntax: encrypt(algorithm, key, data)

In diesem Abschnitt wird erläutert, wie die Web Crypto API zur symmetrischen Verschlüsselung von Daten verwendet wird. Dabei kommt der AES-GCM-Algorithmus zum Einsatz. Verschiedene Parameter wie der Initialisierungsvektor (IV), zusätzliche Authentifizierungsdaten und die tagLength werden spezifiziert.

let data = new Uint8Array([1, 2, 3, 4])
window.crypto.subtle.encrypt(
    {
        name: "AES-GCM",
        iv: window.crypto.getRandomValues(new Uint8Array(12)),
        additionalData: ArrayBuffer,
        tagLength: 128,
    },
    key,
    data
).then(function (encrypted) {
    encryptSomething(new Uint8Array(encrypted));
}).catch(function (err) {
    handleError(err);
});

• name: „AES-GCM“: Gibt den Verschlüsselungsalgorithmus als AES-GCM an
• iv: Generiert einen zufälligen Initialisierungsvektor (IV) mit window.crypto.getRandomValues(). Es ist wichtig, für jede Verschlüsselung einen eindeutigen IV zu verwenden
• additionalData: Optionale zusätzliche Authentifizierungsdaten (falls vorhanden)
• tagLength: Legt die Länge des Tags fest (optional)
• key: ist der symmetrische Schlüssel, der aus der Schlüsselgenerierung oder dem Import stammt
• data: ist der ArrayBuffer, der die zu verschlüsselnden Daten enthält
• .then(function(encrypted){}: Gibt einen ArrayBuffer zurück, der die verschlüsselten Daten enthält

Entschlüsselung:

Syntax: decrypt (algorithm, key, data)

Dieser Code-Block zeigt, wie Daten symmetrisch mithilfe der Web Crypto API entschlüsselt werden. Er verwendet denselben AES-GCM-Algorithmus wie bei der Verschlüsselung und gibt Parameter wie den IV und zusätzliche Daten an. Hier ist eine Erklärung:

let data = new Uint8Array([1, 2, 3, 4])
window.crypto.subtle.decrypt(
    {
        name: "AES-GCM",
        iv: ArrayBuffer(12),
        additionalData: ArrayBuffer,
        tagLength: 128,
    },
    key,
    data
).then(function (decrypted) {
    encryptSomething(new Uint8Array(decrypted));
}).catch(function (err) {
    handleError(err);
});

• name: „AES-GCM“: Gibt den Entschlüsselungsalgorithmus als AES-GCM an
• iv: Gibt denselben Initialisierungsvektor (IV) an, der bei der Verschlüsselung verwendet wurde
• additionalData: Optionale zusätzliche Authentifizierungsdaten (falls vorhanden)
• tagLength: Gibt die bei der Verschlüsselung verwendete tagLength an (falls vorhanden)
• key: ist der symmetrische Schlüssel, der aus der Schlüsselgenerierung oder dem Import stammt
• data: ist der ArrayBuffer, der die zu entschlüsselnden Daten enthält
• .then(function(decrypted){}: Gibt einen ArrayBuffer zurück, der die entschlüsselten Daten enthält

Digesting (Hashing):

Syntax: digest (algorithm, data)

Dieser Code-Block zeigt, wie man den SHA-256-Hash von Daten mithilfe der Web Crypto API berechnet. Er gibt den SHA-256-Hashalgorithmus an und nimmt einen ArrayBuffer mit den zu hashenden Daten entgegen.

let data = new Uint8Array([1, 2, 3, 4])
window.crypto.subtle.digest(
    {
        name: "SHA-256",
    },
    data
).then(function (hash) {
    hashSomehting(new Uint8Array(hash));
}).catch(function (err) {
    handleError(err);
});

• name: „SHA-256“: Gibt den Hash-Algorithmus als SHA-256 an, der für die Berechnung verwendet wird
• data: Dies ist der ArrayBuffer, der die zu hashenden Daten enthält. In diesem Fall handelt es sich um eine Sequenz von Bytes, [1, 2, 3, 4], die gehasht werden sollen
• .then(function(hash){}: Gibt den Hash als ArrayBuffer zurück

 Fazit

Die Web Crypto API steht für den sich entwickelnden Bereich der Web-Sicherheit. Sie rüstet Entwickler mit einer umfassenden Palette kryptografischer Funktionen aus, die sichere Kommunikation, die Überprüfung der Datenintegrität und die vertrauliche Informationsspeicherung ermöglichen. Mit zunehmenden Sicherheitsbedenken im Internet ebnet die Web Crypto API den Weg zu einer sichereren und verschlüsselten digitalen Welt.

Verschlüsseln im Browser – die WebCrypto API

Web Crypto API – MDN Web Docs

Web Cryptography API Examples