Frilly border example - click to view

This is what we are working on today.  There are several ways to do this, some are easier than other.  The easiest way (which we will not be doing) is to make an entire header image with a border that looks like this.  The only problem I have found is that you have to match up the edges of the blog perfectly if you want to make the border work.  Also, you would need a decent graphics program to do anything that is decent looking (paint won’t cut it).  Since a lot of people don’t have the $400 Adobe Photoshop CS4, we have come up with a different hack to get it to display.

First off, we need the image of a single border.  I have gone ahead and created it and uploaded it here: http://www.notan00b.com/border.png

Second, we need to edit some serious HTML:

Copy and paste this above “#outer-wrapper{” :

#topborder{
background-image:url(‘http://www.notan00b.com/border.png’);
background-repeat:repeat-x;
background-position:bottom left;
width: 960px;
height: 20px;
}
#contentALL{
background: #fff;
padding:10px;
padding-top:30px;
}

Change #outer-wrapper to look like this:
#outer-wrapper {
width: 960px;
margin:60px auto;
text-align:left;
font: normal normal 90% Georgia, Times, serif;
}

Go to the bottom, and under “<div id=’outer-wrapper’>”:
<div id=’topborder’/>
<div id=’contentALL’>

At the bottom edit this “</div></div> <!– end outer-wrapper –>”:
</div></div></div> <!– end outer-wrapper –>

That’s it!  Save it and you will have your border.  This is a specific case where the blog content was originally 950px wide.  I changed it to 960px to get the full frill instead of half of one (border.png is 20px wide).  Let me know if it doesn’t work or if you are experiencing problems.

So lets start out with the basics, what is it? It all has to do with the URL bar and get variables. Let’s say that my site is “http://www.mysite.com/” and I created a script that grabs info out of my database based on it’s ID in the database. For example: “http://www.mysite.com/index.php?pageid=10″. My SQL statement will look like this: “SELECT * FROM pages WHERE ID=$_GET[id]“. Just like a regular SQL Injection, a hacker can submit malicious code using the get variable.

This is where we differ a little from a basic SQL Injection. In a basic SQL Injection, you simply type ' or 'x'='x into a form and it may or may not authenticate you. Your goal is to get it to toss an error, so that you know your code is not being parsed correctly.

Because we are retrieving info about a page with my example website script, not users, it makes it difficult to authenticate yourself with one line of code like a basic SQL Injection. There is one thing we can do, and that is to make the SELECT statement true or false. If my site is vulnerable, all we would need to type in the browser is: “http://www.mysite.com/index.php?pageid=10 and 1=1″. If it isn’t parsed correctly, my vulnerable code will now look like this: SELECT * FROM pages WHERE ID=10 and 1=1. That is a true statement so our page will display normally. Now we try a false statement: “http://www.mysite.com/index.php?pageid=10 and 1=2″ and our SQL query reads as: SELECT * FROM pages WHERE ID=10 and 1=2. This statement is false, so it will not grab ANY info from pages. With no info being grabbed from the database, our page will look significantly different. Maybe some pictures won’t be there, or text will be missing, or maybe the entire page will be blank. If that is the case, then you are in business.

So why is it called BLIND Sql Injection? Well rather than executing queries directly, like a regular SQL injection, and getting your info directly, you are now blind instead. You are using true/false statements to guess what the table names are, or manually hash them out using ascii codes and substrings. It can take hours to get access to a vulnerable site, but there are programs and scripts out there that will do all the work for you so you don’t even have to think about it.

If you want to know a little bit more about how this works, lets try it out on a vulnerable example: http://www.cblpi.org

Lets say I went to Ann Coulter’s bio page: http://www.cblpi.org/programs/bio.cfm?ID=15&type=Speaker

We notice that ID=15 and may be vulnerable. So we test it by typing: http://www.cblpi.org/programs/bio.cfm?ID=15 and 1=1&type=Speaker

Nothing changes! Let’s test it again by typing 1=2: http://www.cblpi.org/programs/bio.cfm?ID=15 and 1=2&type=Speaker

Now a blank page appears, so we know that the ID variable isn’t being parsed correctly.

Lets figure out what version of MySQL it is using BSI using @@version: http://www.cblpi.org/programs/bio.cfm?ID=15 and substring(@@version,1,1)=5&type=Speaker

If its version 5.xxxx it will show up as true! Does it? No. Then lets try 4: http://www.cblpi.org/programs/bio.cfm?ID=15 and substring(@@version,1,1)=4&type=Speaker

And know we know they are using version 4.xxxx of MySQL.

Lets try guessing a table name! http://www.cblpi.org/programs/bio.cfm?ID=15 and (select 1 from USERS limit 0,1)=1&type=Speaker

If table USERS exists, it will return 1 and the statement will be TRUE! Does it? No it doesn’t, but it does give us a nice error page saying it doesn’t exist, with the table name that we are currently selecting out of (PEOPLE).

So lets validate the code real quick. We know PEOPLE does exist, so http://www.cblpi.org/programs/bio.cfm?ID=15 and (select 1 from PEOPLE limit 0,1)=1&type=Speaker should be true.

And it is! The page displays normally.

You can bruteforce guess the table names, or there are many round about ways of detecting them letter by letter using substring and ascii functions. And once you figure out where the good information is stored, then you can break into those tables and grab it.

I’m not here to give you the exact methods on how to bruteforce it or use char codes, but just to give you the basics on what it is. Know that you know what it is, protect against it! How hard is it to check for a space? Add slashes? Check if it is an int? Guys common, these practices are standard when dealing with forms, why not make them standard when dealing with get variables. Recently (about 4-6 months ago) HyperVM was found to have a BSI vulnerability and within a couple of days, thousands and thousands of VPS servers were hacked and accounts deleted. It all could have been prevented with just one line of code.

In order to create an image for a thumbnail, we need to take a screen shot of webpage. PHP GD class allows us to take screen shots of different windows. PHP also allows us to control different windows, like Internet Explorer using the COM class. So basically what we need to do is have PHP open up a window in Internet Explorer, navigate to a website, and then take a picture of that window, then save it/display it. The tutorial shown on php.net shows exactly how to do this:

<?php
$browser = new COM("InternetExplorer.Application");
$handle = $browser->HWND;
$browser->Visible = true;
$browser->Navigate("http://www.libgd.org");
 
/* Still working? */
while ($browser->Busy) {
    com_message_pump(4000);
}
$im = imagegrabwindow($handle, 0);
$browser->Quit();
imagepng($im, "iesnap.png");
imagedestroy($im);
?>

So this is SUPPOSED to load libgd.org and take a snap shot and save it to “iesnap.png”, and it DOES work, but only if your server allows it to work. If it doesn’t you just get a black/blank picture.

Windows rarely lets one program access another program via the desktop and control it. By default, Apache isn’t allowed to open Internet Explorer on windows, so we have to add an exception.

1. On Vista, click the start button, and in the search box type “Services”.
2. At the very top, there should be a link under Programs called Services. Click that link.
3. It will open up all running services, and you will see Apache running (mine is Apache 2.2, and is the first entry).
4. Right click on it and select “Properties”
5. Navigate to the “Log On” tab
6. Click the box for “Allow service to interact with the desktop”
7. Save it and close the properties
8. Right click on Apache again
9. This time, click restart, and Apache will be restarted with the new features

Now run your script again! Vista pops up a little box alerting the user that a program is interact with the desktop. Just ignore it and it will disappear in a few seconds. After the program is complete, go to your web folder and you will see iesnap.png is now an image of a webpage!

Time to make some tweaks! You will notice that it grabs the ENTIRE screen, meaning the tool bars and everything. We will need to make a few adjustments to get rid of those. The first one I made was to make the browser show as a full screen:

$browser = new COM("InternetExplorer.Application");
$handle = $browser->HWND;
$browser->Visible = true;
$browser->FullScreen=true;

That last line will make it display in the fullscreen mode, which takes care of the tool bars at the top, but I still see the footer and the side bar that I want to get rid of. In order to do this, we need to crop a little, but GD doesn’t have a simple cropping method. What I did was copied part of this picture to a new picture and resized it. Keep in mind, my display settings are going to be different, and will require you to look at your picture and test it out:

<?php
$url = $_GET['url'];
$w = $_GET['w'];
$h = $_GET['h'];
if(empty($w))
    $w=300;
if(empty($h))
    $h=300;
if(empty($url))
    $url="www.notan00b.com";
if($w>1263)
    $w=1263;
if($h>780)
    $h=1263;
$browser = new COM("InternetExplorer.Application");
$handle = $browser->HWND;
$browser->Visible = true;
$browser->FullScreen=true;
$browser->Navigate("http://".$url);
 
 
/* Still working?*/
while ($browser->Busy) {
    com_message_pump(4000);
}
$im = imagegrabwindow($handle, 0);
$browser->Quit();
imagepng($im, "iesnap.png");
$dest = imagecreatetruecolor($w,$h);
 
// Copy
imagecopyresized($dest, $im, 0, 0, 0, 0, $w, $h,1263,780);
 
// Output and free from memory
header('Content-Type: image/gif');
imagegif($dest);
 
imagedestroy($dest);
imagedestroy($im);
?>

There we have it. Even with the GET variables so you can reuse this script for AJAX or any HTML document. My images were 1280×800. To remove the bars I scaled it down to 1263×780, and they were removed almost perfectly, but it will be different for everyone.

I would post an example of it, but I am only hosted… I don’t actually pay for a VPS or private server just for one little blog. Sorry folks. If it was up to me, and I needed this service, I would probably pay a company to do it for me for a simple little website. If you have a VPS with enough memory, this may work for you. Good luck, let me know if you have any questions.

The biggest feature is the ability to show WHO is online, not just a count!!!  You will need to have a variable that has the users login name, which most coders store as a session variable, or a global variable.  Both are perfectly acceptable.  You simply set the users name, update it, and then retrieve the data as an ARRAY.  The array will show who is online, the number of “Guests” online, and the number of members, and the overall count of people.    PRETTY SLICK.

Head over to the code bin to check it out!

This is the goal!

The first way that I thought of was to create a form for every piece of info I pulled from the database. So lets say for ID=1, there would be 1 form with all the info preloaded into it. ID=2 would be a separate form with all different info. This works, but I had to have about 20 dialog boxes per page, and it would cause the HTML output to be about 20 times larger than I needed.

In my head, I knew there had to be a way to do this with DHTML and jQuery, and I finally figured it out. All I had to do was create a value and store it in the button that I was already using (well it was actually just a link). So I turned <a href="#" class="editThis">Edit!</a> into <a href="#" class="editThis" id="1">Edit!</a>. I used PHP to echo out the data already but now each link will have a different ID:

echo "<a href=\"#\" class\"editThis\" id=\"$row[UserId]\">Edit!</a>";

So now we have 20 links, each looking the same, but each with a unique ID. This is where jQuery comes in handy. We can look up the anchor by class, and then store the ID as a variable for later use!

$(".editThis").click(function{
   var id=$(this).attr('id');
});

So now we have the ID of the info we want to manipulate. The next part was a little more difficult to figure out. I want only 1 dialog box and 1 form, but want the info auto filled. At first I was thinking we needed to do a lot of AJAX to pull out each and every variable that we want to edit, but then I figured out we could pass that info into HTML as a “HIDDEN” variable. HTML is great because you can hide all sorts of stuff and the user will never see it. I can set the style as “hidden”, or I can include it inside a tag somewhere, or better yet, and my favorite, I can create a hidden variable: <input type="hidden" id="editinfo1" value="myinfohere"> Now we need to implement this into our PHP to write it to the HTML:

echo "<a href=\"#\" class\"editThis\" id=\"$row[UserId]\">Edit!</a>";
echo "<input type=\"hidden\"";
echo " name=\"editinfo{$row['UserId']}\""; 
echo " id=\"editinfo{$row['UserId']}\""; 
echo " value=\"$row[Name]::$row[Address]::$row[Age]\">";

So now our HTML will look like this:

<a href="#" class="editThis" id="1">
<input type="hidden" name="editinfo1" id="editinfo1" value="Bob Jones::123 N Street::26">

All our info is now conveniently stored for jQuery to access later!

$(".editThis").click(function{
   var id=$(this).attr('id');
   var variables=$("#editinfo"+id).val();
   var info=variables.split('::');
   alert(info[0]+"\n"+info[1]+"\n"+info[2]);
});

Now for the fun part, using jQuery to dynamically change the values of our SINGLE form!
Our form might look like this:

<div id="dialog" title="Edit User">
    <form method="post" name="edituserform" action=editUser.php">
    <input type="hidden" name="action" value="edituser">
    <input type="hidden" name="userid" id="euid" value="0">
    <center>
        <table width="75%">
            <tr>
                <td align="right">User Name: </td>
                <td align="left"><input type="text" name="username" id="eusername"></td>
            </tr>
            <tr>
                <td align="right">Address: </td>
                <td align="left"><input type="text" name="address" id="eaddress"></td>
            </tr>
            <tr>
                <td align="right">Age: </td>
                <td align="left"><input type="text" name="age" id="eage"></td>
            </tr>
        </table>
    </center>
    </form>
</div>

And our jQuery would look like this:

$(".editThis").click(function{
   var id=$(this).attr('id');
   var variables=$("#editinfo"+id).val();
   var info=variables.split('::');
   $("#eusername").val(info[0]);
   $("#eaddress").val(info[1]);
   $("#eage").val(info[2]);
   $("euid").val(id);
   $("#dialog").dialog("open");
});
$('#dialog').dialog({
        autoOpen: false,
        width: 600,
        modal: true,
        position: 'top',
        buttons: {
            "Update user": function() {
                document.edituserform.submit();
            }, 
            "Cancel": function() { 
                $(this).dialog("close"); 
            } 
        }
    });

That’s it! Hopefully it was easy to understand. Let me know if you need anything cleared up a little! Thanks!