TypeError: Failed to normalize algorithm: 'salt' of 'Pbkdf2Params' (passed algorithm) is not instance of ArrayBuffer, Buffer, TypedArray, or DataView.

[guyeisenbach]

Link to the code that reproduces this issue

https://github.com/guyeisenbach/minimal-nextjs-error-reproduction

To Reproduce

Working version

1. clone the repository git clone https://github.com/guyeisenbach/minimal-nextjs-error-reproduction.git
2. cd minimal-nextjs-error-reproduction/my-app-working
3. npm i
4. npm run dev
5. curl http://localhost:3000
6. In the logs you should see {"v": "8340f6a4-62c0-11ef-9667-8a920c4a2cd4", "u": "8340f5c8-62c0-11ef-9667-8a920c4a2cd4", "t": 1724577344000, "s": 100, "a": "c"}

NOT working version

1. clone the repository git clone https://github.com/guyeisenbach/minimal-nextjs-error-reproduction.git
2. cd minimal-nextjs-error-reproduction/my-app-not-working
3. npm i
4. npm run dev
5. curl http://localhost:3000
6. In the logs you should see the error:

- error Error [TypeError]: Failed to normalize algorithm: 'salt' of 'Pbkdf2Params' (passed algorithm) is not instance of ArrayBuffer, Buffer, TypedArray, or DataView.

Current vs. Expected behavior

I executed an decryption algorithm PBKDF2 which worked on 13.4.5-canary.2 but stopped working on 13.4.5-canary.3 (and forwarded versions).
The error I received is:

Failed to normalize algorithm: 'salt' of 'Pbkdf2Params' (passed algorithm) is not instance of ArrayBuffer, Buffer, TypedArray, or DataView.

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.5.0: Wed May  1 20:12:58 PDT 2024; root:xnu-10063.121.3~5/RELEASE_ARM64_T6000
Binaries:
  Node: 18.18.2
  npm: 10.8.1
  Yarn: 1.22.22
  pnpm: N/A
Relevant packages:
  next: 13.4.5-canary.3
  eslint-config-next: N/A
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.3.3

Which area(s) are affected? (Select all that apply)

Runtime

Which stage(s) are affected? (Select all that apply)

next dev (local), next start (local), Other (Deployed)

Additional context

I tested my app code using next with version 13.4.5-canary.2. After upgrading next to version 13.4.5-canary.3
an exception is thrown. I tested it with more newer versions of next and it still does not work.

[JesseKoldewijn]

I'll try to take a look tomorrow after work 👍

I'll most likely will be able to take a look at this in about 3 to 4 hours. But in the meantime do you mind checking if the code you got in the middleware triggers the same errors when placed in a route handler instead? @guyeisenbach

[guyeisenbach]

I'll try to take a look tomorrow after work 👍

I'll most likely will be able to take a look at this in about 3 to 4 hours. But in the meantime do you mind checking if the code you got in the middleware triggers the same errors when placed in a route handler instead? @guyeisenbach

@JesseKoldewijn Checked it, it seems to work fine.
I created the file app/api/route.ts with the code:

export async function GET(request: Request) {
    console.log(await pbkdf2Decrypt("vucmai0dDDT5X8TFMQ2TnXJYxzS5lxLBp8bH88fENehHcyRxK26gi2qMAK74dMQq",
        "Xejc98gptDn7Dov12RcZZN+29M7NxWwTdMAfvldXXHA98PH3NJOBjLDFZIm8tJLZKxIZgtFzmfbtnJLx12Ij1SWaKpP0Lz2tx/Ga7CrlFTdKOX64qoJuVvSh9rQioFU1+OhXGV3ZSw2tI06fHxOPGw8n2/5k4EznmxEulNN/waldqLcUGXOJmwBFUqK6zoGB",
        1000,
        "NIA+hzM5wkE="))

    return new Response("ok")
}



function base64ToArrayBuffer(base64String: string): ArrayBufferLike {
    const binaryString = atob(base64String);
    const length = binaryString.length;
    const bytes = new Uint8Array(length);
    binaryString.split('').forEach((char, index) => {
        bytes[index] = char.charCodeAt(0);
    });
    return bytes.buffer;
}
async function pbkdf2Decrypt(secret: string, encryptedString: string, iterations: number, salt: string): Promise<string>{
    const ivlen = 16;
    const keylen = 32;
    const bitsLength = (ivlen + keylen) * 8;

    const encodedPassword = new TextEncoder().encode(secret);
    const encodedSalt = base64ToArrayBuffer(salt);
    const importedKey = await crypto.subtle.importKey('raw', encodedPassword, 'PBKDF2', false, ['deriveBits']);
    const params = { name: 'PBKDF2', hash: 'SHA-256', salt: encodedSalt, iterations: iterations };
    const derivation = await crypto.subtle.deriveBits(params, importedKey, bitsLength);

    const derivedKey = derivation.slice(0, keylen);
    const iv = derivation.slice(keylen);
    const cookieBuffer = base64ToArrayBuffer(encryptedString);
    const importedDecryptionKey = await crypto.subtle.importKey('raw', derivedKey, { name: 'AES-CBC' }, false, [
        'decrypt',
    ]);
    const decrypted = await crypto.subtle.decrypt(
        {
            name: 'AES-CBC',
            iv: iv,
        },
        importedDecryptionKey,
        cookieBuffer,
    );
    return new TextDecoder('utf-8').decode(decrypted);
}

And it DOES print the decrypted string to the console on http://localhost:3000/api

[JesseKoldewijn]

In that case it's probably not a nextjs specific issue and more an edge runtime issue.

[guyeisenbach]

@JesseKoldewijn WDYM? how can I solve it?

[JesseKoldewijn]

@JesseKoldewijn WDYM? how can I solve it?

What I meant is that this is most likely going to be an edge runtime specific issue. Meaning that I'll still will take a look when I'm home ofc. Just saying what the likely issue could be related to🤙

[JesseKoldewijn]

@guyeisenbach sorry man wasn't able to find some time to check this matter tonight. I'll make sure to give it a fly-by tomorrow evening 🤙

[guyeisenbach]

Thank you!

[DanBezalelpx]

Hi @guyeisenbach @JesseKoldewijn any progress here? i stuck in the same spot here. Looking for a solution

[JesseKoldewijn]

Hi @guyeisenbach @JesseKoldewijn any progress here? i stuck in the same spot here. Looking for a solution

Hey man! I can look into it when I find the time do do so. A bit busy with work related stuff for a while. Will update both of you when/if I find anything

[guyeisenbach]

Great! thank you!

[robert-wallis]

I just ran into this issue when running code in node vs browser environment. In node (mounted component test) I would get the 'salt' error, but I verified the type was indeed an ArrayBuffer. In Safari, Chrome, and Firefox however the exact same code and inputs run successfully.