What is the best approach to utilize storage accounts outside of Azure?

Najam ul Saqib 340

I want to understand the best approach to consume storage accounts outside of Azure on a web application.

Anonymous access and SAS are both discouraged, then what should be used?

Hari Babu Vattepally 715 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 340 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 715 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 340 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?

1 answer

Deepanshukatara-6769 10,765 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 340 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?

Deepanshukatara-6769 10,765 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 340 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.

Deepanshukatara-6769 10,765 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
Sign in to comment

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

Share via

What is the best approach to utilize storage accounts outside of Azure?

1 answer

Your answer