How to serve an image from Azure Blob storage as if it was hosted in my web app

I have:

• A web app rendered using Angular (myapp.com)
• A C# REST API called by the web app (myapi.com)
• An Azure Blob storage account with private and public containers (myblob.com)

I have an image in a private Azure blob container, myblob.com/image.png. I would like to serve this image as if it was coming directly from the web app (myapp.com/media/image.png) with the intention of referencing it as the src attribute of an img tag elsewhere on the app.

So far, I have been able to serve the image from my REST API (myapi.com/media/image.png) by creating a custom "Media" endpoint which takes a path to the image, generates a SAS URL for the Azure blob, and redirects requests from myapi.com/media/image.png to the SAS URL.

[HttpGet("{path}")]
public IActionResult GetFileAsync(string path, CancellationToken cancellation)
{
string containerName = "mycontainer";
var blobContainerClient = _blobServiceClient.GetBlobContainerClient(containerName);
var blobClient = blobContainerClient.GetBlobClient(path);

var sasUri = blobClient.GenerateSasUri(
Azure.Storage.Sas.BlobSasPermissions.Read,
DateTimeOffset.UtcNow.AddHours(1));
var signedUrl = blobClient.Uri + sasUri.Query;
return Redirect(signedUrl);
}


This has the desired behavior of creating a permanent link to the image and obfuscates the SAS token URL from the user, but ideally, I'd like to use myapp.com instead of myapi.com. Is this something I should be looking at Angular routes to accomplish, or is there a more straightforward way to achieve this? Is this kind of URL obfuscation a good practice at all?

Continue reading...