Home » Web Servers » CORS and how to enable it in Apache Web Server

About Antonio Morales

Antonio Morales
Antonio has graduated from Computer Engineering in the University of Seville. He also holds a Master degree in Engineering and Software Technology from the University of Seville as well. During his working life he has been involved in a large number of projects both national and European projects from Digital Identity and Security to Semantic Search, NLP and Machine Learning. He is also committer in the Apache Software Foundation in the Apache Stanbol project and collaborator of other Apache projects. Mainly involved in projects based on Java and Semantic technologies, he loves all the new technologies both front-end and back-end side, always eager to learn new technologies to be applied to new projects.

CORS and how to enable it in Apache Web Server

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.

References

(0 rating, 0 votes)
You need to be a registered member to rate this.
1 Comment Views Tweet it!
Do you want to know how to develop your skillset to become a Web Rockstar?
Subscribe to our newsletter to start Rocking right now!
To get you started we give you our best selling eBooks for FREE!
1. Building web apps with Node.js
2. HTML5 Programming Cookbook
3. CSS Programming Cookbook
4. AngularJS Programming Cookbook
5. jQuery Programming Cookbook
6. Bootstrap Programming Cookbook
and many more ....
I agree to the Terms and Privacy Policy

1
Leave a Reply

avatar
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Javed Recent comment authors

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
newest oldest most voted
Notify of
Javed
Guest
Javed

Thanks for sharing a great article with us, it really amazing article.

For information purpose, You can also have a look at this article http://www.ipragmatech.com/enable-cors-using-htaccess/ which allow CORS header.