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

Question

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 (ng serve in localhost), but when the application is built and deployed, the crypto.subtle.decrypt() method throws an error - DOMException: The operation failed for an operation-specific reason. (In Firefox)

The same issue occurs in Chromium browsers as well but the exception thrown is just Error (and no more error information).

Here's a simplified sample of the code with debug console logs of 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.

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

• in production deployment - exception thrown for subtle.decrypt

Any assistance would be appreciated. Thanks in advance.

Answer 1

The issue was found to be with the secretKeys used. I was using the wrong secret key in deployment due to an issue in the enviornment configurations.