CORS and how to enable it in Apache Web Server

Antonio MoralesJanuary 20th, 2015Last Updated: January 15th, 2015

1 290 2 minutes read

Since some time ago, more and more techniques have been applied in Web Development to obtain information from the server in client side, avoiding the need to reload the page or moving into another to see a last minute update or the result of a form submitting.

AJAX is a group of interrelated Web development techniques used on the client-side to create asynchronous Web applications. The only problem when applying AJAX in our client-side application is the fact that it restricts the source of information to be in the same domain as the application in order to avoid security issues related to injection like XSS (by the way, here you have some security guidelines provided by the OWASP to improve an AJAX-based application).

Cross-origin resource sharing (CORS) is a mechanism that allows many resources (like JavaScript code, fonts, HTML snippets, etc) on a web page to be requested from another domain different and outside the one from which the request was originated. Specifically, this technique is very useful in AJAX because any call could get information from another domain.

As we stated before, such cross-domain requests would otherwise be forbidden by web browsers, due to the same origin security policy. CORS defines a way in which the browser and the server can interact to determine whether or not a request coming from a different domain is allowed. To allow that the client sends the origin domain of the request as a header (Origin header) and the server responds (in another header, Access-Control-Allow-Origin) which external domain/s it allows to receive AJAX request from:

Origin: http://www.example.com    # Header sent by the client
Access-Control-Allow-Origin: http://www.example.com    # Header sent by the server. * to allow all the domains

The server can also respond with some other headers to restrict for example which HTTP method request it allows (Access-Control-Request-Method header). The following list contains the headers used in CORS:

Access-Control-Allow-Origin
Access-Control-Allow-Credentials
Access-Control-Expose-Headers
Access-Control-Max-Age
Access-Control-Allow-Methods
Access-Control-Allow-Headers
Access-Control-Request-Method
Access-Control-Request-Headers

To get an explanation of them, please refer to the CORS Specification

There is a technique called JSONP which also allows to perform cross-domain requests exploiting the ability to get and execute external scripts using the HTML script tag (see article Getting started with JSON-P). The problem with JSONP is that it only allows GET requests and the response of the request has to be a valid JavaScript (normally using JSON and passing the name of the JavaScript function to the server in order to be executed on response to the request).

Apache configuration

If you have your application running on top on an Apache Web Server, you can enable CORS simply adding the following lines inside either the <Document>, <Location>, <Files> or <VirtualHost> sections of your server config (usually located in a *.conf file, such as httpd.conf or apache.conf), or within a .htaccess file:

#Solution using mod_headers and mod_setenvif
<IfModule mod_headers.c>
       SetEnvIf Origin (.*) AccessControlAllowOrigin=$1
       Header add Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin
       Header set Access-Control-Allow-Credentials true
</IfModule>

This solution uses two Apache modules: mod_headers and mod_setenvif. It sets an environment variable called AccessControlAllowOrigin with the value of Origin header if this header is present in the request headers. Then such environment variable is used to set the Access-Control-Allow-Origin header in the response.

Note: We could have used the wildcard as value of Access-Control-Allow-Origin header, but it seems some clients like AngularJS does not allow the wildcard as valid value for that header.