Web Security : Using crumbs to protect your PHP API (Ajax) call from Cross-site request forgery (CSRF/XSRF) and other vulnerabilities

Have your API calls ever being used directly by someone without your permission? If yes, read on to find out how can we protect our API’s from such spammers and hackers. Before we go ahead and see a possible solution for this, lets try to list out a few cases, when our API’s can be accessed without our permissions.

Common cases of vulnerable API/Ajax calls

  • Ajax calls having no user authentication: This is the first place where a spammer will try to find out a loop hole. Take this example, suppose I created a group chat plugin for my blog. Since it’s a group chat plugin, I don’t really want the blog viewers to register before they can write a messages. Blog viewer only need to provide their name, email and url (just like wordpress comments). Thereafter, they can write messages which are submitted on the server side using ajax calls. And here is the “problem”. Anyone can pick up the ajax url, write a curl script, post the required parameters and fill up my database with millions of messages.
  • Ajax calls having user authentication: One day I realize my group chat plugin has received more than 1 million messages last night (all spams). Hence I decide to make my blog viewers to register before they can post a message on the group chat plugin, simply because someone is filling up my database by simulating ajax calls through a curl script. Anyone can write a script, since these ajax call do not authenticate the user making the call. But are my ajax calls safe after forcing users to register? NO, a registered user too can simulate these ajax calls and passing authentication by sending the right cookies.

Possible solutions and their flaws
If you look around on web, you will find a bunch of solution to such problems. But then every solution have it’s own problem which forces you not to use them. Listed below are 2 possible solutions to our problem:

  • Using X-Requested-With to protect ajax calls: All famous javascript frameworks like JQuery, YUI, Mootools etc sends an additional header parameter while making an XHR request. These libraries set “X-Requested-With=XMLHttpRequest” header, which can then be used on the server side to detect if the call was made through an ajax call. But a programmer can easily pass these headers using a curl script, making the server believe that the call was made through an XHR request.
  • Using HTTP Referrer: This solution comes in handy for cases when a spammer/hacker try to POST data into your site’s. We can check for the referrer page, before we go ahead and accept the POST data. If the POST data is coming from a page within your site, you go ahead and accept the data, otherwise reject it. But this solution again have it’s shortcomings. HTTP Referrer can be tampered in certain browsers using javascript and they can also be stripped away by some proxies and firewalls.

Using crumbs
Finally the idea is to have crumbs. A unique electronic key which is shared between server and client, and which have a short life time. But how are these useful? Suppose, in my group chat module, upon page load i generate a crumb whose life time is 30 minutes (tunable). Why 30 minutes? Because, I assume my blog viewers to either engage into the group chat module or leave that specific blog post within 30 minutes.

Now whenever a user writes a message, this crumb is passed back to the server side. If user writes a message before 30 minutes, this crumb will be validated and user shout submitted. (30 minutes should take care of 99.99% of the cases). In response, server api sends back the new crumb which should be sent back with the next ajax call.

Now when a spammer try to simulate the ajax request using curl calls, he will not be able to succeed because of the absence of the crumb. But he can capture the crumb from the site and simulate the effect, right? YES he can, but we can take care of this by reducing the life time of the generated crumb.

Generating crumbs using PHP
Here are the two functions, I use to generate and verify crumbs in PHP:

        // user for whom crumb is to be generated
        $uid = "[email protected]";

        // usually $salt = DB_PASSWORD . DB_USER . DB_NAME . DB_HOST . ABSPATH;
        $salt = "abcdefghijklmnopqrstuvwxyz";

        function challenge($data) {
                global $salt;
                return hash_hmac('md5', $data, $salt);
        }

        function issue_crumb($ttl, $action = -1) {
                global $uid;

                // ttl
                $i = ceil(time() / $ttl);

                // log
                echo "Generating crumb at time:".time().", i:".$i.", action:".$action.", uid:".$uid.PHP_EOL;

                // return crumb
                return substr(challenge($i . $action . $uid), -12, 10);
        }

        function verify_crumb($ttl, $crumb, $action = -1) {
                global $uid;

                // ttl
                $i = ceil(time() / $ttl);

                // log
                echo "Verifying crumb:".$crumb." at time:".time().", i:".$i.", action:".$action.", uid:".$uid.PHP_EOL;

                // verify crumb
                if(substr(challenge($i . $action . $uid), -12, 10) == $crumb || substr(challenge(($i - 1) . $action . $uid), -12, 10) == $crumb)
                        return true;
                return false;
        }

I can generate crumbs with a simple call:

$crumb = issue_crumb(300, "group_chat_module");

where $ttl = 300 (required), $action = “group_chat_module” (optional, defaults to -1)

Later on I can verify the crumb using another call:

var_dump(verify_crumb(300, $crumb, "group_chat_module"));

I hope this helps you protecting your API’s. Let me know of better methods to stop such attacks.
Enjoy!

Programatically control your google mails using JAXL v 1.0.4

Google has released an API for almost all of their products including maps, feedburner and gadgets. However one of the API’s which every developer would have loved to make use of is “Google Mail API” which is still missing (available for premium google apps user only). Here in this post I would demonstrate how one can programatically control his/her google mails using JAXL without being a premium user of google mail account.

For those who have landed on this post straight and have little knowledge about what JAXL is “JAXL stands for Jabber XMPP Library and for fun you may call it Just Another XMPP Library. It is written in PHP and can be downloaded from http://code.google.com/p/jaxl“. To know more about JAXL, read the introductory post here. If you want to dig deep and know how JAXL works, read the gtalk case study here. Finally, after reading this post you may also want to check how you can fetch any social networking feed right into your gtalk messenger using JAXL.

Version 1.0.4 of JAXL included support for “Gmail Notification Extension of XMPP“. If you are a daily Gtalk user like me, then you have surely seen this extension in action. Just recall Gtalk notifying you of a new mail in your inbox, through a pop-up in the bottom right corner. Also those who see this in action everyday will agree with me that this notification comes even before the mail has actually appeared in you inbox. Simply because of the PUSH technology used by XMPP protocol.

So why would you in first place be interested in accessing your google mails programatically. A quick thought on this brings me to the following real life scenarios:

  • Suppose your are out of vacation and you want to set a custom auto-reply message for your family and friends, while you want to set a general out-of-office message for your colleagues. The limitation in gmail is that you can’t really do this. Further in this post, I will show you how can you achieve this using JAXL.
  • Suppose you are a google app user and your company has organized an online programming contest. Further you want to mail each question to the contestants only if they has answered the previous question. JAXL provide you a way to access key information about your incoming mails like: sender email id, subject, number of threads in the mail, time at which mail was sent, mail url and mail snippet. Which is enough for you to code a bot which can check for incoming mail and then send in next question to the contestant who sent this mail
    1. Further there can be a thousand use cases where you would you like to have such a control over you google mails but before discussing them, lets see a demonstration on how can we use JAXL to achieve this.

      Sending Custom Auto-Reply Mails using JAXL
      Along with extendable functions like eventMessage() and eventPresence(), JAXL’s latest version now also provide another extendable function called eventNewEMail(). So everytime you receive a new mail(s) in your google account, the control is passed to this function along with all informations about the incoming mails.

      Various data passed to this function are:

      • $total: Tells you about total number of unread mails.
      • $thread: The thread id of all the unread threads. Note: In Gmail you have threads in your inbox which can contain more than a single mail.
      • $url: The mail.google.com url for the new mail
      • $participation: This can be 0, 1 or 2. 0 indicates that you have not participated, 1 indicates that you are one of the many recipients and 2 indicates that you are the sole recipient for messages in this thread
      • $message: The number of messages in the thread. For instance you can have more than one unread mail in a thread.
      • $date: A timestamp of the most recent unread message, in milliseconds since the UNIX epoch
      • $senders: Email Id of all the senders in the current thread
      • $labels: Label if any to which this mail thread belongs to
      • $subject: The subject of the mail threads
      • $snippet: The mail snippet of the incoming mail

      So thats a lot of information really, with which we can automate things to a certain extent. Lets see how I use it to send custom auto-reply mails when I am out on vacation. Here is the extendable jaxl class for gmail:

      jaxl4gmail.class.php (Download)

        /* Include PHP Mailer Class */
        include_once("class.phpmailer.php");
      
        /* Include XMPP Class */
        include_once("xmpp.class.php");
      
        class JAXL extends XMPP {
      
          /* Define custom mail groups */
          var $family = array("[email protected]","[email protected]");
          var $colleague = array("[email protected]","[email protected]");
      
          /* Define custom mail subject and message */
          var $familySubject = "Hi, Will get back to you";
          var $familyMessage = "Hey, I am currently out on vacation at my grannies house in Delhi. I will return back home by next monday.
      Reach out to me at +91-987654321.

      With Love,
      Abhinav Singh"; /* Define custom mail subject and message */ var $colleagueSubject = "[Auto-Reply] Out of Office"; var $colleagueMessage = "Hi, I am on vacation in my village with very limited access to internet and phone. I will return back home by next monday.

      Regards,
      Abhinav Singh"; function eventMessage($fromJid, $content, $offline = FALSE) { } function eventPresence($fromJid, $status, $photo) { } function eventNewEMail($total,$thread,$url,$participation,$messages,$date,$senders,$labels,$subject,$snippet) { // We only want to send auto-reply message to latest sender $sender = $senders[0]; // Check if the user lie in any category, and send appropriate mail if(in_array($sender["address"],$this->family)) { $mail = new PHPMailer(); $mail->From = "[email protected]"; $mail->FromName = "Your Name"; $mail->Subject = $this->familySubject; $mail->MsgHTML($this->familyMessage."

      Powered by Jaxl http://code.google.com/p/jaxl"); $mail->IsHTML(true); $mail->AddAddress($sender["address"],$sender["name"]); if(!$mail->Send()) $this->logger->logger("Error occured while sending mail to ".$sender["address"]); else $this->logger->logger("Mail sent successfully to ".$sender["address"]); } else if(in_array($sender["address"],$this->colleague)) { $mail = new PHPMailer(); $mail->From = "[email protected]"; $mail->FromName = "Your Name"; $mail->Subject = $this->colleagueSubject; $mail->MsgHTML($this->colleagueMessage."

      Powered by Jaxl http://code.google.com/p/jaxl"); $mail->IsHTML(true); $mail->AddAddress($sender["address"],$sender["name"]); if(!$mail->Send()) $this->logger->logger("Error occured while sending mail to ".$sender["address"]); else $this->logger->logger("Mail sent successfully to ".$sender["address"]); } else { // Do nothing, will handle later on $this->logger->logger("No handler for this email id..."); } } function setStatus() { print "Setting Status...n"; $this->sendStatus("Available"); print "Requesting new mails...n"; $this->getNewEMail(); print "Donen"; } }

      The only variables you would like to change in above class are:

      1. $family : An array of email id of your family member
      2. $colleague : An array of email id of your colleagues
      3. $familySubject : Subject with which you want to send mails to your family members
      4. $familyMessage : Mail message which you want to send to you family
      5. $colleagueSubject : Subject with which you want to send mails to your colleagues
      6. $colleagueMessage : Mail message which you want to send to you colleagues

      For further customization, you may want to add more groups and their respective subjects and messages.

      Further you may want to create your own custom bots using JAXL for one of the other use case described above. Join official JAXL Google Group for future updates and enhancements.

      Do let me know if you build any custom bot using JAXL, I will be more than happy to list your bot on official JAXL google code page.

      Enjoy!

Calendar with Auto-Notification : API and demo.

I was quite impressed with the Google Calendar, Yahoo Calendar and Outlook implementation of the same and wondered how exactly is it done? What are the challenges? So I thought of making a clone of one of them and see if I am able to achieve the same level of perfection.

I must say my 1 day of work did indeed brought some smile to my face as I could see my application running and rocking. Here is it, try out for yourself and Let me know if it worked for you. You can even use it for your day to day needs, my server is up and running forever 😉

Click to visit the Calendar API Demo Page

Important before you try it out:

  1. It will ask you for Email Id and Password.
  2. Give your personal email id where you want to receive event’s notification.
  3. Password can be anything, which you can reuse to login.
  4. It will send out an email to your email id above 30 minutes before the event start
  5. For eg. If you marked an event for 26th July, 2008 – 06:00 PM. You will receive a mail notification of the same at 26th July,2008 – 05:30 PM.
  6. There must be atleast an hour gap between your event time and the moment you are marking it.

STEP 1:



STEP 2:



STEP 3:

Thats it, try out. Works for me perfectly. Let me know about your feedbacks.

Thanks
Abhinav

iPhone Flick Photo SlideShow API

Apple Inc has been the pioneers in the field of innovation and excellent User Interfaces. After iPod they have come up with much hyped iPhone which runs on touch screen technology. I was just looking at this particular feature in iPhone where user can flick the photos in the slide show, and depending upon his flick speed the photos scrolls overs. Excellent application by iPhone we all must agree.

I though why not have such a feature for our websites where users can just flick through the slide show. Basically it started from a mailing list discussion and finally I have come up with the below implementation.

Now before much talking lets see what I have been able to comeup with:

Currently configured to work only on Firefox Mozilla and Flock (Not IE)

Click here for the demo link for this API

Just flick the photos to your left and right and you will experience the magic of iPhone without even having one. I will be releasing it as a part of the Javascript API, however if you are too curious and can’t stop yourself from implementing this on your website kindly have a look at the code and implement it accordingly.

Fell free to discuss and ask any question that you might have on the blog post.

Kindly digg this up and thanks for shouting it out to your friends if you liked this one.

Enjoy and Happy Flicking.

Photo Cropper API: How is it achieved?

Photo Cropper was something which was introduced or I must say became popular after various social networking sites started applying it. This allows users to choose a section from a photo which he wants to upload and show to the world around.

I initially tried to investigate how Orkut do this for their users. Further I took a look at API’s provided by YUI for the same purpose. After investigating a few other sources of photo  cropper I finally decided to build a photo cropper with an approach used by orkut.

I will further explain the algorithm used in more details later, but before that let us have a look at what I have been able to come up with.

Currently configured only for FireFox Mozilla and Flock (Not IE)

Click here to visit the demo section of this API.

Algorithm

  • The upload form is a clone of gmail type attachment, where as soon as you select a file on your system. The upload starts automatically. I have explained and provided open source codes for the same one of my previous posts. Click here to read more on how to achieve this. Gmail Type Attachment Clone
  • Hence as a user selects a file for upload, it is submitted for upload into an iframe. In the iframe I have a file called ajax.php, whose one of the functionality is to save the selected file on the server.
  • After the upload is complete I do the following processes.
    • Hides the upload box.
    • Using iframe, open the uploaded file into a DIV on the parent page. See the source of the page to know more  and inspect the DIV named cropdiv. Basically I set the uploaded image into this div through a javascript function which is invoked from the iframe.
    • After you have opened up the uploaded image, main challenge is how to get the dashed rectangular selection region working. This dashed selection region is the one which users will use to select the section of image which they want to actually show up after upload.
    • For this purpose I have used a method similar to Orkut. To start with I create a dashed DIV of width and height half of the original uploaded image. Also I place this Selection DIV at top left corner and sync it up with the background original image. 
    • Biggest thing which I wondered before making this application was, as user moves the selection region how to ensure that he gets the corresponding section of the image inside the selection region. For this Orkut plays a big trick. They use another image on top of the original underlying image (which is transparent). This second image is knows as proxy image. Now as user shifts the selection DIV x pixel to the right and y pixel to the bottom, I simply move this proxy image x pixel left and y
      pixel top. Hence fooling the user around. User never gets to know if their were two images involved in the process.
    • Once you are done with selecting the portion of choice. I simply sends the top,left position of the selection div and new height and width of the selection div to the server using ajax. Ajax.php again handles this call which takes the parameters and crop the original image accordingly.
    • Finally once the we have our cropped image, we display the same to the user.
  • Another interesting thing which you can do is, allow user to tag the photo after he has cropped the image. I have provided an open source API for tagging photo in one of my previous posts here. Photo Tagging API

As promised before all this will officially be made open source with the API package i am currently working upon. Meanwhile if you really need this currently for your website or blog, feel free to contact me for the same.

If you liked this post kindly digg the same and thanks for shouting it out to your friends.


Creative Commons License

This work is licensed under a
Creative Commons Attribution-Share Alike 2.5 India License.

iGoogle Portal Implementation: How to do it?

After developing the draggable div application the other day, I was itched to implement the whole iGoogle portal. Probably the drive came when a few of you asked me “These draggable divs are just like iGoogle”, so I thought why not to give a shot at it.

Here is what I was able to come up with while sitting idle at the office. I have shown 3 tabs for making it look more of a realistic demo. However only the news tab is operational as of now. Feel free to drag and drop any of the news box to any corner of the page and rest of the boxes will make place for it. 🙂

Find the implementation of this application here.

Basically it proved out to be a derivative of the previous application i.e. draggable div. However this one is a bit more modular, will easily fit into any changes made to the tabs and tab names or what ever.

Feel free to post a comment or two at the blog here.

Finally make your portals like iGoogle 😛

Draggable DIVs : How to make one?

You all must have seen a similar thing on your iGoogle home page. Further for years this application is an integral part of Yahoo User Interface Library i.e. YUI. I tried to tweak into the iGoogle and YUI implementation of the draggable div implementation, but somehow I found them rather too complex to understand. Hence I thought of better write a short application and see if I can do the same magic. 🙂

Here is what I came up with. Still not modular enough, I coded everything as per the requirements for this demo. Probably in future I should be able to come up with a modular stuff to let others use the same.

Click for the demo here.

Basically it proved out to be much simpler as it looked. However if you have observed and used YUI, they have a concept of proxy element for the same implementation. Basically what proxy allows you is, while you are dragging the DIV, it doesn’t actually moves the original DIV. However it simply creates a proxy DIV, which will be visibily move when we try to move the DIV.

Feel free to post a comment or two here. 🙂

Happy dragging!

Photo Tagging API : Easy plugin for your websites and blogs

Flickr, Facebook and now Orkut. One by One everyone has implemented the photo tagging feature into their social network. Initially introduced by Flickr, extended by Facebook and finally Orkut was forced to implement it too.

Last night I tried to look into it to found out what does it take to make one and I was able to comeup with something like this. Probably a little different from the one’s implemented by others in the sense that you just have to do the first click and then the second click, and you are done. No mouse-press and drag thing needed.

Now without much of a talking, lets first see a demo of how it works and then probably I will write a few words on how to implement the same:

Note: How it works? Unlike Facebook and Orkut, I have implemented this in a little different manner. You just need to click once, and then no need to keep your mouse pressed. Freely move to the another place and click again and thats it, you have selected your photo tagging area and ready to tag it.

Feel free to play with the demo here.

Drawbacks: However the drawback of this phototagging API is that if someone has tagged the photo using a monitor which have a different screen resolution than yours, then probably you might not see the tag exactly at the right place. This bug exists in Facebook too, haven’t checked with Orkut yet.

Feel free to leave a comment or two.

Also feel free to discuss any flaws which you may find in the implemented API above. I am completely open for suggestions for improvement.

Happy Photo Tagging.

Gmail Type Attachment – How to make one?

Google and its wide range of web applications have simple changed the way we used to look at internet. Be it the revolutionary fast Google search engine or mail by Google i.e Gmail. You will find enormous amount of threads and forums discussing How do google achieve doing XYZ? or How do they make it happen fast and efficiently?.

One of the most talked about thing about Gmail is probably how do they achieve making Gmail so simple, convinient, sober, fast and easy. One of the Gmail’s feature which contribute hugely in making it easier and faster for users is: Its ability to attach your files while you are writing your mail.

I have tried to come up with an exact clone for gmail attachment. Kindly click here for the demo and the source files.

This is achieved by using an iframe which contains your server side script responsible for handling uploads. As soon as the user select a file to upload, the upload form gets submitted to upload.php, which lies in an iframe. Hence at no point does the user leaves the page and still he gets his file uploaded. Find attached below all the files you need to implement this on your server. Just unzip the file on your server, and you are ready. All the uploaded files will go in th upload folder by default. You may change that in upload.php.

Feel free to post a comment back here for any queries etc.

Cheers !