Estoy intentando obtener datos de búfer sin procesar cifrados (AES-256) de Arweave , pasar a una función de descifrado y usar esto para mostrar una imagen. Estoy tratando de obtener y descifrar el ArrayBuffer en el front-end (en mi aplicación React).
Primero, estoy encriptando los datos del búfer en NodeJS y almacenando el archivo. Aquí está el código para ello:
/********************** ** Runs in NodeJS ** **********************/ const encrypt = (dataBuffer, key) => { // Create an initialization vector const iv = crypto.randomBytes(IV_LENGTH); // Create cipherKey const cipherKey = Buffer.from(key); // Create cipher const cipher = crypto.createCipheriv(ALGORITHM, cipherKey, iv); const encryptedBuffer = Buffer.concat([ cipher.update(dataBuffer), cipher.final(), ]); const authTag = cipher.getAuthTag(); let bufferLength = Buffer.alloc(1); bufferLength.writeUInt8(iv.length, 0); return Buffer.concat([bufferLength, iv, authTag, encryptedBuffer]); }; const encryptedData = encrypt(data, key) fs.writeFile("encrypted_data.enc", encryptedData, (err) => { if(err){ return console.log(err) } });Luego, trato de buscar y descifrar en el front-end. Lo que tengo hasta ahora devuelve un ArrayBuffer de la respuesta. Intento pasar este ArrayBuffer a la función de descifrado. Aquí está el código:
/*********************** ** Runs in React ** ***********************/ import crypto from "crypto" const getData = async (key) => { const result = await (await fetch('https://arweave.net/u_RwmA8gP0DIEeTBo3pOQTJ20LH2UEtT6LWjpLidOx0/encrypted_data.enc')).arrayBuffer() const decryptedBuffer = decrypt(result, key) console.log(decryptedBuffer) } // Here is the decrypt function I am passing the ArrayBuffer to: 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("aes-256-gcm", cipherKey, iv); decipher.setAuthTag(authTag); return Buffer.concat([ decipher.update(dataBuffer.slice(ivSize + 17)), decipher.final(), ]); };Cuando paso los datos de ArrayBuffer a la función de descifrado, aparece este error:
Unhandled Rejection (TypeError): First argument must be a string, Buffer, ArrayBuffer, Array, or array-like object.Está omitiendo muchos detalles que ayudarían a la comunidad a comprender cómo cifra la imagen, cómo la recupera y cómo la descifra. Aquí hay un ejemplo completo de cómo obtener una imagen, cifrarla, descifrarla y mostrarla en el navegador. Esto se ejecuta en Chrome v96 y Firefox v95.
(async () => { const encryptionAlgoName = 'AES-GCM' const encryptionAlgo = { name: encryptionAlgoName, iv: window.crypto.getRandomValues(new Uint8Array(12)) // 96-bit } // create a 256-bit AES encryption key const encryptionKey = await crypto.subtle.importKey( 'raw', new Uint32Array([1,2,3,4,5,6,7,8]), { name: encryptionAlgoName }, true, ["encrypt", "decrypt"], ) // fetch a JPEG image const imgBufferOrig = await (await fetch('https://fetch-progress.anthum.com/images/sunrise-baseline.jpg')).arrayBuffer() // encrypt the image const imgBufferEncrypted = await crypto.subtle.encrypt( encryptionAlgo, encryptionKey, imgBufferOrig ) // decrypt recently-encrypted image const imgBufferDecrypted = await crypto.subtle.decrypt( encryptionAlgo, encryptionKey, imgBufferEncrypted ) // display unencrypted image const img = document.createElement('img') img.style.maxWidth = '100%' img.src = URL.createObjectURL( new Blob([ imgBufferDecrypted ]) ) document.body.append(img) })()