mdn / dom-examples

Code examples that accompany various MDN DOM and Web API documentation pages
https://developer.mozilla.org/en-US/docs/Web/API
Creative Commons Zero v1.0 Universal
3.46k stars 1.8k forks source link

Issue in SubtleCrypto: decrypt() method in production build. Works fine on localhost #240

Closed MTrade-Plus closed 11 months ago

MTrade-Plus commented 11 months ago

I'm using the Web Crypto API in an Angular (v15) application to decrypt a hex-encoded string encrypted with AES/CBC/PKCS7Padding. The implementation works as expected when served in the development environment (localhost), but when the application is built and deployed in the production environment, the crypto.subtle.decrypt() method throws a DOMException: The operation failed for an operation-specific reason error.

Here's a simplified sample of the code with debug console logs for the method used to decrypt.

public decryptAES(encryptedText: string, secretKey: string, ivString: string): Promise<string> {
        return new Promise((resolve, reject) => {
            console.log('xxx - encryptedText ', encryptedText);
            console.log('xxx - secretKey ', secretKey);
            console.log('xxx - ivString ', ivString);

            crypto.subtle.importKey(
                    'raw', new TextEncoder().encode(secretKey),
                    { name: 'AES-CBC', length: 256 },
                    false,
                    ['decrypt'],
                )
                .then(keyBuffer => {
                    console.log('xxx - keyBuffer ', keyBuffer);

                    const ivBuffer = new TextEncoder().encode(ivString);
                    console.log('xxx - ivBuffer ', ivBuffer);

                    const encryptedBuffer = new Uint8Array(
                        Uint8Array.from(encryptedText.match(/.{1,2}/g).map(byte => parseInt(byte, 16))),
                        );
                    console.log('xxx - encryptedBuffer ', encryptedBuffer);

                    crypto.subtle.decrypt(
                        { name: 'AES-CBC', iv: ivBuffer },
                        keyBuffer,
                        encryptedBuffer,
                        )
                        .then(decryptedBuffer => {
                            console.log('xxx - decryptedBuffer ', decryptedBuffer);

                            const decryptedText = new TextDecoder().decode(decryptedBuffer);
                            console.log('xxx - decryptedText ', decryptedText);

                            resolve(decryptedText);
                        })
                        .catch(err => {
                            console.log('xxx - error in subtle.decrypt - ', err);
                            reject(err);
                        });
                })
                .catch(err => {
                    console.log('xxx - error insubtle.importKey - ', err);
                    reject(err);
                });
        });
    }

Below are the screenshots for console logs captured in Firefox Developer browser v121.0b3 (64-bit).

in localhost (the text is decrypted as expected) - localhost

in production deployment - error in build

The same issue occurs in Chrome / Brave browsers as well.