I am trying to implement a web application that connects to Microsoft Azure in order to upload files to their cloud storage. The documentation I have been following is Manage blobs with JavaScript v12 SDK in a browser. The tutorial for which is below:
https://docs.microsoft.com/en-us/azure/storage/blobs/quickstart-blobs-javascript-browser
The documentation explicitly states that to use Azure SDK libraries on a website, you must convert your code to work inside the browser using a bundler. The bundler suggested is parcel-bundler
I have built the project fine, and everything is working in the browser as per the tutorial outlines however I am running into an issue when it comes to obscuring the API Keys.
The alternative tutorial, which explains uploading Azure blobs using Node.js suggests the use of environment variables:
https://docs.microsoft.com/en-us/azure/storage/blobs/storage-quickstart-blobs-nodejs
I have done this in my browser tutorial, however, when parcel bundles the project together the full API Keys can be accessed by looking in the source files suggesting they are revealed during the build process of the bundle.
It appears that I need to use a bundler as the functions used for browser use do not exist in the client-side JavaScript.
How do I get around this problem?