What Is ‘CORS’? What Is It Used For?

CORS is a protocol and security standard for browsers. It is very important for API development. Modern browsers use CORS in APIs such as XMLHttpRequest or Fetch to mitigate the risks of cross-origin HTTP requests. It allows you to maintain the integrity of your website. But what is CORS? What is it used for? In this article, you will find all the details.

What Is CORS?

So what is CORS? CORS means Cross-Origin Resource Sharing. It is a browser mechanism that provides controlled access to resources located outside of a given domain. Hence, you can host static content at “www.example.com” and the backend API at “api.example.com.” In this case, a resource from one domain requests a resource from another domain. This type of request is known as the CORS request.

However, if not properly configured and implemented, CORS can expose your site to potential cross-domain attacks. As a result, you are very likely to face different security threats, like cross-site request forgery (CSRF). For this reason, you need to be very careful with the configuration of CORS.

What Is CORS – How Does Cross-Origin Resource Sharing Work?

In Cross-Origin Resource Sharing workflow, a script loaded from one origin attempts to make a request to another origin.

The browser automatically makes a preflight request to the external web server by utilizing the HTTP method OPTIONS. The preflight request has several headers. The external web server validates the headers. It ensures that scripts from the specific origin are allowed to make the actual request. They use the nominated request method and custom request headers specified in the preflight request headers.

Once the verification is done, the external web server will respond with its own set of HTTP headers. These headers define the range of acceptable origins and request methods. Also, it defines if it’s acceptable to send any credentials, including cookies and authentication headers. Besides, it helps you determine the amount of time the browser should keep the response.

What Is CORS – What Are The Access Control Request Headers, And What Do They Do?

The Access-Control-Request-Headers is a request-type header. It is used by browsers when issuing a preflight request. It lets the server know which HTTP headers the client might send when the actual request is made.

The functionality of access control request headers is straightforward. Let’s take a look at it.

• Origin – It’s the domain or subdomain that the script making the request was served to the browser from
• Access-Control-Request-Method – It’s the method that the script utilizes in the actual request to follow
• Access-Control-Request-Headers – These are custom headers. The browser expects to send them along with the actual request to follow

What Are Access Control Allow Headers?

The HTTP Access-Control-Allow-Headers is a response-type header. It is used to indicate the HTTP headers.

Read: SOAP vs REST

What Are HTTP Request Headers?

An HTTP request header is a component of a network packet. It is sent by a browser or client to the server to request a specific page or data.

These are the HTTP request headers associated with the requesting domain.

• Origin
• Access-Control-Request-Method
• Access-Control-Request-Headers

What Is CORS – What Are The Different Types Of Headers?

• Access-Control-Allow-Origin – Access-Control-Allow-Origin reflects the “Origin” request header’s content, provided that it matches your access list.
• Access-Control-Allow-Credentials – Access-Control-Allow-Credentials is a Boolean header. When set to true, it tells browsers to expose the response to the frontend JavaScript code. The credentials consist of cookies, authorization headers, and TLS client certificates.
• Access-Control-Expose-Headers – The Access-Control-Expose-Headers is an HTTP response header. It determines which headers are to be exposed to the client scripts on the web.
• Access-Control-Max-Age – The Access-Control-Max-Age is a header request. It determines how long the browser should retain the response to the cross-origin request’s preflight check in its cache. It helps reduce the overhead of future cross-origin requests.
• Access-Control-Allow-Methods – The Access-Control-Allow-Method is a response header. It specifies one or more methods allowed when accessing a resource in response to a preflight request.
• Access-Control-Allow-Headers – The Access-Control-Allow-Headers is another response header. It is used in response to a preflight request that includes the Access-Control-Request-Headers. It helps you determine which HTTP headers can be used during the actual request.

Are There Any Caveats For Using The “access control allow” Headers?

The “access control allow” headers are more complicated than the request headers. Because they lack proper implementation of the standard in most browsers. But what are the reasons? Let’s find them out.

Access-Control-Allow-Origin

At first glance, you might feel that the Access-Control-Allow-Origin header will support a comma-separated list or a wildcard subdomain. You think that you can statically set them to match all of the domains and subdomains. You feel that it would drastically reduce the number of times the browser needs to do preflight requests in a session. But unfortunately, it’s not the case. It will result in undefined behavior. For example, it supports a generic wildcard, which can disable the check in the browser altogether. As a result, the user data will be exposed to security threats.

Read: What Is an API Key?

What’s The Issue With The Wildcard?

If you set “Access-Control-Allow-Origin” to “*”, it will disable the same-origin policy. As a result, the browser will allow almost any requests from any script to the cross-origin resource. It can result in various issues. For example, the browser will no longer filter the origins. Hence, phishing sites can make a request to the resource. You never want it to happen.

You might be thinking about copying and pasting wildcards from popular forums. You feel it will help you properly use credentials, like Authorization HTTP headers or cookies. But in reality, they will make your cross-origin request fail. Because browsers don’t allow you to set the “Access-Control-Allow-Credentials” header if the “Access-Control-Allow-Origins” is set to a wildcard.

How About Reflecting Just The Origin?

You might be thinking about reflecting just the origin. It seems to be a smart approach. However, it completely bypasses the browser’s ability to prevent setting both the “Access-Control-Allow-Credentials” header and “Access-Control-Allow-Origins” wildcard.

What Is CORS – Principals Of A CORS Attack

The risks of an attack depend on the nature of the misconfiguration. Also, it depends on how you’re authenticating requests.

Types Of CORS Misconfigurations

There are two main types of CORS misconfigurations. They are:

• Access-Control-Allow-Origin (ACAO): ACAO facilitates two-way communication with third-party websites. Any misconfiguration in it can exploit sensitive data, like usernames and passwords.
• Access-Control-Allow-Credentials (ACAC): ACAC allows third-party websites to execute privileged actions like the authenticated users. For example, it enables the sites to change the password and contact information.

Impact and Risk

A misconfigured CORS can exploit your application to high-risk security threats. It allows third-party sites to carry out privileged requests through your website’s authenticated users. Therefore, it will significantly impact the confidentiality and integrity of sensitive data. For example, third-party sites can retrieve the credit card information saved by the user.

However, the risk is low for applications that deal with public data and require resources to be sent to other origins. However, you need to perform penetration testing to identify the appropriate risk level.

What Is CORS – What Is The Best Practice To Enable CORS?

You need to make valid requests to the cross-origin resource. Also, you have to ensure that the browser doesn’t allow every script it loads. You should be validating all of the access control request headers against appropriate access lists. However, it can be a bit tricky to implement, especially with the origin header. Also, the web is full of minor misconfigurations in parsing methods and bad regex. It leaves numerous sites exposed to security threats. But you can do it safely by keeping it simple. For example, you can compare a secure string against an array of trusted values. If it doesn’t match, you will get a “403 Forbidden” response.

You might want to support more than one “Origin.” However, you don’t have a lot of choices until browsers support a list of origins in the “access-control-allow-origin” header. However, you can reflect the validated “Origin” request header into the “access-control-allow-origin” header.

Read: REST API Interview Questions

Libraries, Frameworks, & Reverse-Proxies

Most languages and web frameworks come with a pre-built solution to securely handle these issues. Therefore, you don’t have to give extra effort. However, few languages and frameworks don’t implement proper validation. Hence, you need to validate the operation of the library. If everything is fine, you can start using it.

Also, you can consider using an established web server, like Nginx or Apache, as a reverse proxy. You can use its filter rules to reflect the headers, provided that they satisfy the validation. However, keep in mind that they use regex. Hence, you need to be very careful with creating the search string. It will help you safely perform the validation. Many people make mistakes with the search string. As a result, they don’t get the expected results.

What Is CORS – How Can You Enable CORS On The Origin Server?

To enable CORS for static resources, like CSS, fonts, JavaScript, and images, you have to add this code to your server:

Apache

Nginx

Make sure you test your website with Firefox and Internet Explorer. They are known to cause problems if CORS is not handled correctly.

Does Cross-Origin Access Control Allow More Freedom?

Yes, it allows more freedom and functionality than purely same-origin requests. Also, it is more secure than simply allowing all cross-origin requests.

Apilayer offers a suite of highly productive APIs. By utilizing them, you can boost your development workflow. Try them now for free.

FAQ

What is CORS and how does it work?

Cross-Origin Resource Sharing (CORS) is an HTTP-header-based mechanism. It allows a server to indicate any origins, like domain, scheme, or port, other than its own. It enables the server to explicitly whitelist certain origins. Thus, they can bypass the same-origin policy.

What is an example of CORS?

Let’s consider a scenario where you can host static content at a domain, like www.example.com. If you have a backend API, you can host it at a subdomain, like api.example.com. Here, a resource from one subdomain is requesting a resource from another subdomain.

What is CORS in web API?

Cross-origin resource sharing (CORS) is a browser security feature. It prevents cross-origin HTTP requests that are initiated from scripts from running in the browser.

Is CORS really needed?

Yes, CORS is really needed. It’s an important protocol for making cross-domain requests possible. It allows you to whitelist requests to your web server from certain locations. You can specify response headers like ‘Access-Control-Allow-Origin’.