I'm trying to implement AWS Encryption SDK for JavaScript in a browser environment within a React application. When I attempt to construct an instance of the encryption client using buildClient function with CommitmentPolicy.REQUIRE_ENCRYPT_REQUIRE_DECRYPT policy:
const { encrypt } = buildClient(CommitmentPolicy.REQUIRE_ENCRYPT_REQUIRE_DECRYPT);
I am met with an error message:
ERROR
Buffer is not defined
ReferenceError: Buffer is not defined
at ./node_modules/@aws-crypto/cache-material/build/module/src/build_cryptographic_materials_cache_key_helpers.js (http://localhost:3000/static/js/bundle.js:46280:21)
...
It appears that the 'Buffer' object, a Node.js global, is being utilized but is not available in the browser. I'm not explicitly using 'Buffer' in my code, so it seems that the AWS Encryption SDK could be utilizing it internally.
The code section that's causing this error is within an async function addEntry:
...
// Convert string to Uint8Array
const contentBinary = atob(btoa(data.content));
const contentArrayBuffer = new Uint8Array(contentBinary.length);
for (let i = 0; i < contentBinary.length; i++) {
contentArrayBuffer[i] = contentBinary.charCodeAt(i);
}
const { encrypt } = buildClient(CommitmentPolicy.REQUIRE_ENCRYPT_REQUIRE_DECRYPT);
const { accessKeyId, secretAccessKey, sessionToken } = await getAwsCredentials();
...
I'm importing the AWS Encryption SDK according to their documentation:
import { KmsKeyringBrowser, buildClient, CommitmentPolicy, getClient, KMS } from "@aws-crypto/client-browser";
I'm wondering if anyone has encountered this problem before, or if anyone could propose any methods for resolving it. Is there an alternative, browser-compatible version of the AWS Encryption SDK that I could use, or is there a workaround available for this problem?
Any insights would be much appreciated.