Azure blob file load directly in html tag but with in domain

Question

I am using Azure Blob Storage for storing and downloading files for my .net core mvc web application. I have shared the blob container as Public access.,

I am directly consuming those images, pdf inside html tags of web pages like below,

<img src="[azure_blob_img_url]" />

<embed src="azure_blob_pdf_url" />

Like this I am using to show the image inside our web app. But people can able to open this blob url directly outside our app also which is not secured.

Please give me solution, how do prevent to access the blob url outside my website domain.

I don't like to using download and return the file in my website. I want to use azure blob url directly inside html tag.

Thanks in advance!

Answer 1

To prevent direct access to the Azure Blob URLs outside of the website domain, you have to use Shared Access Signature with a limited time span.

Using SAS token, you can control the access permissions and expiration time for the URLs.

Generate a SAS token with appropriate permissions (read, write, or list) for your blob container or individual blobs.

string conn = "ConnectionString";
string cntr = "nagesh";
string blnName = "images.jpg";
string frontDoorEndpoint = "frontDoor EndPoint";

 CloudStorageAccount storageAccount = CloudStorageAccount.Parse(conn);
 CloudBlobClient blbClnt = storageAccount.CreateCloudBlobClient();
 CloudBlobContainer container = blbClnt.GetContainerReference(cntr);
 CloudBlockBlob blb = container.GetBlockBlobReference(blnName);
    string sas_Token = blb.GetSharedAccessSignature(new SharedAccessBlobPolicy()
            {
                Permissions = SharedAccessBlobPermissions.Read,
                SharedAccessExpiryTime = DateTime.UtcNow.AddMinutes(5)
            });

    string blob_Url = blb.Uri.AbsoluteUri + sas_Token;
    string frontDoor_Url = frontDoorEndpoint + blnName;

    Console.WriteLine("BlobURL: " + blob_Url);
    Console.WriteLine("FrontDoorURL: " + frontDoor_Url);

Output

Take the blob Url and share it.

You can access the blob for specific time mentioned in the above code (5mins).

The method GetSharedAccessSignature is used to generate a SAS token for the blob with read permission and a 5-minute expiry time.

You can append the SAS token to the blob URL to create a temporary URL that can be used to access the blob.

And also append the blob name to the front door endpoint to create a URL that can be used to access the blob through Azure Front Door.