获取 Uint8Array 以用作 ArrayBuffer

Question

I am attempting to fetch encrypted raw buffer data, pass to a decrypt function and use this to display an image.

What I have so far returns a Uint8Array. I try to pass this to the decrypt function and it gives the following error:

Unhandled Rejection (TypeError): First argument must be a string, Buffer, ArrayBuffer, Array, or array-like object.

Error is given from the following code:

const fetched_data = await arweave.transactions.getData('transaction', {decode: true})
const decrypted_data = decrypt(fetched_data.buffer, key)
console.log(decrypted_data)

So I figured I need to change it to an ArrayBuffer. I followed the answer here: Uint8Array to ArrayBuffer

My code now:

const fetched_data = await arweave.transactions.getData('transaction', {decode: true})
const buffer_data = fetched_data.buffer.slice(fetched_data.byteOffset, fetched_data.byteLength + fetched_data.byteOffset)
const decrypted_data = decrypt(buffer_data, key)
console.log(decrypted_data)

This returns an ArrayBuffer. However, passing it to my decrypt function yields the same error. Here is my decrypt function.

export const decrypt = (dataBuffer, key) => {
    // Create cipherKey
    const cipherKey = Buffer.from(key);
    // Get iv and its size
    const ivSize = dataBuffer.readUInt8(0);
    const iv = dataBuffer.slice(1, ivSize + 1);
    // Get authTag - is default 16 bytes in AES-GCM
    const authTag = dataBuffer.slice(ivSize + 1, ivSize + 17);

    // Create decipher
    const decipher = crypto.createDecipheriv(ALGORITHM, cipherKey, iv);
    decipher.setAuthTag(authTag);

    return Buffer.concat([
        decipher.update(dataBuffer.slice(ivSize + 17)),
        decipher.final(),
    ]);
};

The decrypt function is working as expected in NodeJS on my local machine, but now I am trying to fetch the encrypted data from Arweave and I run into this issue. Any help is appreciated.

Update

I also tried to get it to work with a regular fetch.

const getData = async (data, key) => {
    const response = get('URL HERE')
    response.then(res => console.log(decrypt(res, key)))
    return
}

Response returns a Promise with ArrayBuffer. When I pass the response to decrypt function, it shows the same error.

Answer 1

Please try reducing your problem set to show a minimum viable example.

(async () => {
  const url = 'https://fetch-progress.anthum.com/images/sunrise-baseline.jpg'
  const imageMimeType = 'image/jpeg'
  const buffer = await (await fetch(url)).arrayBuffer()
  
  // Decrypt your buffer before passing it to addImage()
  const decryptedBuffer = await decrypt(buffer)
  
  const img = document.createElement('img')
  img.src = URL.createObjectURL(
    new Blob([ decryptedBuffer ], { type: imageMimeType })
  )
  document.body.append(img)  
})()

// returns decrypted ArrayBuffer.
async function decrypt(encryptedBuffer) {
  // Implement your decryption here
  return encryptedBuffer
}