CODEWITHSUNDEEP
azureazure-blob-storageazure-storage
Lukasz Dynowski
Lukasz Dynowski

Reputation: 13610

How to add custom response header to a response coming from azure blob?

I'm making a curl request to my blob storage.

$ curl -kv 'https://myazstorage.blob.core.windows.net/myazcontainer/image.png?se=2021-11-17T09%3A23%3A23Z&sp=r&sv=2019-02-02&sr=b&sig=%fake/fake%3D' \
  --compressed \
  --output image.png

Available response headers for this request on that blob are.

Content-Length: 224250
Content-Type: image/png
Last-Modified: Tue, 16 Nov 2021 14:12:51 GMT
Accept-Ranges: bytes
ETag: "0x8D9A90B2CD4ED6B"
Vary: Origin
Server: Windows-Azure-Blob/1.0 Microsoft-HTTPAPI/2.0
x-ms-request-id: 39bf369d-b01e-00ca-3b94-db83fe000000
x-ms-version: 2019-02-02
x-ms-creation-time: Tue, 16 Nov 2021 14:12:51 GMT
x-ms-lease-status: unlocked
x-ms-lease-state: available
x-ms-blob-type: BlockBlob
x-ms-server-encrypted: true
Date: Wed, 17 Nov 2021 09:20:04 GMT

I'd like to add these two headers.

Origin: mywebsite.com
Cross-Origin-Resource-Policy: cross-origin

How can I add custom response headers that apply to every blob in my container? Can I do it via portal.azure.com interface?

Upvotes: 0

Views: 2388

Answers (2)

Lukasz Dynowski
Lukasz Dynowski

Reputation: 13610

Observations

@Gaurav Mantri answer is right. At the time this post is written you cannot add custom headers to a response generated from Azure Blob Storage.

"One possibility would be to have your users request the blob through a web application and then when the web application sends the response back, you should be able to add additional headers."

This is not possible for my application since a request to the azure blob originates from <img src="https://path.to/container/blob"> tag.

"Other option would be to make use of blob metadata. If the values of these custom response headers will not change, you can set them as metadata on the blob and then when you access the blobs directly, you will get the metadata headers in response back."

This is true however, extending headers by modifying container metadata (right clicking on container > and selecting Edit metadata), will generate custom response headers in the form of x-ms-metadata_key: metadata_value - that is not what I want. Furthermore, these headers have to be exposed in the Resource sharing (CORS) section.

Context

Let me start with the problem that brought me to this question in the first place by explaining the context. I'm trying to load images from a private Azure Blob Storage. Every URI for a blob storage contains a unique to a blob, a SAS Token generated with READ permission that for a limited amount of time allows reading the blob (image in my case). That works perfectly!

Problem

I load the blob/image directly with the img tag.

<img src="https://myStorage.blob.core.windows.net/myContainer/image.png?SAS_TOKEN">

Unfortunately, the resource is blocked by a browser due to CORS expresed by this error blocked:NotSameOriginAfterDefaultedTOSameOriginByCoep

blocked:NotSameOriginAfterDefaultedTOSameOriginByCoep Cross Origin Resource Policy Not Set

Fix

The fix is simple, I just have to add some of these headers to the response generated by Azure Blob.

  • Origin: mywebsite.com
  • Cross-Origin-Resource-Policy: cross-origin
  • Access-Control-Allow-Origin: https://mywebsite.com

Unfortunately, this fix is not possible because of the reasons specified in the Observations section.

Solution

The solution consist of two steps:

  1. Add crossorigin="anonymous" attribute to the img tag.
<img crossorigin="anonymous" src="https://myStorage.blob.core.windows.net/myContainer/image.png?SAS_TOKEN">
  1. Add https://mywebsite.com to Blob service on GET method for * allowed and exposed headers in Azure Storage Account Resource Sharing (CORS) section.

Resource Sharing (CORS)

Now every response from blob will have Access-Control-Allow-Origin: mywebsite.com header present.

Upvotes: 1

Gaurav Mantri
Gaurav Mantri

Reputation: 136196

AFAIK, it is not possible to add custom headers to response if you are accessing a blob directly from Azure Storage.

One possibility would be to have your users request the blob through a web application and then when the web application sends the response back, you should be able to add additional headers.

Other option would be to make use of blob metadata. If the values of these custom response headers will not change, you can set them as metadata on the blob and then when you access the blobs directly, you will get the metadata headers in response back.

Upvotes: 1

Related Questions