How do I SECURELY display images from Azure blob storage in an img tag?

Question

I have a form with an Image upload in my website. whenever the user uploads an image, its saved under a new container with a random unique ID. In a different page, I want to display that image. but by using an tag with a src attribute, im compromising the location of the image, as well as its container name to any curious user with a basic understanding of inspect element: https://storageaccountname.blob.core.windows.net/secret-container-name/image.jpg"

How can I securely display said image to the user without it being open to everyone? I am using NextJS, so perhaps the component could be of any help?

Answer 1

To securely display images from Azure blob storage, please try the following:

The below permission must be set to Private because the content is only viewable to logged in user.

• Go to Azure portal -> Storage Accounts -> Select containers -> Choose a container -> Change access level to private as below:

• Try implementing Azure Active Directory to authorize access to blob data.
• Try using a user delegation SAS to grant limited access to blob data.

As mentioned by @silent , try storing the images on blob storage and channel all the requests to the blob storage through Front Door.

For more in detail, please refer below links:

Security recommendations for Blob storage - Azure Storage | Microsoft Docs

Azure Storage - Use Blob from Private Container in tag - Stack Overflow