Transparency in Ajax Applications

This chapter is from the book

Ajax Security

Learn More Buy

This chapter is from the book

This chapter is from the book 

Ajax Security

Learn More Buy

Myth: Ajax applications are black box systems, just like regular Web applications.

If you are like most people, when you use a microwave oven, you have no idea how it actually works. You only know that if you put food in and turn the oven on, the food will get hot in a few minutes. By contrast, a toaster is fairly easy to understand. When you're using a toaster, you can just look inside the slots to see the elements getting hot and toasting the bread.

A traditional Web application is like a microwave oven. Most users don't know how Web applications work—and don't even care to know how they work. Furthermore, most users have no way to find out how a given application works even if they did care. Beyond the fundamentals, such as use of HTTP as a request protocol, there is no guaranteed way to determine the inner workings of a Web site. By contrast, an Ajax Web application is more like a toaster. While the average user may not be aware that the logic of the Ajax application is more exposed than that of the standard Web page, it is a simple matter for an advanced user (or an attacker) to "look inside the toaster slots" and gain knowledge about the internal workings of the application.

Black Boxes Versus White Boxes

Web applications (and microwave ovens) are examples of black box systems. From the user's perspective, input goes into the system, and then output comes out of the system, as illustrated in Figure 6-1. The application logic that processes the input and returns the output is abstracted from the user and is invisible to him.

Figure 6-1 The inner workings of a black box system are unknown to the user.

For example, consider a weather forecast Web site. A user enters his ZIP code into the application, and the application then tells him if the forecast calls for rain or sun. But how did the application gather that data? It may be that the application performs real-time analysis of current weather radar readings, or it may be that every morning a programmer watches the local television forecast and copies that into the system. Because the end user does not have access to the source code of the application, there is really no way for him to know.

White box systems behave in the opposite manner. Input goes into the system and output comes out of the system as before, but in this case the internal mechanisms (in the form of source code) are visible to the user (see Figure 6-2).

Figure 6-2 The user can see the inner workings of a white box system.

Any interpreted script-based application, such as a batch file, macro, or (more to the point) a JavaScript application, can be considered a white box system. As we discussed in the previous chapter, JavaScript must be sent from the server to the client in its original, unencrypted source code form. It is a simple matter for a user to open this source code and see exactly what the application is doing.

It is true that Ajax applications are not completely white box systems; there is still a large portion of the application that executes on the server. However, they are much more transparent than traditional Web applications, and this transparency provides opportunities for hackers, as we will demonstrate over the course of the chapter.

It is possible to obfuscate JavaScript, but this is different than encryption. Encrypted code is impossible to read until the correct key is used to decrypt it, at which point it is readable by anyone. Encrypted code cannot be executed until it is decrypted. On the other hand, obfuscated code is still executable as-is. All the obfuscation process accomplishes is to make the code more difficult to read by a human. The key phrases here are that obfuscation makes code "more difficult" for a human to read, while encryption makes it "impossible," or at least virtually impossible. Someone with enough time and patience could still reverse-engineer the obfuscated code. As we saw in Chapter 2, "The Heist," Eve created a program to de-obfuscate JavaScript. In actuality, the authors created this tool, and it only took a few days. For this reason, obfuscation should be considered more of a speed bump than a roadblock for a hacker: It may slow a determined attacker down but it will not stop her.

In general, white box systems are easier to attack than black box systems because their source code is more transparent. Remember that attackers thrive on information. A large percentage of the time a hacker spends attacking a Web site is not actually spent sending malicious requests, but rather analyzing it to determine how it works. If the application freely provides details of its implementation, this task is greatly simplified. Let's continue the weather forecasting Web site example and evaluate it from an application logic transparency point of view.

Example: MyLocalWeatherForecast.com

First, let's look at a standard, non-Ajax version of MyLocalWeatherForecast.com (see Figure 6-3).

Figure 6-3 A standard, non-Ajax weather forecasting Web site

There's not much to see from the rendered browser output, except that the server-side application code appears to be written in PHP. We know that because the filename of the Web page ends in .php. The next logical step an attacker would take would be to view the page source, so we will do the same.

<html>
  <head>
    <title>Weather Forecast</title>
  </head>
  <body>
    <form action="/weatherforecast.php" method="POST">
      <div>
        Enter your ZIP code:
        <input name="ZipCode" type="text" value=30346 />
        <input id="Button1" type="submit" value="Get Forecast" />
      </div>
    </form>
  </body>
</html>

There's not much to see from the page source code either. We can tell that the page uses the HTTP POST method to post the user input back to itself for processing. As a final test, we will attach a network traffic analyzer (also known as a sniffer) and examine the raw response data from the server.

HTTP/1.1 200 OK
Server: Microsoft-IIS/5.1
Date: Sat, 16 Dec 2006 18:23:12 GMT
Connection: close
Content-type: text/html
X-Powered-By: PHP/5.1.4

<html>
  <head>
    <title>Weather Forecast</title>
  </head>
  <body>
    <form action="/weatherforecast.php" method="POST">
      <div>
      Enter your ZIP code:
      <input name="ZipCode" type="text" value=30346 />
      <input id="Button1" type="submit" value="Get Forecast" />
      <br />
      The weather for December 17, 2006 for 30346 will be sunny.
      </div>
    </form>
  </body>
</html>

The HTTP request headers give us a little more information to work with. The header X-Powered-By: PHP/5.1.4 confirms that the application is indeed using PHP for its server-side code. Additionally, we now know which version of PHP the application uses (5.1.4). We can also see from the Server: Microsoft-IIS/5.1 header that the application uses Microsoft Internet Information Server (IIS) version 5.1 as the Web server. This implicitly tells us that Microsoft Windows XP Professional is the server's operating system, because IIS 5.1 only runs on XP Professional.

So far, we have collected a modest amount of information regarding the weather forecast site. We know what programming language is used to develop the site and the particular version of that language. We know which Web server and operating system are being used. These tidbits of data seem innocent enough—after all, what difference could it make to a hacker if he knew that a Web application was running on IIS versus Tomcat? The answer is simple: time. Once the hacker knows that a particular technology is being used, he can focus his efforts on cracking that piece of the application and avoid wasting time by attacking technologies he now knows are not being used. As an example, knowing that XP Professional is being used as the operating system allows the attacker to omit attacks that could only succeed against Solaris or Linux operating systems. He can concentrate on making attacks that are known to work against Windows. If he doesn't know any Windows-specific attacks (or IIS-specific attacks, or PHP-specific attacks, etc.), it is a simple matter to find examples on the Internet.

Example: MyLocalWeatherForecast.com "Ajaxified"

Now that we have seen how much of the internal workings of a black box system can be uncovered, let's examine the same weather forecasting application after it has been converted to Ajax. The new site is shown in Figure 6-4.

Figure 6-4 The Ajax-based weather forecast site

The new Web site looks the same as the old when viewed in the browser. We can still see that PHP is being used because of the file extension, but there is no new information yet. However, when we view the page source, what can we learn?

<html>
  <head>
  <script type="text/javascript">

    var httpRequest = getHttpRequest();

    function getRadarReading() {
      // access the web service to get the radar reading
      var zipCode = document.getElementById('ZipCode').value;
      httpRequest.open("GET",
        "weatherservice.asmx?op=GetRadarReading&zipCode=" +
        zipCode, true);
      httpRequest.onreadystatechange = handleReadingRetrieved;
      httpRequest.send(null);
    }

    function handleReadingRetrieved() {
      if (httpRequest.readyState == 4) {
        if (httpRequest.status == 200) {
          var radarData = httpRequest.responseText;
          // process the XML retrieved from the web service
          var xmldoc = parseXML(radarData);
          var weatherData =
            xmldoc.getElementsByTagName("WeatherData")[0];
          var cloudDensity = weatherData.getElementsByTagName
            ("CloudDensity")[0].firstChild.data;
          getForecast(cloudDensity);
        }
      }
    }
    function getForecast(cloudDensity) {
      httpRequest.open("GET",
        "forecast.php?cloudDensity=" + cloudDensity,
        true);
      httpRequest.onreadystatechange = handleForecastRetrieved;
      httpRequest.send(null);
    }

    function handleForecastRetrieved() {
      if (httpRequest.readyState == 4) {
        if (httpRequest.status == 200) {
          var chanceOfRain = httpRequest.responseText;
          var displayText;
          if (chanceOfRain >= 25) {
            displayText = "The forecast calls for rain.";
          } else {
            displayText = "The forecast calls for sunny skies.";
          }
          document.getElementById('Forecast').innerHTML =
            displayText;
        }
      }
    }

    function parseXML(text) {
      if (typeof DOMParser != "undefined") {
        return (new DOMParser()).parseFromString(text,
          "application/xml");
      }
      else if (typeof ActiveXObject != "undefined") {
        var doc = new ActiveXObject("MSXML2.DOMDocument");
        doc.loadXML(text);
        return doc;
      }
    }

  </script>
</head>
</html>

Aha! Now we know exactly how the weather forecast is calculated. First, the function getRadarReading makes an asynchronous call to a Web service to obtain the current radar data for the given ZIP code. The radar data XML returned from the Web service is parsed apart (in the handleReadingRetrieved function) to find the cloud density reading. A second asynchronous call (getForecast) passes the cloud density value back to the server. Based on this cloud density reading, the server determines tomorrow's chance of rain. Finally, the client displays the result to the user and suggests whether she should take an umbrella to work.

Just from viewing the client-side source code, we now have a much better understanding of the internal workings of the application. Let's go one step further and sniff some of the network traffic.

HTTP/1.1 200 OK
Server: Microsoft-IIS/5.1
Date: Sat, 16 Dec 2006 18:54:31 GMT
Connection: close
Content-type: text/html
X-Powered-By: PHP/5.1.4

<html>
  <head>
  <script type="text/javascript">

...
</html>

Sniffing the initial response from the main page didn't tell us anything that we didn't already know. We will leave the sniffer attached while we make an asynchronous request to the radar reading Web service. The server responds in the following manner:

HTTP/1.1 200 OK
Server: Microsoft-IIS/5.1
Date: Sat, 16 Dec 2006 19:01:43 GMT
X-Powered-By: ASP.NET
X-AspNet-Version: 2.0.50727
Cache-Control: private, max-age=0
Content-Type: text/xml; charset=utf-8
Content-Length: 301

<?xml version="1.0" encoding="utf-8"?>
<WeatherData>
  <Latitude>33.76</Latitude>
  <Longitude>-84.4</Longitude>
  <CloudDensity>0</CloudDensity>
  <Temperature>54.2</Temperature>
  <Windchill>54.2</Windchill>
  <Humidity>0.83</Humidity>
  <DewPoint>49.0</DewPoint>
  <Visibility>4.0</Visibility>
</WeatherData>

This response gives us some new information about the Web service. We can tell from the X-Powered-By header that it uses ASP.NET, which might help an attacker as described earlier. More interestingly, we can also see from the response that much more data than just the cloud density reading is being retrieved. The current temperature, wind chill, humidity, and other weather data are being sent to the client. The client-side code is discarding these additional values, but they are still plainly visible to anyone with a network traffic analyzer.

Comparison Conclusions

Comparing the amount of information gathered on MyLocalWeatherForecast.com before and after its conversion to Ajax, we can see that the new Ajax-enabled site discloses everything that the old site did, as well as some additional items. The comparison is presented on Table 6-1.

Table 6-1. Information Disclosure in Ajax vs. Non-Ajax Applications