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

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?

azurenext.jsazure-blob-storageazure-storagenextjs-image


Solution 1:[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:

enter image description here

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

enter image description here

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions