Starting from today, all interactive web apps make use of AJAX, which is a great technique that enables the web browser to quietly transfer data to the server without refreshing or reloading the page. A very popular example of AJAX in use is different online chat apps such as Facebook Chat or Google Hangouts.
AJAX runs using the XMLHTTPRequest() method of java script and this enables a URL to be loaded without issuing a page refresh, as said. This runs pretty well until the same-origin policy is encountered, but fetching or transfering data to a server or URL which is at a different origin is a different story altogether.
Let us try to load the home page of latesthackingnews.com using a web page located at output.ex.com through an XMLHTTPRequest() call. We’ll use the following code:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>AJAX</title>
</head>
<body>var request = new XMLHTTPRequest();
request.open(‘GET’, ‘http://latesthackingnews.com’, true);
request.send();</body>
</html>
After running the previous code, we get the following security error in Google Chrome browser:
XMLHttpRequest cannot load http://latesthackingnews.com. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin > ‘http://localhost:8080’ is therefore not allowed access.
This error looks interesting as it mentions the ‘Access-Control-Allow-Origin’ header and shows us that latesthackingnews.com completely needs this header, hence the crossdomain XMLHTTPRequest() will drop as per security enforcement. Imagine that a web page running at origin A sends an HTTP request to origin B fooling the user and loads up the page, which may include CSRF tokens, and then they can be used to perform a CSRF attack.
So the same-origin policy essentially makes calling separate origin documents through AJAX functions an issue.