How to send generated SAS Token from NodeJS Azure Function to HTML Frontend?

Question

My API uses an Azure Function (NodeJS) that allows users to upload and download files from my Azure Storage containers. They do this through an HTML frontend, using SAS tokens. Instead of manually generating SAS tokens in my Azure Storage account, I created a function in my Azure Function that generates container-specific SAS tokens. The issue that I am having is that I'm not sure how to pass these generated tokens to the HTML frontend. I've tried calling the NodeJS Function from my HTML file (shown below) with no success, as the HTML file cannot find index.js. What should I do?

Current Code:

index.js:

async function createContainerSas(){
const accountName = "accountname";
const containerName = "containername";
const accountkey = "accountkey";

const credential = new StorageSharedKeyCredential(accountName, accountkey);
const blobServiceClient = new BlobServiceClient(`https://${accountName}.blob.core.windows.net`, credential);

const containerClient = blobServiceClient.getContainerClient(containerName);

const sasOptions = {
    containerName,
    protocol:  SASProtocol.HttpsAndHttp
};

sasOptions.permissions = ContainerSASPermissions.parse('cw'); // for creating and writing.
sasOptions.expiresOn = new Date(new Date().valueOf() + 3600*1000);
const sasToken = generateBlobSASQueryParameters(sasOptions, credential).toString();
return sasToken;
}

index.html:

<script type="text/javascript" src="./index.js">
    function createContainerSasButton() {
        createContainerSas()
    }
</script>
<center><input type="button" onclick="createContainerSasButton()" value="generate token button"></center>

Answer 1

Hunter Bowling Thanks for posting your question in Microsoft Q&A. Based on your description, you have created a function createContainerSas in Server-side code, but this function is not directly accessible in the client-side code via HTML. This is expected and see similar discussion in Node.js. Instead, you would need to define a Function as HttpTrigger in Functions app and make a HTTP request from the client-side to that endpoint. Here is HTTP Triggers guide that would help (also Use Azure Functions to develop Node.js serverless solutions).

Looking at the approach, you are trying to generate a SAS token with storage account key, but I suggest you using managed identity of Azure Functions. Here are the steps you can follow:

1. Enable System-assigned managed identity for your Function App
2. Assign necessary RBAC roles for the identity to your storage account.
3. Then add Azure.Identity package to your Function app and use DefaultAzureCredential instead of StorageSharedKeyCredential in your code.

You can refer doc Access Azure services from a .NET web app for more detailed info on this. The steps described are alternative to using Storage account key to generate SAS token.

Regarding how to pass the generated SAS token to UI, you can either directly call this Azure Function app endpoint from API/UI or embed this SAS token generation process in your existing Function app itself depending on the design/approach. I hope this helps and let me know if you have any questions.

---

If you found the answer to your question helpful, please take a moment to mark it as "Yes" for others to benefit from your experience. Or simply add a comment tagging me and would be happy to answer your questions.