Overview: Cross-Origin requests are additional HTTP headers that tell browsers to request for resources outside of the domain it is accessing. Web browsers, by default, do not allow you to make cross-origin HTTP requests, which may be due to security or privacy reasons. CORS is a process by which data or site can be shared by a third party when needed.
In this tutorial, we are going to show you how to enable CORS for two widely used amazon services
We will be covering the following topics :
- Introduction to CORS :
Cross-Origin Resource Sharing (CORS) is a technique that uses a website to access from domains other than the origin domain. It adds new HTTP pages and lets a web application run at one origin by permitting to access selected servers from different origins.
CORS acts as a browser security feature that restricts, cross-origin HTTP requests that are initiated from scripts running in the browser.
A web application executes a cross-origin HTTP than its origin when request resource has a different origin that can be a domain, protocol, or port.
CORS determines whether to allow or block specific requests made at cross-origin. It enables interaction between browser and server.
It is a description of new HTTP headers and it allows browsers request, remote URL only when permitted
Cross-origin HTTP requests can be made to:
- A different domain (for example, from example.com to amazondomains.com)
- A different subdomain (for example, from example.com to petstore.example.com)
- A different port (for example, from example.com to example.com:10777)
- A different protocol (for example, from https://example.com to http://example.com)
Example: CORS configuration :
Below CORS configuration will enable GET, PUT and POST requests that are coming from http://example.com domain only.
<CORSConfiguration>
<CORSRule>
<AllowedOrigin>http://example.com</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>PUT</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<AllowedHeader>*</AllowedHeader> #{Instead of * you only allow required domain }
</CORSRule>
</CORSConfiguration>
2. CORS in AWS :
AWS has multiple services to which we can configure CORS and take advantage of it.
Here, we will be discussing two services where CORS is more useful and important
3. CORS in Amazon S3 Hosting
Amazon Simple Storage Service or S3 is object storage on the Internet, it provides you to store and retrieve data. It is secure, durable and it automatically scales your storage. As you use it accordingly with your requirement and hence you end up paying only for the storage you used.
CORS configurations for Amazon S3 are more useful and helpful when we are using a bucket for static hosting or resource storage
For further information about Amazon S3, click Amazon S3 Guide.
Enabling CORS in S3 bucket :
- Open Amazon S3 bucket and select the bucket that you want to configure CORS
2. Go to the Permissions tab and select CORS configuration
A window will display sample configuration as shown below.
Now, you can add configurations in this window for enabling CORS.
Some use cases and examples are given below.
Scenario 1 :
We are hosting a website in the Amazon S3 bucket. The users use, a static URL to access the site.
Now, we want to adopt JavaScript on web pages stored in this bucket for authenticating requests against the same bucket by using the Amazon S3 API endpoint.
Scenario 2 :
We are hosting a website in an Amazon S3 bucket and storing resources like fonts, images, etc.in another bucket. Now we have to configure CORS, to enable JavaScript on web pages from the first bucket to load resources from another bucket
Scenario 3 :
We have a website hosted on a server (local, S3, etc.,) and storing media content like videos and images in the S3 bucket and serving them.
Now, we have to configure CORS, to access media content from S3 to the website.
4. CORS in AWS API gateway
Amazon Application Programming Interface (API) Gateway is an AWS service that makes it easy for developers to create, publish, maintain, monitor secure application programming interfaces and also help them to create REST and Websocket APIs.
API developers can create APIs that access AWS or other web services. It can also access data that is stored in the AWS Cloud.
It can be created for our client applications or can be made available to the third-party application.
We can send an API request detailing the information we want and it also allows the data of our site to be altered on other applications.
For further reference click API Gateway Guide.
In API Gateway, there is no central location or path for the CORS configuration. Once we create API and add resources, we have to enable CORS for each resource individually.
We will learn how to enable CORS in API Gateway
- Log into AWS Console and access API gateway.
2. Select the API for which we need to enable CORS
3. Select a resource and click on Actions as shown below
4. Now from Action box, select Enable CORS option, configure the methods and click Enable CORS and replace existing CORS headers as shown below
We should follow the same steps for each resource that needs a CORS configuration.
Conclusion
The good thing about CORS is that it allows your servers or HTTP request to specify which origin to be accessed, because of this feature your servers are safe from being attacked by external resources.
