How to consume Azure storage account on a web app hosted outside Azure?

Najam ul Saqib 360

If I have a storage account on Azure that holds data of users on an external web application, how can I use it on frontend?

I cannot use anonymous access because the data is not public. Each user on the web app has its own data, like user A on the web app should not be able to access user B's data.

I cannot employ Entra authentication because these are web app users which I dont plan to register/enroll in Entra.

I only see a few options, I cant go for Entra auth (as stated earlier), I cant use anonymous access, shared access key signature is discouraged to be used, and only left recommendation is user delegation SAS which again is dependent on Entra users.

Hari Babu Vattepally 1,450 Reputation points Microsoft Vendor

2024-11-19T08:28:22.5066667+00:00

Hi @Najam ul Saqib

Welcome to Microsoft Q&A Forum and thanks for posting your query here.

I would suggest and It's recommended to use Microsoft Entra authorization with your blob and queue applications, which is possible to minimize potential security vulnerabilities inherent in Shared Key. This method provides a superior security and ease of use over Shared Key for authorizing requests to blob storage accounts outside of Azure web applications.

However, you can also use implementing Azure role-based access control (RBAC) to assign permissions to users, groups, and applications at a certain scope, such as the need to know and least privilege security principles and manage permissions effectively. This ensures that users only have access to the resources they need, minimizing potential security risks.

Authentication through Microsoft Entra ID, App Service provides an OAuth 2.0 service for your identity provider. OAuth 2.0 focuses on client developer simplicity while providing specific authorization flows for web applications, desktop applications, and mobile phones. Microsoft Entra ID uses OAuth 2.0 to enable you to authorize access to mobile and web applications.

For additional information, please refer: Storage Accounts and security

Hope this helps you get started. If you have further questions, please let us know. We will be glad to assist you better.

Please don’t forget to "Accept the answer" and “up-vote” wherever the information provided helps you, this can be beneficial to other community members.
Najam ul Saqib 360 Reputation points

2024-11-19T08:48:59.11+00:00

@Anonymous How can a web application hosted outside Azure utilize these methods to load static files i.e. icons from storage account?
Hari Babu Vattepally 1,450 Reputation points Microsoft Vendor

2024-11-20T06:24:46.6733333+00:00
Hi @Najam ul Saqib

You can load static files from an Azure storage account into a web application hosted outside of Azure. Please follow the below methods which can be useful.

Once the static files are uploaded in your storage account. Enable static website hosting, in portal navigate>>left side pane>>Under data management>>static website. Follow the below link to setup static website. This will allow you to serve static content directly from the storage account.

Once the setup is done, you can access the files via URL, each file you upload to Azure blob storage will have unique URL. For example, if your storage account is named mystorageaccount, the URL for a file named icon.png in the $web container would be http://mystorageaccount.blob.core.windows.net/$web/icon.png.

Then you can use the URLs in your web application, reference the static files using their URLs.

For example, you can include an icon in your HTML like this:

<img src="http://mystorageaccount.blob.core.windows.net/$web/icon.png" alt="Icon">

I hope by following the above method, you can efficiently load static files from an Azure storage account in a web application hosted outside of Azure.

Please feel free to contact, if you have any further queries. We will be glad to assist you closely.

Thanks!
Najam ul Saqib 360 Reputation points

2024-11-20T13:27:30.1866667+00:00

@Hari Babu Vattepally this is a good option for frontend web application; what if I want to share storage account files with a web application backend without making it public as in static file hosting?
Hari Babu Vattepally 1,450 Reputation points Microsoft Vendor

2024-11-22T07:04:15.3933333+00:00

@Najam ul Saqib Apologies for delay in reply, you can share storage account files with a web application backend without making them public like static file hosting, you can secure by using Azure Entra ID(AAD), Private end points, Access control lists (ACLs) or a backend API proxy. If you would not like to use Azure AD authentication for individual user identities, you can use a Service Principal to authenticate your application backend to storage account securely. By using these methods helps in making it public in static file hosting.
Hari Babu Vattepally 1,450 Reputation points Microsoft Vendor

2024-11-25T09:20:04.7433333+00:00

Hi @Najam ul Saqib

Just following up to see if the above answer helped. Also, let us know if the issue is resolved or still persists, so that we would like to assist you closely. Please do consider clicking Accept Answer as accepted answers help community as well. Also, please click on Yes for the survey 'Was the answer helpful'.
Hari Babu Vattepally 1,450 Reputation points Microsoft Vendor

2024-11-26T02:39:32.5266667+00:00

@Najam ul Saqib Following up to see if the above answer was helpful. If this answers your query, do click Accept Answer and Yes for was this answer helpful. And, if you have any further query do let us know.
Najam ul Saqib 360 Reputation points

2024-11-26T18:58:06.6566667+00:00

@Hari Babu Vattepally How can an application not hosted within azure utilize service principal? I am unclear on this point.
Hari Babu Vattepally 1,450 Reputation points Microsoft Vendor

2024-11-28T07:52:30.7766667+00:00

@Najam ul Saqib Yes, though the application hosted outside Azure still we can utilize service principal to access Azure resources.

To use a service principal, the application needs to authenticate with Azure Active Directory (Azure AD) using the client ID and client secret of the service principal. The client ID and client secret are used to obtain an access token from Azure AD, which can then be used to access Azure resources.

To authenticate with Azure AD, the application needs to use one of the supported authentication protocols, such as OAuth 2.0 or OpenID Connect. The exact protocol and implementation will depend on the programming language and framework used by the application.

Once the application has obtained an access token, it can use the Azure Resource Manager REST API or one of the Azure SDKs to access Azure resources. The access token needs to be included in the authorization header of the API request.

It is important to note that the service principal needs to be granted the appropriate permissions to access the Azure resources that the application needs. This can be done using Azure RBAC (Role-Based Access Control) by assigning the service principal to a role that has the necessary permissions.

Please refer the link here if this can be helps.
Hari Babu Vattepally 1,450 Reputation points Microsoft Vendor

2024-11-29T07:39:08.5566667+00:00

@Najam ul Saqib Following up to see if the above answer was helpful. If this answers your query, do click Accept Answer and Yes for was this answer helpful. And, if you have any further query do let us know.
Hari Babu Vattepally 1,450 Reputation points Microsoft Vendor

2024-12-02T05:17:38.3433333+00:00

@Najam ul Saqib Just checking in to see if the above answer helped. If this answers your query, do click "Accept the answer” for the same, which might be beneficial to other community members reading this thread. And, if you have any further query do let us know.
Najam ul Saqib 360 Reputation points

2024-12-31T10:40:30.4133333+00:00

@Anonymous I would like to ask one more question here; what if I want to serve files from storage account to a frontend application selectively? Let's say there is a web application with a login panel, some files become available only after authentication and are needed on frontend, how can these files be served on a storage account without making them public because they're not public files.
Hari Babu Vattepally 1,450 Reputation points Microsoft Vendor

2025-01-02T12:34:16.41+00:00

Hi @Najam ul Saqib

Yes, to serve files from storage account to a frontend application selectively, especially when dealing with authentication, it's important to avoid making those files public. Also, instead of using shared key authorization directly on the frontend, which is not recommended due to security risks, consider using a more secure approach.

One effective method is to utilize shared access signatures (SAS). A SAS allows you to grant limited access to specific resources in your storage account for a defined period of time and with specific permissions. This means you can generate a SAS token after user authentication, which can then be used to access the files securely without exposing your storage account keys.

you can use Shared Access Signature (SAS). SAS provides a secure way to grant limited access to resources in your storage account, without making them public.

However, additionally, for optimal security, Microsoft recommends using Microsoft Entra ID with managed identities to authorize requests against blob, queue, and table data. This approach provides superior security and ease of use compared to shared key authorization. If your application is hosted outside of Azure, you can still leverage managed identities through Azure Arc.

I hope this helps! Please let us know if there are any further quires, we will glad to assist you better closely.
Najam ul Saqib 360 Reputation points

2025-01-03T08:33:25.7166667+00:00

@Hari Babu Vattepally We only need access to the storage account via shared access key after authentication on the web app. That specific storage account will only contain that user's data which is authenticated. So technically the access key wont be disclosed publicly.

We're trying to get rid of SAS as it's not recommended by Microsoft that's why we're considering other options.

I am all in for Entra ID authentication but for that we need to copy each user in the web application to Entra ID as well which doesn't make sense.

1 answer

Deepanshu katara 12,960 Reputation points

2024-11-19T07:26:54.9466667+00:00
Hello Najam ,
To consume storage accounts outside of Azure in a web application while discouraging anonymous access and Shared Access Signatures (SAS), one alternative approach is to build a service application (Azure function )that acts as a proxy. In this setup, the user's device authenticates with the service application, which then authorizes access to Azure Storage resources. This method helps to avoid exposing storage account keys on insecure devices, although it does introduce additional overhead since all data transferred between the user's device and Azure Storage must pass through the service application.

Another approach is to utilize Azure Role-Based Access Control (RBAC) to manage access permissions effectively. By assigning specific roles to users or applications, you can control who has access to the storage resources without exposing sensitive keys or using SAS.

References:

Best practices for securing PaaS web and mobile applications using Azure Storage

Please let us know if you have any other questions

Thanks

Deepanshu
Please sign in to rate this answer.
Najam ul Saqib 360 Reputation points

2024-11-19T07:41:43.8233333+00:00

@deepanshukatara-6769 Thank you.

The scenario that is in my mind is specifically for a web application, is the function app approach recommended by Microsoft? Do you have any official documentation on how to achieve that?

I will prefer the RBAC thingy, but how can that be linked with let's say a React app hosted somewhere outside Azure? RBAC makes things easier.

Also, one additional approach I have in my mind is using Front Door, what's your take on that?

Deepanshu katara 12,960 Reputation points

2024-11-19T07:52:50.62+00:00

firstly , It is not a function app approach instead some service application which can be hosted on azure function or webapp or aks I just suggested function here

Secondly, To link Azure Role-Based Access Control (RBAC) with a React app outside Azure for connecting to a storage account, you need to follow these general steps:

Set Up Managed Identity: Ensure that your React app has a managed identity configured in Azure. This identity will be used to authenticate and authorize access to the Azure resources.

Assign Roles: Use Azure RBAC to assign the appropriate role (e.g., Storage Blob Data Contributor) to the managed identity of your app. This role will allow your app to perform operations on the storage account.

Authenticate from React App: In your React app, you can use the @azure/identity package to authenticate using the managed identity. Make sure to install this package and import the necessary classes.

Access Storage Account: Once authenticated, you can use the Azure SDK (like @azure/storage-blob) to interact with your storage account, such as reading or writing blobs.

Environment Variables: Ensure that your storage account name is set in your environment variables, as you'll need it to create a connection to the storage service.

By following these steps, your React app will be able to securely connect to the Azure storage account using Azure RBAC.

References:

Tutorial: Access Azure services from a JavaScript web app

Quickstart: Azure Blob Storage client library for Node.js (blob-storage-quickstart-template

thirdly, yes we can use frontdoor to setup connectivity , To connect a React app outside Azure to an Azure Storage account using Azure Front Door, you can follow these general steps:

Create an Azure Storage Account: First, you need to create a storage account in Azure to store your static content. This can be done through the Azure portal.

Configure Azure Front Door: Set up Azure Front Door to act as a global entry point for your application. This involves creating a Front Door profile and configuring it to point to your Azure Storage account as the origin.

Set Up Caching and Acceleration: Azure Front Door can cache the content from your storage account, which helps in delivering high-bandwidth content efficiently. Ensure that caching is enabled for your Front Door configuration.

Secure the Connection: Use a custom domain name for your Front Door and ensure that the connection is secured using TLS. You can also set up a Web Application Firewall (WAF) to protect your application.

Deploy Your React App: Finally, deploy your React app to the Azure Storage account, ensuring that it is accessible via the Front Door endpoint.

By following these steps, your React app can effectively use Azure Front Door to connect to the Azure Storage account, providing a scalable and secure architecture for serving static content.

References:

Integrate an Azure Storage account with Azure Front Door

Use Azure Front Door with Azure Storage blobs

Lastly I will not recommend frontdoor as it costly and lot of overhead , recommend to go with rbac, Thanks

Najam ul Saqib 360 Reputation points

2024-11-19T08:10:16.27+00:00

How will Managed Identity be established for a web app that is not running on Azure? As far as I know MI can be linked to Azure resources only.

Deepanshu katara 12,960 Reputation points

2024-11-19T17:31:23.43+00:00

Yes right we can use service principal instead if outside azure and it can be used as OIDC token user for authenticating request

Najam ul Saqib 360 Reputation points

2024-12-31T13:45:37.4533333+00:00

@Deepanshu katara I would like to ask one more question here; what if I want to serve files from storage account to a frontend application selectively? Let's say there is a web application with a login panel, some files become available only after authentication and are needed on frontend, how can these files be served on a storage account without making them public because they're not public files.

Can we use shared key authorization on the frontend? OR do we have some better option?
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.

Share via

How to consume Azure storage account on a web app hosted outside Azure?

1 answer

Your answer