Using Cloudflare to serve your private Azure Storage Blobs
Tags: cdn, azure, cloudflare, security
Published: 2021-02-25 08:41:46

Recently I wrote about how to use Cloudflare as a CDN for your Azure Storage Containers/Blobs. The process for setting up Cloudflare for Azure Storage is straightforward. 

> **Info**: [Use Cloudflare CDN for your Azure Storage caching](https://www.eliostruyf.com/devhack-cloudflare-cdn-azure-storage-caching/)

Now to make this work, you need to configure the Azure Storage to be anonymously accessible. This setting is the default when creating a new storage account. When you go to the Azure Security Advisor, you might see a message saying: **Storage account public access should be disallowed**.

> **IMPORTANT**: Do not do these steps immediately in production!

You can disable it on the Storage Account under **Configuration** -> **Allow blob public access** -> set to **disabled**.

![Disable public access](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zs6mva752695a1m3z3dh.png)

Switching the public access to **disabled** will lead to the following:

![Public access to your blob is not allowed](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pjdr9674n5udmfa433xq.png)

Now Azure Storage prevents you from publically accessing your blobs/files. Changing this setting will also cause the Cloudflare CDN to start returning the same issues (if not available in the cache).

## Solutions: Shared Access Signature

To fetch the blobs/files, you will need to make use of a Shared Access Signature (SAS). These SAS allow you to restrict access to particular services and actions you want to allow (read, write, delete, ...) when using them.

> **Info**: [Using Azure CDN with SAS](https://docs.microsoft.com/en-us/azure/cdn/cdn-sas-storage-support)

In this case, we need to access our files from Azure Storage, a SAS that is only allowed to use it for **Blob** service and only allow **Read** permission. 

You can create such a SAS key by going to your Azure Storage Account -> **Shared access signature** -> and configure it as follows.

![Creating your SAS Token for the CDN](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q8se04vc8c3pgbj26sy8.png)

> **Info**: Be sure to make a record/reminder of this expiration date. Once it reaches the end date, you need to pass a new SAS for your service.

Click the **Generate** button and copy the `SAS Token` (query string params).

Once you have that SAS token, you can test it out by adapting it to your CDN or blob URL.

![File contents retrieved when SAS Token is provided](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6qq3yldbg4e85fh2a3ms.png)

## Configuring it on Cloudflare

On Cloudflare, there is not a quick way to adapt your SAS token to the URLs. You will have to use a worker who adds the query string parameters to each request (if not cached).

> **Info**: Cloudflare workers allow you to run services that can modify the HTTP requests and responses.

On Cloudflare, select your domain, go to **Workers**, and click **manage workers**. When you have not created one yet, you will need to create an endpoint. Once Cloudflare created the endpoint. You will be able to configure the worker script on the website directly.

![Creating a worker on Cloudflare](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/648eo496sk42o8nwgo1n.png)

The code the worker needs to execute looks like this:

```javascript
addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

/**
 * Respond to the request
 * @param {Request} request
 */
async function handleRequest(request) {
  return fetch(`${request.url}${SASTOKEN}`);
}
```

The code uses a `SASTOKEN` environment variable which you can configure on the worker its settings. The value for the variable is the full query string that you copied after generating the SAS token.

![Adding an environment variable](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xo0vyjhicuyoyu216usg.png)

One more thing is needed, which is where you link the worker for your CDN requests. You can do this by going back to the domain settings. Click on **workers** again and click on **add route**. A dialog will pop up to define the paths on which you want to use this worker. In my case, I used `cdn.elio.dev/*`.

![Adding your custom route](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3y4odl5fjxyfdx3g1bgc.png)

When you try to use the CDN URL directly to your file, you will get its contents.

![Getting your file contents via Cloudflare without providing the SAS Token](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0rj5wz3ywiaa3qgma2kd.png)

On the caching, nothing changed. Your browser will still serve it from its cache if present.

![CDN files still get cached, nothing changes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hlum8q2iuqf9zsf4amj8.png)

*Article first published at: [https://www.eliostruyf.com/cloudflare-serve-private-azure-storage-blobs/](https://www.eliostruyf.com/cloudflare-serve-private-azure-storage-blobs/)*