AlexAitken.net

CSRF Protection via X-Browser jQuery Ajax Hijack

October 28th, 2010 § 0

Cross-Site Request Forgeries (CSRF) exploit the trust that a site has within a user’s browser. By inducing clicks on links to sites where users are suspected to be authenticated, perpetrators can execute transactions under the umbrella of a user’s current session. Requiring newly generated parameter values with each new POST or GET is one way for programmers to protect against CSRF. But while implementing this requirement in page-driven applications is fairly straight-forward, ajaxified apps make things more complicated. The following approach lets us abstract the complications out of our day-to-day so we can code both currently and securely.

Instead of

bank.com/withdraw?account=bob&amount=1000000&for=mallory

we’re now going to require

bank.com/withdraw?account=bob&amount=1000000&for=mallory&csrfProtect=1234567890

where the csrfProtect value is updated with each server hit. As new pages are constructed on the application server, the csrfProtect parameter and latest value are appended to any static links or actions that kick off GETs or POSTs. Thus when legit users fire the requests from the pages returned to their browsers, they also supply a current csrfProtect value that signals all is aboveboard.

The complication in these being fired through ajax is twofold. First, for each request we need to dynamically detect and include a current csrfProtect value. Then on the response, because the app server isn’t given the chance to construct a new page, we need to iterate through in-page links and actions and update their parameter value.

The easiest way I’ve found to keep up with the changing csrfProtect value is to simply require it be supplied in any page that might instigate ajax requests, and as part of the data in any ajax response (in the code below, the value is transported with input[type=hidden].csrfProtect). With these hooks and a standardization of IE’s implementation in place, we can modify the XMLHttpRequest object’s prototype with a new csrfProtect property and a custom open method that intercepts and updates requests before they are sent to the server. jQuery’s ajaxComplete method keeps XMLHttpRequest.prototype.csrfProtect up-to-date and ready for the next request.

/*
in­clude jQuery
in­clude ht­tp://code.google.com/p/xm­l­ht­tpre­quest to stand­ard­ize XM­L­Ht­tpRe­quest as con­struct­or func­tion in IE<7 (info at ht­tp://www.il­in­sky.com/art­icles/XM­L­Ht­tpRe­quest/)
*/

//over­ride jQuery's de­fault IE<7 call for the Act­iveX ob­ject with stand­ard con­struct­or (avail­able to IE<7 via il­in­sky.com script)
$.ajax­Setup({
  xhr:func­tion(){re­turn new XM­L­Ht­tpRe­quest();}
});

(func­tion(){
  var $links,//in-page ele­ments whose csr­f­Pro­tect param value needs up­dat­ing on ajax re­sponses 
    b;//'?' or '&' de­pend­ing on if re­ques­ted URL already has params

  //Store off nat­ive XM­L­Ht­tpRe­quest.open as XM­L­Ht­tpRe­quest.nat­i­ve­Open
  XM­L­Ht­tpRe­quest.pro­to­type.nat­i­ve­Open = (func­tion(){
    re­turn XM­L­Ht­tpRe­quest.pro­to­type.open;
  }());

  //Re­define XM­L­Ht­tpRe­quest.open to in­ter­cept and modi­fy re­quest
  XM­L­Ht­tpRe­quest.pro­to­type.open = func­tion(){

    var a=ar­gu­ments;//ori­gin­ally sup­plied ajax ar­gu­ments

    //Mutate first in­stance (ini­tial re­quest) of XM­L­Ht­tpRe­quest with csr­f­Pro­tect prop­erty and value if 'csr­f­Pro­tect' class is found with­in the page
    if(!this.csr­f­Pro­tect&&$('.csr­f­Pro­tect').length>0){
      this.csr­f­Pro­tect=$('.csr­f­Pro­tect:eq(0)').val();
    }

    if(this.csr­f­Pro­tect){
      a[1]=a[1]+(func­tion(){a[1].in­dex­Of('?')>0?b='&':b='?';re­turn b}())+'csr­f­Pro­tect='+this.csr­f­Pro­tect;//ap­pend csr­f­Pro­tect para­met­er and value to re­ques­ted url
    }
    this.nat­i­ve­Open(a[0],a[1],a[2],a[3],a[4]);//open re­quest
  };

  $(win­dow).ajax­Com­plete(func­tion(event,xhr,set­tings){
    var csrf­Split=xhr.re­spon­se­Text.split('class="csr­f­Pro­tect" VALUE='),
      csr­f­Value;
    if(csrf­Split.length>1){
      csr­f­Value=csrf­Split[1].split('>')[0];
      this.XM­L­Ht­tpRe­quest.pro­to­type.csr­f­Pro­tect=csr­f­Value;
    }
    //up­date page links with latest csr­f­Pro­tect value
    $links.each(func­tion(){
      if(this.href){this.href=this.href.re­place(/csr­f­Pro­tect.*/,'csr­f­Pro­tect='+this.XM­L­Ht­tpRe­quest.pro­to­type.csr­f­Pro­tect);}//this re­place makes the as­sump­tion that csr­f­Pro­tect param and value are al­ways last in URL
    });

  });

  //links
  $(doc­u­ment).ready(func­tion(){
    $links=$('a');//modi­fy this se­lect­or and $(win­dow).ajax­Com­plete lo­gic per ele­ments that need up­dat­ing
  });
}());

The sleeper in this implementation is Sergey Ilinsky’s script, which not only exposes the XMLHttpRequest’s prototype property in IE but standardizes the ajax implementation across all browsers. In the code above we take advantage of the jQuery wrapper and methods because we’re working in a jQuery shop. XMLHttpRequest.js, however, gives us the same cross-browser access to ajax states that jQuery does. If we weren’t already incurring the jQuery overhead, we could achieve the same results with some slightly rawer JavaScript.

CSRF Protection via X-Browser jQuery Ajax Hijack

§ Leave a Comment

meta