MSR Asirra – Alternate approach to CAPTCHA

November 29, 2008

We all have seen usage of CAPTCHA(Completely Automated Public Turing test to tell Computers and Humans Apart) or HIP (Human Interactive Proof) in several website preventing spams for comments or email, protecting web services from bot attacks where programs\bots tries to imitate humans and fool the server systems. CAPTCHA is very well known way of using Alphanumeric character images in a distorted way and random orientation like below:

You can take a look at my previous post on CAPTCHA at https://sushantp.wordpress.com/2008/08/25/captcha-image-code-verification/

There are some issue which people are finding these days that the distortion is sometime such that its not human friendly but computers are able to read that.

There is an alternate HIP solution developing at MSR which is still in BETA phase and has been prototype by other universities too with the usage of images instead of text where a human can do the identification of images.

Here is how Asirra looks like on a page:

Asirra

Visit http://research.microsoft.com/asirra/ for complete details on Asirra and usage instructions.

To brief about Assira, this is a two way verification where javascript code gets the challenge and if user solves that correctly, gets a ticket from MSR’s server (also a success message\alert could be shown to user). This message is then passed along with form data as hidden field which is expected to be used by code behind and call a MSR Web Service to validate the Ticket. Repeated trials with the same ticket makes it fail.

In all this seems to be a encouraging way and should improve even more with the quality of images which come. Also there might be orientation changes for images for increased difficulty levels when it would come to machines. Also change in image size (random sized images in challenge) could be one of the improvements which we may find in the final versions.

Here is how the code looks like:

ASP.NET Page

<%@ Page Language="C#"
         AutoEventWireup="true"
         CodeFile="asirra.aspx.cs"
         Inherits="asirra" %>

<!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 runat="server">
    <title></title>
    
<script type="text/javascript">
    var passThroughFormSubmit = false;
    function MySubmitForm() {
        if (passThroughFormSubmit) {
            return true;
        }
        // Do site-specific form validation here, then...
        Asirra_CheckIfHuman(HumanCheckComplete);
        return false;
    }
    function HumanCheckComplete(isHuman) {
        if (!isHuman) {
            alert("Please correctly identify the cats.");
        }
        else {
            passThroughFormSubmit = true;
            formElt = document.getElementById("mainForm");
            formElt.submit();
        }
    }
</script>
</head>
<body>    
    <form runat="server"
          method="get"
          id="mainForm"
          onsubmit="return MySubmitForm();"> 
    
    <div style="margin:200px 0 0 20px;">
      
      <script type="text/javascript"
              src="http://challenge.asirra.com/js/AsirraClientSide.js"></script>
       <script type="text/javascript">
        // You can control where the big version of the photos appear by
        // changing this to top, bottom, left, or right
           asirraState.SetEnlargedPosition("top");
           asirraState.SetEnlargedPosition("top");
        // You can control the aspect ratio of the box by changing this constant
        asirraState.SetCellsPerRow(4);        
</script>
        <br />
        User Name: <input type="text"
                          name="UserName" />
        Favorite Color: <input type="text"
                               name="FavoriteColor" />      
        <input type="submit"
               value="Submit" />
    </div>
</form>
</body>
</html>

C# Code Behind

using System;
using System.Net;

public partial class asirra : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (IsPostBack)
        {
            string asr_tkr = Request.QueryString["Asirra_Ticket"];
            if (string.IsNullOrEmpty(asr_tkr))
            {
                Response.Write("Asirra Ticket Value is not present");
            }
            else
            {
                string queryString = "action=ValidateTicket&ticket=" + asr_tkr;

                WebClient wc = new WebClient();
                string resp = wc.DownloadString("http://challenge.asirra.com/cgi/Asirra?" + queryString);
                if (resp.IndexOf("Pass", StringComparison.InvariantCultureIgnoreCase) > -1)
                {
                    Response.Write("Got Asirra Ticket Verified");
                }
                else
                {
                    Response.Write("Asirra Ticket Not Verified");
                }
            }                
        }
    }
}

Take a look at it and try. You may like it too like me!!

bye for now.



Software


Getting started on JQuery

November 28, 2008

I started using JQuery just recently and liked it a lot the same time 🙂 In this post we will take a look at what is DOM, what jquery is and how can one get benefit by using it. We will also look into some tried examples with code. visit http://jquery.com/ for complete information about JQuery.

So, DOM or Document Object Model is language and platform independent object model for representing HTML\XML formats. JavaScript works over DOM though the browser can render a page with different available models. Using Javascript we can play with the DOM of a page and make dynamic changes to page structure and change the browser rendering at run time. A very simple example to it is using Firebug in firefox and clicking on Inspect option. This opens the page DOM in the view panel from where a user can make changes to structure or style there by traversing page tree in any order i.e. parent to child or child to parent and see the effect of change instantaneously on browser. Javascript maintains the state of page by means of DOM.

JQuery is a concise, effective and dev friendly javascript library which allows to take advantage of DOM to its fullest by simplfying the element\object traversal, providing various animation options and simplifying ajax interactions. This library can be seen as a development effort towards supporting RAD (Rapid Application Development) where infact todays most of the developments are heading to. Good News for developers!! Write less do more is what JQuery says to us 🙂

One of the cool things is usage of chaining thereby making code development very fast and hence we can traverse a node and its decendents or ancestor nodes just with one line of code. It supports Javascript\XPath expression to select an element (javascript object) or list of elements and then using a object oriented approach shows all the properties, functions or methods working on collections when we use a “.”, we will see this in the examples at the bottom of this post.

We can also see direct method for reading JSON data (javascript also supports it but with eval() where the JSON should be trusted else can cause an attack to your server) in form of getJson() etc. We will take a closer look into using JSON over XML for Ajax call in my coming post about JSON where we will look into using a html control to make a Ajax call and receiving data in form of JSON and then making appropriate change upon successful retrieval of data.

Microsoft announced that it will integrate JQuery in coming VSTS versions though we have already seen integration support in terms of Javascript intellisense for JQuery in Visual Studio 2008 SP1. Read http://weblogs.asp.net/scottgu/archive/2008/11/21/jquery-intellisense-in-vs-2008.aspx post for complete details. This patch enables Visual Studio to look for “-vsdoc.js” in the same directory where Jquery.js file is linked to. If you find any problems installing it and want to have intellisense support then you can add the code below to get the support

<% if(false) { %>
    <script src="jquery-1.2.6-vsdoc.js" type="text/javascript"></script>
    <% }%>

read more about it at http://blogs.msdn.com/webdevtools/archive/2008/11/18/jscript-intellisense-faq.aspx.

Some Examples of JQuery usage:

The code below shows example usage of jQuery Slidedown, Rounded corners, Dynamic menu, Drop down value change dynamically, behavior change of anchor tags etc.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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 runat="server">
    <title>Untitled Page</title>

    <script src="jquery-1.2.6.js" type="text/javascript"></script>

    <script src="jcorners.js" type="text/javascript"></script>

    <% if (false)
       { %>

    <script src="jquery-1.2.6-vsdoc.js" type="text/javascript"></script>

    <% }%>

    <script type="text/javascript">

        //Function When window is loaded
        window.onload = function() { alert("Welcome"); }

        //Write your code when Document is loaded
        $(document).ready(function() {
            alert("Welcome Again");

            //rounded corner using JCorners plugin
            $.jcorners("#round", { radius: 10 });

            //Animate anchor
            $("a").click(function(event) {
                alert("Thanks for visiting!");

                event.preventDefault(); //Change default Click event of all anchors on page
                $(this).hide('slow');   //hides slowly
            });

            //Dynamic Menu
            $("#menu li ul").hide();
            $("#menu li").hover(function() {
                $(this).children().show('slow')
            }, function() {
                $(this).children().hide('slow')
            });

            //Slide Down and Slide up animation
            $("input.buttonSlideDown").click(function() { $("div.content").find("p.firstParagraph:hidden").slideDown("slow"); });
            $("input.buttonSlideUp").click(function() { $("div.content").find("p.firstParagraph:visible").slideUp("slow"); });
        });

        //Play with Dropdown List
        function replace() {
            var opt = $('#myselect').children().eq(2);
            //text("text") sets value for text element.
            //If you want to keep the original value then you can store it in some var
            opt.text("sushant");
            alert(opt.text());
        }
    </script>

</head>
<body>
    <form id="form1" runat="server">
<div style="margin-bottom:20px;">
<div class="content" style="overflow: hidden; display: block; height: 101px;">

                Hi this is first paragraph.

                Hi this is second paragraph</div>
<input type="button" class="buttonSlideDown" value="SlideDown" />
        <input type="button" class="buttonSlideUp" value="SlideUp" /></div>
<div style="width: 50px; margin-bottom:20px;">
        <a href="http://jquery.com/">jQuery</a></div>
<select id="myselect" style="margin-bottom:20px;">
        <option value="1">TD1</option>
        <option value="2">TD2</option>
        <option value="3">TD3</option>
        <option value="4">TD4</option>
        <option value="5">TD5</option>
    </select>
    <input type="button" value="Get Value" onclick="alert($('#myselect').val())" />
    <input type="button" value="Get Text Value" onclick="alert($('#myselect option:selected').text())" />
    <input type="button" value="Replace" onclick="replace()" />
<div style="width: 150px; margin-bottom:20px;">
<ul id="menu">
	<li class="menu">Menu 1
<ul>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 4</li>
</ul>
</li>
	<li class="menu">Menu 2
<ul>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 4</li>
</ul>
</li>
</ul>
</div>
<div id="round" style="width: 100px; height: 100px; border: 1px solid;"
        runat="server">
        This is a big Rounded div</div>
</form>
</body>
</html>

So what we see is that everything in jQuery is either a object it self or property or function of that object. The return of a function in jQuery is again an Object hence allowing us to do chaining operations\calls and write real less code to achieve what we want.

There’s a lot involved in playing with jQuery, writing plug-ins for it and utilizing\testing currently available cool plug-ins. Adding your custom plugin to jQuery is a very straight forward and simple process. Take a look at http://docs.jquery.com/Plugins/Authoring if you want to write your own plugin.

Hope this post would help those looking to start on jQuery.

Keep quering with jQuery 🙂

Thanks.

Superblog Directory


Write a Screen Scrapper or Html Scrapper

November 13, 2008

Today I developed a small app which does what is called as screen scrapping or html scrapping. We will look into specific development and also what these terms mean. HtmlScrapping means to download web page data which is same as what we see when we do a view source on a web page. This allows us to extract different information like link urls, image urls and data of course which can then be saved into a database and is ready for use via text, xml or database itself.

This app when tries to scrape google.com this is how is appears on local machine.

htmlscrapper

I am sharing the code which you can use and then play with the web page data in your own way:

UI Part:

<body>
<form id=”form1″ runat=”server”>
<div style=”margin-left:10px;”>
<asp:Button ID=”btn” runat=”server” OnClick=”Btn_Click” Text=”Click to Download WebPage” />
<asp:DataGrid ID=”dg” runat=”server” Caption=”Image URLs” BorderColor=”Green” BorderWidth=”2pt” BorderStyle=”Solid” ></asp:DataGrid>
<asp:Literal runat=”server” id=”lbl” ></asp:Literal>
</div>
</form>
</body>

this includes a button which triggers the web page retrieval, a datagrid to show img urls (can be used to show any custom data) and a literal to display the data\page (you can use label or any control here to display data). This can be customized as per the requirement.

Code Behind (C#):

I am just providing btn_click function as other part would remain same in the code behind file.

protected void Btn_Click(object sender, EventArgs e)
{

//Create a WebClient object and provide the url to be used
WebClient wc = new WebClient();
string url = "http://www.google.co.in/";

byte[] urlData = wc.DownloadData(url);
UTF8Encoding utf = new UTF8Encoding();
string completeData = utf.GetString(urlData);

//Used ArrayList to fill extracted info which eventually would be binded to datagrid

ArrayList a = new ArrayList();

//RegEx to match img src="". The same can be used to match a href="" also. Needs some modification to include styling where image has been provided as backgroud url()

Regex r = new Regex("img src\\s*=\\s*(?:(?:\\\"(?<url>[^\\\"]*)\\\")|(?<url>[^\\s]* ))", RegexOptions.IgnoreCase);
MatchCollection mc = r.Matches(completeData);

string value;
foreach (Match mt in mc)
{
foreach (Group gp in mt.Groups)
{
value = gp.Value;
if (!gp.Value.StartsWith(url) && (!gp.Value.StartsWith("img src")))
{
value = url + value;
//This code is up to you to change as the replacement is not as straightforward everytime as it looks below.
completeData = completeData.Replace(gp.Value, value);
}

a.Add(value);
}
}

lbl.Text = completeData;</em>

<em>dg.DataSource = a;
dg.DataBind();

//Saving the retrieved data to a text file on server

StreamWriter sw = new StreamWriter(HttpContext.Current.Server.MapPath("test.txt"));
sw.Write(completeData);
sw.Close();

}

Hope this would help you if you are planning to get started on writing a HtmlScrapper. You can play with the data in terms of tags, atrributes and styles and then generate xml which would represent your page DOM.

bye for now…

Blog Listings Blog Directory http://www.blogcatalog.com/directory/computers blogarama.com My Zimbio
Technology blogs
tandblekning


Who am I what am I doing?

Who am I what am I doing?