How to secure Azure blob container data from Angular application?

0
votes

I have multiple json files in Azure blob container that contains users profile info and I have an Angular application that calls Azure blob container and fetch all those json files. Each json file has it's own url e.g https://{accountName}/profiles/{filename}. I am caching these urls rather than generating every single url on each refresh. Now the issue is the container data has public access level and anyone that has this url can access the files.

One way is to use SAS (shared access signature) token and expires the url after specific interval of time but in my case this will have huge impact on performance. Because I have to generate token for all files again and again. And also I can't expose secret access key in my Angular app, so I have to write an api that will do the job.

Is there any other way? My Angular app is deployed as a docker container on kubernetes cluster (AKS)

I found this link https://docs.microsoft.com/en-us/rest/api/storageservices/authorize-requests-to-azure-storage but nothing seems very helpful in my case.

1
angularazureazure-storage-blobsazure-blob-storage
Because I have to generate token for all files again and again. - Not necessarily. You can generate SAS Token for the container and use that token for all files in that container. – Gaurav Mantri
so, this is the best way? – Ask
Without knowing much more details, I would say yes. However I am not clear why you're reluctant in making an API call to generate SAS Token for an individual file on the fly? Considering the functionality to create a SAS Token doesn't make a network request to Azure Storage, it should be a pretty quick call to your API endpoint. – Gaurav Mantri
You can use Azure Function as the API endpoint, to not create a long running API server. Keep in mind that anyone from your website can still make those requests to the API. So if you need to make sure one user can't get data about another user, you need additional protection. – Erndob
On your blobs you can add meta data that identifies who the file belongs to. The API that gets files requires auth0 token. In the API, you get the user identifier from the token, confirm the token is valid, then you confirm this user can access the file being requested. If they can, you create a SAS token for let's say 1 hour, and return the user a redirect to the blob with sas token. You cache the response for 1 hours, so that if user requests the same file again, the browser will imediately redirect to the previous url without actually calling the API. – Erndob

1 Answers

0
votes

If you want to limit uses to access you blob storage, you can integrate Azure AD with your angular application. After your users complete Azure AD auth, they will get Azure AD access token then they can use call Azure blob rest api with the access token to get the blob content. But please note that you need to remember some things

  1. You need to configure the special Azure RABC role for your users. The roles are Storage Blob Data Owner, Storage Blob Data Contributor or Storage Blob Data Reader.

  2. You need to configure CORS for Azure storage account.

For more details, please refer to

  1. How to setup Angular Application To Use Azure AD Authentication

  2. How to configure CORS for Azure storage account

  3. Azure AD and Azure Blob

  4. Azure blob Rest API