Azure storage allows you to store files and serve the files directly without proxying it through your website's server. While you may want to proxy the upload through your server, to validate file or to store some metadata of the file in your database, direct serving of files from azure to user is better since it takes load off your servers.

The frequent problem that comes with direct serving is authentication and authorization of user. You don't want to keep a public azure storage url for user's files even if the url is obfuscated in some way.

To solve this, we can use Shared Access Signatures (SAS). First you have to make sure that your Azure storage container access policy is set to private only.

Containers with access policy

Each file in the container has a URL through which it can be accessed. For a container that is private, we need to attach a SAS token to the URL to authenticate ourselves. You can get a SAS token in javascript or typescript using the following code snippet. You will get STORAGE_ACCOUNT_NAME and STORAGE_ACCOUNT_KEY from the Azure storage account page in Azure portal.

import {
} from "@azure/storage-blob";

const containerName = "images";
const containerClient = BlobServiceClient.fromConnectionString(AZURE_STORAGE_CONNECTION_STRING).getContainerClient(

const storageSharedKeyCredential = new StorageSharedKeyCredential(STORAGE_ACCOUNT_NAME, STORAGE_ACCOUNT_KEY);

const blobSAS = generateBlobSASQueryParameters(
        containerName, // Required
        blobName, // Required
        permissions: BlobSASPermissions.parse("r"), 
        startsOn: new Date(new Date().valueOf() - 600_000),
        expiresOn: new Date(new Date().valueOf() + 600_000), 
// Get the file URL and attach SAS to it.
const fileUrl = containerClient.getBlobClient(blobName).url + "?" + blobSAS; 

The generated url will be only be valid for the given time. You can use this piece of code in the serving path of your webpages to create URLs for images/files.