Azure Storage CORS Concepts - Introduction - Part One

Introduction 

 

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 that originates from one origin to another, and they evaluate some rules for whether to allow or disallow the request. Not all cross-origin requests are blocked by the browser. These kinds of requests are referred to as a simple request. Some examples 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 an example: 

The website hubfly.com sends the request an image from visithubfly.com. It has requested 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 that in the below image there is no CORS header that has 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 simply requested, 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 has not initiated the CORS request, Azure will not return any CORS related headers in the response.

 

 

Note

All CORS requests 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. In the 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.