Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

CORS explained

Sunday, July 9th, 2017 by Servage

cors-hackerCross-origin resource sharing (CORS) is a feature that allows website content, such as external font files, to be requested between different domains. Although it doesn’t sound very obvious, CORS is used on a majority of websites. Let’s have a look into what CORS is all about and when it is used.

Same-Origin Policy

Before talking about CORS itself, let’s talk about a security feature related to it called the same-origin policy. It is a security feature built into web browser that prevents websites from sending certain types of requests to other websites. For example, www.example.com cannot send a POST request to www.example2.com using AJAX. The reason why this is blocked is because this allows for cross-site request forgery (CSRF) attacks. In CSRF attacks, a malicious website acts on behalf of the user on another website where the user is logged in.

In same-origin policy, the web browser checks if the domain of the request matches the domain where the request originates from. If it does not match, the browser will block the request. There are certain rules that are used to decide whether the request is allowed. The rules consists of protocol, domain name and port. A protocol could be HTTP, a domain could be example.com and the port for web servers is often 80. If any of these three is different, the request is blocked.

The Purpose of CORS

To prevent this type of behavior, browsers also implement CORS. CORS allows web servers to tell browsers that they may submit requests to other websites. For example, the above example could be allowed using CORS. CORS can be used as a whitelist to allow certain websites to submit requests, such as POST requests using AJAX, to other websites. This can be useful if you want to enable communication with a front-end application and an API that reside on different domains. For instance, you can have a React application at www.example.com and an API at api.example.com.

Enabling CORS

Cross-origin resource sharing is a feature that must be enabled on a web server. CORS is enabled by making the web server return certain HTTP headers that the browser evaluates for each request. The most important response header to set is Access-Control-Allow-Origin. Set this header to the address where you want to allow cross-requests requests from, for example https://www.example.com:8080. Multiple addresses can be separated by commas.

You can also set more advanced headers, such as Access-Control-Allow-Methods if you want to allow only some HTTP methods, such as GET and POST requests. These headers can be set in many ways on the server. Most common ways are to set them in your HTTP server configuration file, for example nginx.conf for Nginx or directly in code. PHP has the header() function that allows you to do this. You can also use various libraries that handle CORS automatically in the background, such as laravel-cors for the Laravel framework or lumen-cors for Lumen APIs.

CORS explained, 5.0 out of 5 based on 2 ratings
Categories: Guides & Tutorials, Tips & Tricks

Keywords:

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.