Welcome back to the Azure CORS Concepts, In the previous
article we saw that the browser was able to embed an image from Azure Storage account, because it categorized it as a simple request. Even though the BLOB storage CORS enables is able to restrict requests, the browser did not initiate the request with CORS enabled, so nothing changed. The image was still embedded. There are ways to explicitly enable CORS in the browser through HTML and scripting.
CORS in the Browser
To hint to the browser that this image request has CORS enabled and will therefore suddenly require the origin header, we can actually add an HTML attribute to the image tag called crossorigin. This type can be added to most elements that would trigger a simple request, like the video, link, and script tags.
<img crossorigin src=”https://hubfly.com/image.png”>
<video crossorigin src=”https://hubfly.com/video.mp4”
<link crossorigin src=”https://hubfly.com/style.css”>
<script crossorigin src=”https://hubfly.com/app.js”></script>
Back in the browser, here’s an example of the same image request to the Azure storage endpoint with CORS enabled.
Let’s take a look at the HTML here, and you can see I’ve added the crossorigin attribute. In the network requests, we can see this GET request, and sure enough, it has the origin header added, which denotes it’s a CROSS-enabled request.
If we take a look at the response headers, we can even see some CORS-related headers come through, including Allow-Credentials and Allow-Origin. Allow-credentials we’ll see about in more detail later. We can see since we’re initiating the request from localhost port 4200, that matches the Allow-Origin header, so Azure allows the request. Now jump back into our Azure Storage account and let’s change the allowed origin so we don’t allow localhost 4200.
In fact, let’s just do the localhost. And let’s jump back to the page, refresh, and watch the network pane:
And now we can see the request was canceled. Since we enabled CORS on this request, Azure has rejected the request to embed the image, and the browser has canceled the request. How did Azure specifically reject it? Well, the error log from the browser says the Allow-Origin header was missing.
This is how Azure deals with CORS requests. If the incoming request does not match any allowed origin, Azure will not even evaluate the CORS policy and return a normal response. Since the browser is looking for a CORS response, it doesn’t see one and cancels the request.
That’s it, I hope you have learned how to explicitly enable CORS in the browser through HTML and scripting. In the next article, we will see how to configure CORS to support multiple origins and credentials. Feel free to fill up the comment box below if you need any further assistance.