Allow access to blobs in azure storage to display in a browser from an app service

I have a blob storage account disallowing public access. An image container is thus private and contains images.

An app service runs and hosts a Razor Pages web app. The web app has a system managed identity and uses the DefaultAzureCredentials to avoid keys in appsettings, and has access to the storage account as a Blob Contributor role.

With this configuration, users authenticated with azure b2c are able to upload files to the storage, list them, delete, read and set metada and so on, as expected. However, when I retrieve a blob (image) Uri from the BlobClient and display it in a cshtml file, I receive a 409 status code.

Said differently, all operations made on the server are working properly, but the storage account denies displaying the image in a Get request from browser of that app. This is true for localhost and in production on the url xyz.azurewebsites.net.

I believe that the app service has the right to access the data and thus can retrieve the url of a given image, but it is then the browser that makes the request and thus gets rejected from the storage account.

I would like to know how I can resolve this problem without ressorting to SAS tokens (they work indeed). Said differently, I wonder if there is a possibility to:

1. Disallow gets from the url https://xyz.blob.core.windows.net/images/image1.jpg when pasted in the browser url bar, or from a simple curl.

2. Allow sending the image to the browser when the get is made from the website (considering the Referer header for instance?).

Is that possible and how?

Edit: I have found related issues but they are outdated and not conslusive besides pointing to SAS tokens. What is limiting SAS is that the url can be read by anyone who gets it and not only the logged in user. A solution is most welcomed, in the hope that some progress has been made since these SO questions have been posted here and here.

In your code, DefaultAzureCredentials which was used in your BlobClient got the access token for you and attached the token in the auth header in your request. Hence the request successfully accessed the images in your blob storage.

Well, when you used browser, it did not add the auth header automatically.

W/o the auth information, you did not have permission to access to protected content.

You can generate SAS for the blob storage and attached the SAS in your url to access the content.

One workaround (it is not a perfect solution) is that you can set the lifetime of the SAS token and the clients need to update the SAS token periodically.

(I work in Azure SDK team in Microsoft)