J AVA S CRIPT

Introduction to Ajax Security

Client-side scripting code (JavaScript in particular) is the glue that holds Ajax together. Without the ability to perform complex actions on the client tier, we would be relegated to developing strictly thin-client, traditional Web applications circa 1995. The other technology facets of Ajax—asynchronicity and XML—are useless without script code to command them. JavaScript is required to send an asynchronous request and to handle the response. JavaScript is also required to process XML or to manipulate the DOM without requiring a complete page refresh.

The JavaScript Standard

While it is possible to write the client-side script of Ajax applications in a language other than JavaScript, it is the de facto standard for the Web world. As such, we will refer to JavaScript, alone, throughout this chapter. However, it is important to note that the security risks detailed in this chapter are not specific to JavaScript; any scripting language would share the same threats. Switching to VBScript or any other language will not help you create a more secure application.

To demonstrate this, let’s look at a very simple example application before and after Ajax. This application displays the current time, along with a Refresh button.

If we look at the HTML source code for the page shown in Figure 1-3, we can see that there is really not that much to see.

CHAPTER1 INTRODUCTION TOAJAXSECURITY

<body>

<form action="currenttime.php" method="GET"> The current time is: 21:46:02

</body> </html>

Now, let’s look at the same application (see Figure 1-4) after it’s been “Ajaxified”:

ANAJAX PRIMER

Figure 1-4 An Ajax-enabled Web application that displays the current time

On the surface, the application looks exactly the same as its predecessor. Under the cov- ers, however, it is very different. Pressing the Refresh button no longer causes a complete page refresh. Instead, it simply calls back to the server to get the current time. When the response fragment is received from the server, the page updates only the time portion of the page text. While this may seem a little silly given the simplicity of the application, in a larger, real-world application, the usability improvements from this partial update could be very significant. So, let’s look at the HTML source code and see what has changed: <html>

<title>What time is it?</title> <script type="text/javascript"> var httpRequest = getHttpRequest(); function getHttpRequest() {

var httpRequest = null; if (window.XMLHttpRequest) {

httpRequest = new XMLHttpRequest(); } else if (window.ActiveXObject) {

httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); }

return httpRequest; }

function getCurrentTime() {

httpRequest.open("GET", "getCurrentTime.php", true); httpRequest.onreadystatechange = handleCurrentTimeChanged; httpRequest.send(null); } function handleCurrentTimeChanged() { if (httpRequest.readyState == 4) { var currentTimeSpan = document.getElementById('currentTime'); if (currentTimeSpan.childNodes.length == 0) { currentTimeSpan.appendChild( document.createTextNode (httpRequest.responseText)); } else { currentTimeSpan.childNodes[0].data = httpRequest.responseText; } } } </script> </head> <body>

The current time is: <span id="currentTime">18:34:44</span> <input type="button" value="Refresh"

onclick="getCurrentTime();"/> </body>

</html>

We can certainly see that the Ajax application is larger: There are four times as many lines of code for the Ajax version as there are for the non-Ajax version! Let’s dig a little deeper into the source code and find out what has been added.

The application workflow starts as soon as the page is loaded in the browser. The vari- able httpRequestis set by calling the method getHttpRequest. The getHttpRequest

method creates an XMLHttpRequestobject, which is the object that allows the page to make asynchronous requests to the server. If one class could be said to be the key to Ajax, it would be XMLHttpRequest(sometimes abbreviated as XHR). Some of the key properties and methods of XHR are

open Specifies properties of the request, such as the HTTP method, to be used and the URL to which the request will be sent. It is worth noting that open does not actu- ally open a connection to a Web server; this is done when the send method is called.

send Sends the request.

onreadystatechange Specifies a callback function that will be called whenever the state of the request changes (for instance, from open to sent).

readyState The state of the request. A value of 4 indicates that a response has been received from the server. Note that this does not necessarily indicate that the request was successful.

responseText The text of the response received from the server.

The XHR object is first used when the user presses the Refresh button. Instead of sub- mitting a form back to the server as in the first sample, the Ajax sample executes the JavaScript method getCurrentTime. Thismethoduses XHR to send an asynchronous request to the page getCurrentTime.phpand registers the function

handleCurrentTimeChangedas a callback method (that is, the method that will be called when the request state changes). Because the request is asynchronous, the application does not block while it is waiting for the server’s response. The user is only blocked for the fraction of a second that getCurrentTimetakes to execute, which is so brief that the vast majority of users would not even notice.

When a response is received from the server,handleCurrentTimeChangedtakes the response, which is simply a string representation of the current time, and alters the page DOM to reflect the new value. The user is only briefly blocked, as shown in Figure 1-5. None of this would be possible without JavaScript.

Figure 1-5 Ajax Application Workflow

Same Origin Policy

The Same Origin Policy is the backbone of the JavaScript security model. In short, the JavaScript for any origin can only access or manipulate data from that same origin. An origin is defined by the triplet Domain + Protocol + Port. For example, JavaScript on a Web page from google.comcannot access the cookies for ebay.com. Table 1-1 shows what other pages can be accessed by JavaScript on the page http://www.site.com/page.html.

Table 1-1 Applying the Same Origin Policy against http://www.site.com/page.html

URL Access allowed? Reason

http://www.site.com/dir/page2.html Yes Same domain, protocol, and port

https://www.site.com/page.html No Different protocol

http://sub.site.com/page.html No Different host

http://site.com/page.html No Different host

http://www.site.com:8080/page.html No Different port

CHAPTER1 INTRODUCTION TOAJAXSECURITY

User

User ServerServerServer

Make request

Receive response Create XHR object

Continue using application

The Same Origin Policy also prevents JavaScript from opening XMLHttpRequeststo any server other than the same Web server that the user is currently visiting.

XML

XML is the last component of Ajax; and, to be perfectly honest, it is probably the least important component. JavaScript is the engine that makes the entire process of partial updates possible; and asynchronicity is a feature that makes partial updates worth doing; but, the use of XML is really just an optional way to build the requests and responses. Many Ajax frameworks use JavaScript Object Notation (JSON) in place of XML.

In our earlier example (the page that displayed the current time) the data was transferred across the network as plain, unencapsulated text that was then dropped directly into the page DOM.

In document Ajax Security pdf (Page 33-38)