Friday, 13 May 2011 - 4:04 AM GMT

It took me one night to realize that my session validation method in my admin page wasn't secure at all. When a user logs in, the user database will be called, and the database will be matched with the username and password which he enters. After that, some sessions will be registered as to what the output of the database produce. After finishing the session registration, the user will be redirected to the main.php page, and it will check whether a session is registered or not every time the user access that page.

Well, you can see that I create 2 fatal vulnerability. First of all, I didn't validate the input that the user give, in short, they can use SQL injection method to access the database. Second of all, at the main page, I only check whether a session is registered or not, but I didn't check whether the session has a valid value or not.

Finally, after a long night of working in front of my laptop, I resorted the problems. I use preg_match() to validate the user inputs, and instead of checking whether a session is registered or not, I check whether the sessions has valid values or not.

Well, if you don't want to get hacked, keep in mind that no input can be trusted. Not even sessions.

Happy blogging!

Thursday, 12 May 2011 - 4:31 PM GMT

As an attribution to the original hacker, I enter his result in the textarea below:

Free lunch for you my friend.

Monday, 25 April 2011 - 7:16 AM GMT

Making a drawing pad with HTML 5 canvas element is relatively easy, until we encounter touch devices. The codes which used to be working on conventional mouse-driven interface no longger works on touch screens. The purpose of making a drawing pad with the canvas element was simple: to facilitate people to draw from anywhere (as long as they have internet and a browser). But what's more pleasing than drawing on touch enabled screens?

Actually, it's not that hard to make a touch compatible canvas. It's almost the same as the mouse driven code, but with some changes. I'll let you see for yourself. Here's a code I get from http://tenderlovingcode.com/static/download/draw.html:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="utf-8"> 
  <meta name="viewport"
    content="width=768px, maximum-scale=1.0" /> 
  <title>sketchpad</title> 
  <script type="text/javascript" charset="utf-8"> 
  window.addEventListener('load',function(){
  // get the canvas element and its context
  var canvas = document.getElementById('sketchpad');
  var context = canvas.getContext('2d');

  // create a drawer which tracks touch movements
  var drawer = {
    isDrawing: false,
    touchstart: function(coors){
      context.beginPath();
      context.moveTo(coors.x, coors.y);
      this.isDrawing = true;
    },
    touchmove: function(coors){
      if (this.isDrawing) {
        context.lineTo(coors.x, coors.y);
        context.stroke();
      }
    },
    touchend: function(coors){
      if (this.isDrawing) {
        this.touchmove(coors);
        this.isDrawing = false;
      }
    }
  };
  // create a function to pass touch events
  // and coordinates to drawer
  function draw(event){
  // get the touch coordinates
  var coors = {
    x: event.targetTouches[0].pageX,
    y: event.targetTouches[0].pageY
  };
  // pass the coordinates to the appropriate handler
  drawer[event.type](coors);
  }
		
  // attach the touchstart, touchmove, touchend event listeners.
  canvas.addEventListener('touchstart',draw, false);
  canvas.addEventListener('touchmove',draw, false);
  canvas.addEventListener('touchend',draw, false);

  // prevent elastic scrolling
  document.body.addEventListener('touchmove',function(event){
    event.preventDefault();
  },false);	// end body.onTouchMove

  },false);	// end window.onLoad
  </script> 
  <style type="text/css"><!--
    body{margin:0;padding:0; font-family:Arial;}
    #container{position:relative;}
    #sketchpad{ border: 1px solid #000;}		
  --></style> 
</head> 
<body> 
  <div id="container"> 
    <canvas id="sketchpad" width="766" height="944">
      Sorry, your browser is not supported.
    </canvas>
  </div> 
</body>
</html>


You can see that instead of mouseOver, mouseMove and mouseOut events, it uses touchstart, touchmove and touchend events. It is nearly as simple as that, with addition of the script which disable iOS's elastic scrolling. This code is proven to be working on Android devices too.