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?
You should not be using the API Keys in your browser-based application as it is a major security concern (any user can take a look at the JavaScript files in the browser and extract the keys).
What you should do instead is have an API endpoint which your application can call and this API endpoint should return you a Shared Access Signature (SAS) token. You should then use this SAS token in your application to interact with Azure Storage.