Manage HTTP Headers for Azure static website

Question

There doesn't seem to be a clear and defined way to manage HTTP headers with an Azure static website. I know this feature is still in preview but my team and I are attempting to make this into a production ready web application.

I think most people utilizing the static website feature will be using javascript frameworks like Reactjs or Angular, and for my case, reactjs. Since there isn't a web.config to manage http headers it becomes unclear on how to approach this. The headers in question are Content Security Policy, X-Content-Type-Options, and X-XSS-Protection.

For clarity I'm using the new static web hosting on Azure, as talked about here: https://azure.microsoft.com/en-us/blog/azure-storage-static-web-hosting-public-preview/

Thanks!

Almatadema

Yeah, it's pretty limited what you can do currently. One option is to setup an Azure Function proxy in front of it that can add the headers as needed. – Crookes

@Crookes I'm actually in the middle of trying this and I'm running into issues. Have you accomplished this proxy while using the build output of a react project? The references to the compiled js and css files 404 when I load the proxy's url. I was using this article: blog.headforcloud.com/2018/07/29/static-hosting-headers as a reference, just to make sure we're on the same page – Almatadema

I have actually, the main thing you have to check is that the route templates are correct in the proxy, and that the SAS token is valid to access the files. You can also try making the container public to isolate the problem. Storage returns a 404 if it thinks you can't access the file. – Crookes

@Crookes Any chance you have a screenshot or example of how you set up your route templates? I think that's the missing piece – Almatadema

I put an anonymized version with the routes in here: pastebin.com/E6zL8Mat – Crookes

@Crookes Thanks for taking the time to do this. I ended up fixing this by using the PUBLIC_URL variable in a .env file – Almatadema

Answer 1

Coming back to answer this question myself. I've come up with a new solution for this all wrapped in Azure. When using an Azure storage container's static web solution to host a site like a react build here is how I've been doing it:

Domain name (www.blahblah.com) -> Azure function proxy (functionname.azurewebsites.com) -> Azure CDN (cdnname.azureedge.net) -> Storage Container Static Web URL (https://storageaccountname.z20.web.core.windows.net/)

This will allow you to use a CDN, and add what ever HTTP headers necessary. In this solution HTTP headers are added at the Azure Function proxy level. I'll attach what one of my function proxies look like. Please excuse my crude redactions

Almatadema

Answer 2

If the performance of the static website is a factor, then I would recommend you to use Azure CDN, and if you use Verizon Premium pricing tier, you will have the ability to manage the headers in the client's request and response.

Fog

Answer 3

You can set up global and route HTTP headers in staticwebapp.config.json as explained in the docs - https://learn.microsoft.com/en-us/azure/static-web-apps/configuration#global-headers

Ovoviviparous