Announcement

Collapse
No announcement yet.

Word Verification: How to have one for your site

Collapse

Ads on showthread pages

Collapse
This topic is closed.
X
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Word Verification: How to have one for your site

    WordPress Hosting on SSD Servers
    Word Verification: How to have one for your site

    Introduction
    You must have come across several sites where user authentication is required to differentiate robots from humans. The most popular technique used on the internet these days is the word verification. In this article I'll demonstrate in ASP how you can have one for your own site.

    The basic principle this technique operates upon is very simple, generate a random string (maybe get one from a dictionary), distort it visually and display it in a manner that robots can't understand. We're going to do exactly the same except we have one problem; ASP does not have any basic image manipulation capabilities. So how are we going to accomplish this? We'll have to take help of an imaging component. There are lots of commercial components available on the internet that can do this for us and much more, but we are going to use a free component called DynImage written by Chris Ashton (Thanks Chris. This component also has many features and it will get our job done.

    We already have this component installed on all our windows servers.

    This is a bit lengthy tutorial, thus, I have divided it into the below seven sections:

    1. Hello World.
    2. Drawing the text.
    3. Creating the form.
    4. Specifying the string.
    5. Validating user's input.
    6. Randomizing the string.
    7. Obfuscating the string.

    So let's begin
    Last edited by admin; 08-14-2015, 11:27 AM.

  • #2
    1) Hello World

    First of all let's test this component with a simple hello world test. Create an ASP page called HelloWorld.asp and write the below code in it:

    Code:
    %@Language=VBScript%
    Set oDynImage = CreateObjectDynImage.DynImage
    
    oDynImage.Open 150, 50
    oDynImage.FontSize = 24
    oDynImage.TextOut 20, 10, Hello World
    
    Response.ContentType = image/png
    Response.BinaryWrite oDynImage.Image
    oDynImage.Close
    
    Set oDynImage = Nothing
    Looks good, let's go through the code.

    Code:
    Set oDynImage = CreateObjectDynImage.DynImage
    Create the object.

    Code:
    oDynImage.Open 150, 50
    Create a blank image of size 150 by 50

    Code:
    oDynImage.FontSize = 24
    Set the size of the font to 24 points

    Code:
    oDynImage.TextOut 20, 10, Hello World
    Render our text.

    Code:
    Response.ContentType = image/png
    Set the ContentType to a png image

    Code:
    Response.BinaryWrite oDynImage.Image
    Render the Image.

    Code:
    oDynImage.Close
    Close the object.

    Code:
    Set oDynImage = Nothing
    Release memory.

    Note: If you have noticed, I have not generated any HTML tags in the above example. This is because the output of the above code is a png image.

    Now that we have a fair idea of how this component works, let's start working on our main concept. To begin with, we will create a form that will draw the image, ask the user to enter the string and then validate it.
    Last edited by Marc_AccuWebHosting; 05-14-2016, 12:35 PM.

    Comment


    • #3
      2) Drawing the text

      We will be using similar code as I mentioned in the example, except, the method will be slightly different. For ease of use, we will separate the form processing code and image generation code in two separate files. We will create an ASP file to generate the image and then insert that image into our form at run time. The code to generate the image is as below, save it in a file called genImage.asp:

      Code:
      %@Language=VBScript%
      %
      Dim strWord
      Dim intImageWidth
      Dim intImageHeight
      Dim oDynImage
      
      strWord = 12345
      intImageWidth = 300
      intImageHeight = 150
      
      Set oDynImage = CreateObjectDynImage.DynImage
      With oDynImage
      .Open intImageWidth, intImageHeight
      
      .FontFace = Arial
      .FontWeight = 800
      .FontSize = 48
      .TextAlign = 5
      .TextOut intImageWidth/2, intImageHeight/2, strWord
      
      Response.ContentType = image/png
      Response.BinaryWrite .Image
      
      .Close
      End With
      Set oDynImage = Nothing
      The code is quite similar to what we saw earlier with a few additions. I've set the font face, weight size and alignment properties. For now it just draws the string 12345 in the exact center of the image. We'll replace it a string of our choice later. When browsed it will display the below image:
      Last edited by Marc_AccuWebHosting; 05-14-2016, 12:30 PM.

      Comment


      • #4
        3) Creating the form.

        Time to create the form We will create a simple form that collects the string from the user and submits it back to the same page. Create a page called default.asp (as in future, we want this page to be the default page of this directory) and insert the below code in it:

        Code:
        %@Language=VBScript%
        % Option Explicit
        
        DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional// 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=iso-8859-1 /
        titleWord Verification/title
        </head>
        
        <body>
        <form id=frmWord name=frmWord method=post action=default.asp>
        <Enter the text in the image above.>
        <input name=txtWord type=text/>
        <br />
        <br />
        input type=submit name=Submit value=Submit
        <form/>
        <body/>
        <html/>
        Quite simple code, nothing unusual here. Try entering some string and submitting the form. You will be returned to the same page.

        Now we will insert the image generated by our genImage.asp in this form. Add the below code right after the <body> tag.

        Code:
        %
        ("<Response.Writeimg src= & ChrgenImage.asp & Chr & />")
        <br />
        <br />
        As you can see we are using the ASP page as the image itself. But will it work? Save the file and find out for yourself.
        Last edited by Marc_AccuWebHosting; 05-14-2016, 12:30 PM.

        Comment


        • #5
          4) Specifying the string

          Up till now the genImage.asp page has been drawing the string 12345 as it was hard-coded. Now, we will tell it what string to draw via our form using a QueryString parameter, so that we can validate it with the user's input later.

          i) Add the below code after the <% Option Explicit %> statement:
          Code:
          <%
          Dim strWord
          
          strWord = "Hello!"
          %>
          ii) Modify our Response.Write statement which inserts the image, as below and save the page:
          Code:
          Response.Write("<img src=" & Chr(34) & "genImage.asp?String=" & strWord & Chr(34) & "/>")
          If you submit or refresh the form, there will be no change in way the form behaves, simply because we have not modified the genImage.asp to draw the string which it has been passed.

          iii) Open genImage.asp and replace the below line:
          Code:
          strWord = "12345"
          with the below two:
          Code:
          strWord = Request.QueryString("String")
          If Len(Trim(strWord)) = 0 Then strWord = "?????"
          Save the page and refresh your form, you should see the new string now.
          Last edited by Marc_AccuWebHosting; 05-14-2016, 12:31 PM.

          Comment


          • #6
            5) Validating users input.

            Now that our user can see our string let's validate his/her input. Open the 'default.asp' file.

            1) Add the below variable declaration:
            Code:
            Dim strResult
            ii) Add the below code right after the strWord = "Hello!" statement:
            Code:
            If Request.ServerVariables("REQUEST_METHOD") = "POST" Then
            If strWord = Trim(CStr(Request.Form("txtWord"))) Then
            strResult = "Yes"
            Else
            strResult = "No"
            End If
            End If
            Session("Word") = strWord
            iv) And add the below code after the </form> tag.
            Code:
            <h4>Word Verified? <%=strResult%></h4>
            Save the form and test it. If you enter the string Hello! you will see Yes after Word Verified?, No otherwise.
            Last edited by Marc_AccuWebHosting; 05-14-2016, 12:33 PM.

            Comment


            • #7
              6) Randomizing the string

              Now that we are done validating the input, let's randomize our string. As I mentioned earlier on, you can either get words from a dictionary or make a random string. We'll be using a random string generator. I found a very good function on the internet to accomplish this, some time ago. We'll save this function in a ASP file and then include it in the pages where we want to call this function.

              Create a new ASP file called Functions.asp, paste the below in it and save it. The full code listing is as below:
              Code:
              <%
              Function RndStringGen&#40;str_lenght, str_whatcase, str_numberbias&#41; &#39;define function and passed parameters
              'What Case
              '0=All lower case
              '1=All Upper case
              '2=Random Mixure
              
              Dim str_counter
              Dim str_chracters
              Dim str_chracters_final
              
              'Check validity of passed parameters
              If Len(str_lenght) = 0 Or IsNumeric(str_lenght) = False Then str_lenght = 10 End If
              str_lenght = CLng(str_lenght)
              If str_lenght < 1 Or str_lenght > 1000 Then str_lenght = 10 End If
              If Len(str_numberbias) = 0 Or IsNumeric(str_numberbias) = False Then str_numberbias = 5 End If
              str_numberbias = CSng(str_numberbias)
              If str_numberbias < 0 Or str_numberbias > 10 Then str_numberbias = 5 End If
              str_numberbias = str_numberbias / 10 &#39;make to value below 1 so it is of the same magnatude as the random string
              
              'create string using a Do Loop
              str_counter = 0
              
              Do Until str_counter = str_lenght
              Randomize
              If rnd < str_numberbias Then 'work out which statement to do
              Randomize
              str_chracters = str_chracters & Chr((((57 - 48) * rnd) + 48)) 'numeric characters
              Else
              Randomize
              str_chracters = str_chracters & Chr((((122 - 97&) * rnd) + 970)) 'alpha characters
              End If
              
              str_counter = CInt(str_counter) + 1
              Loop
              
              '-------------------------------------------------
              
              If str_whatcase = 1 Then 'make all alpha characters upper case
              str_chracters_final = UCase(str_chracters)
              ElseIf str_whatcase = 2 Then 'random chance of upper case / lower case
              For i = 1 to Len(str_chracters)
              j = Mid(str_chracters, i, 1) 'next character in the string
              Randomize
              If rnd < 0.5 Then '50% change of being each case - ignored if not alpha
              j = UCase(j)
              Else
              j = LCase(j)
              End If
              str_chracters_mixed = str_chracters_mixed & j 'add the character to the string
              Next
              str_chracters_final = str_chracters_mixed
              Else 'default action - Lower case
              str_chracters_final = LCase(str_chracters)
              End If
              
              RndStringGen = str_chracters_final
              End Function
              >
              Now, we'll call this function in our form.

              i) Add the below line, right after the <% Option Explicit %> statement:
              Code:
              <!-- #include file = "Functions.asp" -->
              ii) Replace the statement strWord = "Hello!" with the below one:
              Code:
              strWord = Session("Word")
              iii) Add the below two line, right after your 'End If' block.
              Code:
              strWord = RndStringGen(5, 1, 0);

              Now, each time the form will be refreshed, a random string will be generated. Save the form and test it.
              Last edited by Marc_AccuWebHosting; 05-14-2016, 12:32 PM.

              Comment


              • #8
                7) Obfuscating the string.

                We're almost there. Now that most of the important stuff is taken care of, we can add some code to obfuscate our text. For this, we'll simply draw each character at an alternate angle and then draw a few random lines on our text; that ought to confuse the robots.

                Up till now, we were using a single TextOut statement to draw our text. But now as we need to draw each character at a separate angle, we will need one TextOut statement for a character each. We'll add a simple
                Last edited by Marc_AccuWebHosting; 05-14-2016, 12:37 PM.

                Comment


                • #9
                  ASP.Net Hosting starts @ $3.18/Mo.
                  Hi,

                  Check the User validation section:

                  If Request.ServerVariables("REQUEST_METHOD") = "POST" Then
                  If strWord = Trim(CStr(Request.Form("txtWord"))) Then
                  strResult = "Yes"
                  Else
                  strResult = "No"
                  End If
                  End If
                  Session("Word") = strWord[/b]
                  in that section you will have strResult = yes, (String is verified) instead of you can write code or function to load a new page.

                  Comment

                  Working...
                  X
                  Sign up for a News Letter Click here to sign up