This post is about configuring CSP Header for Static Website Hosted in Azure Blob Storage. If you’re running a Single Page application, hosting it from Azure Blob service it easy and cost effective. Long back I wrote a blog post on how to do this - Simple Static Websites using Azure Blob service. One of the challenge in this approach is configuring security headers. If you check your application with tools like https://securityheaders.com, you will be getting a very low score, like
In this post I will be explaining how to improve this score and get an
A+ with the help of Azure CDN. So first I created a storage account and I configured it to host a static web app, you can find more details on how to do this from this post. Once it is provisioned and running, I am associating an Azure CDN to this storage account. We can do this from the Azure CDN menu of the storage account.
You need to choose the pricing tier as
Standard Microsoft. And Origin hostname as your storage account URL with the
Static Website associated. Click on the Create button, it might take some time to provision the CDN. Once the provisioning is completed, click on the hostname to open Azure CDN details.
On the Azure CDN, select the Rule Engine menu, it will display something like this.
Click on the
Add URL option, which will display a configuration section like the following.
Provide a name, click on the
Add Condition, and choose
Request URL option, this will show a condition section on the bottom, select
Any operator - so this URL will be applied to all the incoming URLs. If you’re using the
Global you can directly add actions, you don’t require any conditions. There is a limit of 5 actions, so if you need to add more than 5 actions you need to follow this method. Next you need to click on the
Add Action, and select
Modify Response Header. Similar to condition this will add one more section, in the section, choose Action as
X-Frame-Options as HTTP Header name, and set
SAMEORIGIN as the Http header value.
You need to configure following values.
These are the configuration values I am using in my application - it can change based on your application requirements. Please look into the results from securityheaders.com and configure it based on your application requirements.
|Action||HTTP header name||HTTP header value|
|Append||Content-Security-Policy||default-src https: data:|
|Append||Permissions-Policy||accelerometer=(); camera=(); geolocation=(); gyroscope=(); magnetometer=(); microphone=(); payment=(); usb=()|
And here is my Azure CDN Rule engine with the completed configuration.
Now we have completed the configuration, lets run the URL again in securityheaders.com and will check the results.
And we got an
A+ as the result. Some security tools will show a warning if the response returns a Server header. We can remove that by adding one more action. In the action choose
Delete instead of
Append and in the
HTTP header name option provide the
Server as the value. Now if you check the server response header won’t be there. This way you can make you application more secure without web.config or any other server side technologies. We can use Azure Function proxies to achieve the same results.
Happy Programming :)