Using Azure Blob SAS url, to use in Blazor img

Question

I am generating a URL through the Azure libraries and I get a URL, which works correctly. The problem is when I use the generated URL in Blazor, it encodes it and modifies the token, so it is not valid to access the image.

Generated URL:

https://CONTENEDOR.blob.core.windows.net/logos/227cbf2b-90e5-40fc-bf67-78a7b10effd8.svg?sv=2023-08-03&st=2023-10-24T16:09:09Z&se=2023-10-24T17:09:09Z&sr=b&sp=r&sig=V2QEPCBYmZ40QFOZFfq3iJvhmegv6/Rizvc1HhE2q08=

URL that blazor modifies:

https://CONTAINER.blob.core.windows.net/logos/227cbf2b-90e5-40fc-bf67-78a7b10effd8.svg?sv=2023-08-03&st=2023-10-24T16%3A09%3A09Z&se=2023-10-24T17%3A09%3A09Z&sr=b&sp=r&sig=V2QEPCBYmZ40QFOZFfq3iJvhmegv6%2FRizvc1HhE2q08%3D

How can the problem be solved?

I understand the problem is that the "sig=" parameter is modified.

I have used MakupString, but the URL is still modified.

Answer 1

I tried the below blazor server app code and was able to generate the SAS token and see the image.

Code :

AzureBlobComponent.razor :

@page "/azureblob"
@using Azure.Storage.Blobs;
@using Azure.Storage.Sas;
@using Azure.Storage;

<h3>Azure Blob Storage</h3>

<button @onclick="GenerateSasUrl">Generate SAS URL</button>

<p>SAS URL: @sasUrl</p>

@code {
    private string accountName = "<storage_name>";
    private string accountKey = "<storage_key>";
    private string containerName = "<container_name>";
    private string blobName = "<image_file_name>";
    private string sasUrl = "";

    private void GenerateSasUrl()
    {
        BlobServiceClient serviceClient = new BlobServiceClient(new Uri($"https://{accountName}.blob.core.windows.net"), new StorageSharedKeyCredential(accountName, accountKey));
        BlobContainerClient containerClient = serviceClient.GetBlobContainerClient(containerName);
        BlobClient blobClient = containerClient.GetBlobClient(blobName);

        BlobSasBuilder blobSasBuilder = new BlobSasBuilder()
            {
                BlobContainerName = containerName,
                BlobName = blobName,
                ExpiresOn = DateTime.UtcNow.AddMinutes(5), 
            };

        blobSasBuilder.SetPermissions(BlobSasPermissions.Read); 

        string sasToken = blobSasBuilder.ToSasQueryParameters(new StorageSharedKeyCredential(accountName, accountKey)).ToString();
        sasUrl = blobClient.Uri + "?" + sasToken;
    }
}

Output :

It runs successfully as below,

I clicked on Generate SAS URL as below.

Then, the SAS token is generated successfully as below:

I was able to see the image with the Generated SAS URL below.