Categories:

Azure Storage CORS Concepts: Introduction – Part 1

CORS stands for Cross-Origin Resource Sharing (CORS). CORS itself an HTTP feature that restricts what resources or web applications can access the domains. Resources can be anything from a web page it can be an image, videos, CSS, or script. Anything that can be potentially requested by the browser is the resource.

What does the cross-origin in CORS refer to?

Origin is the first part of the URL,

One browser sends a request originates from the one origin to another, they evaluate some rules for whether to allow or disallow the request. Not all cross-origin requests are blocked by the browser. This kind of requests are referred to a simple request example include,

Typical “Simple” Requests are,

  • Embedding an image.
  • Embedding a Script.
  • Linking to CSS
  • Form data submission

If you work web application regularly you probably have run into the many restrictions embedding javascript from CDN and linking the images in cross domains. The browser inspects the request determined to be restricted this is where CROSS comes in the play.

Once the browser determines the request to be restricted to use CORS to allow or disallow the request. How does the browser make that determination, here is the example,

The website hubfly.com sends the request an image from visithubfly.com. Since the request to embed an image even though cross-origin requests the browser will not enable cross by default because embedding an image is a simple request. So the image will be embedded with this.

In the browser, I have this demo page setup to request an image from the demo azure storage account as CORS enabled. This represents the example for visithubfly.com

Now open up the dev tools let close the console and inspect the image you can see here it is simply embedded.

If you look at the network traffic and reload the page we can see a single request goes out. See the below image there is no CORS header as been set but the request succeeds.

The server visithubfly.com enabled CORS restriction and disallow the request surprisingly the answer is no. Since the browser simple request it will not send the origin header which is required for all CORS requests. The server could return CORS rule in the response header

“Access-Control-Allow-Origin”: visithubfly.com

But in this case, the browser not treating as CORS request will ignore any CORS header in the response.

If we up into the Storage accounts in the Azure Portal you can see CORS already enabled for this demo account.

Let’s look at the response for this embedded image from Azure. There is no CORS related header is on the response. This is because of the way Azure responds to the request. Since the browser not initiated the CORS request so Azure will not return any CORS related headers in the response.

Note: All CORS request must include the Origin header

These are the headers when working with CORS.

  • AllowedOrigins – The Origin domains make a request against the storage service via CORS.
  • AllowedMethods – The methods that the origin may use for CORS request. For example, PUT and GET requests are permitted.
  • AllowedHeaders – The request headers that the origin domain may specify on the characters.
  • ExposeHeaders – The response headers that may be sent in the response to the CORS request and exposed by the browser to the request issuer
  • MaxAgeInSeconds – The maximum amount of time that a browser should cache the preflight OPTIONS request.

In this article, you have learned CORS concepts in Azure storage. Next Article we will see the CORS in the browser. Feel free to fill up the comment box below if you need any further assistance.

Sharing is Caring!

Leave a Reply

Your email address will not be published. Required fields are marked *