Securing Wordpress - what my ‘oops’ reminded me

February 23rd, 2008 by Aaron

I don’t want to admit it - but I messed up. I didn’t patch wordpress - and I was a victim of one of the released wp exploits. How could you let this happen? you ask. Well, I was lazy. But let this be a lesson to ya - don’t forget - otherwise its a LOT harder to clean it up (it took me roughly 4 hours to fix which included 2 hours of ignoring my friend on the phone…)

For good measure, I’ll hook you up with some worthwhile links to help you secure your WP:

Main Article about Wordpress Security Tips and Hacks. He links to Three tips to protect your wordpress from matt and also wp designer’s tips on security. Oh and if you’re really gutzy - or lazy - check out the wp scanner - should help you take care of some stuff.

Don’t screw up like I did - lazy isn’t worth it!

3D CSS Example

January 6th, 2008 by Aaron

This example is a proof-of-concept I worked on years ago when people first started talking about making 3D games with no images - CSS only.

Check it out - it only works in FireFox at this time (It was a proof of concept).

CSS 3D Example

APD post processing wrapper

November 17th, 2007 by Aaron

A while ago, I discovered the ‘joys’ of APD… and then moreso, the ‘joys’ of not being able to make heads or tails out of the output script. After digging deeper, I saw that the original directory already had some PHP scripts to parse the output. I ran those and wasn’t very impressed. Even more important, my boss wouldn’t be impressed. I needed to be able to make something that could be useful to integrate into a table (I finally used dojo to create a table…)

At any rate, I thought I might save anyone some time by posting the code here:

Continue reading APD post processing wrapper

Cross Domain AJAX - A quick anatomy of a mashup

September 19th, 2007 by Aaron

So after searching the Internet for some cross domain AJAX stuff, I noticed two interesting articles. The first was the specifics of writing these queries (located here). Then, the next gave a breakdown of how this might be useful in a mash-up collaborative sense (here).

The one missing point was how the collaboration should occur. There is talk about same parent domain but I think everyone’s forgetting about the DNS/webserver changes that need to happen.

In order to prove my concept on my windows box, I set up the examples. In that previous example, domain D had a subdomain of D_s which pointed to E.

I determined what the IP address of E was and entered that into my hosts file (I don’t have access to a DNS server at the moment) followed by the subdomain D_s.

Next, using apache, I found the virtual host for E, and put in ‘ServerAlias D_s’. This will make sure that the incoming connection to that IP will also respond to that sub domain.

I just wanted to jot this down to help fill in the hole I noticed.

Create an RSS feed of comments from myspace

September 8th, 2007 by Aaron

Lately, I’ve been trying to find ways to reduce the amount of time I spend on stupid sites like myspace (nevermind the fact that the time it took to reduce this amount took me enough time to visit myspace 1x a day for another month - heh). At any rate, I’ve been using Google Reader alot more (I’m up to 180 or so feeds) and I thought: Why don’t I make an RSS feed o my comments - then I don’t have to go back to the site when someone sends me a comment. (Mind you, myspace does send you an e-mail when you receive a comment, but doesn’t include the content. JEMDiary does, however ;)) I searched the internet and found a few sites that are doing that for a service, and one guy who was giving away a regular expression. So, I took his idea and wrote my own php script for cron. Check it out here:

Continue reading Create an RSS feed of comments from myspace

Tools of the trade

August 31st, 2007 by Aaron

I just thought I’d drop some useful links and tools your way for those beginning and non-tool-cist peoples:

http://getfirebug.com/
used for js/css/dom debugging - additionally, even Yahoo is building upon this. I’ve used this a lot for AJAX request debugging as well.

http://zend.com/pdt
Zend eclipse project - get the full package - this is a ton of PHP tools from Zend (the PHP company) built on top of Eclipse (for those Java tool lovers out there)

Aptana
useful for css/javascript editing in eclipse - or as a standalone

Mysql Gui Tools
a nice gui browser for mysql - I know I know - us diehards - we shouldn’t need this - but it is still nice (you can also get plugins for eclipse to do the same thing with jdbc)

Pietty + Putty
Pietty - a putty plugin - allows for true transparency of putty windows - amazingly cool - at first its in some oriental language - and when you first open it up - you can’t read the screen when you first ssh somewhere. Never fear: just goto the encoding menu option and choose utf-8 - otherwise works like a dream. SSH to your heart’s content.

Komodo
If you don’t like Eclipse or the long time it takes to load, you can use Komodo. Plus, version 4 brings some lovely things to the table. Thats right, Lovely (and thats not cuz they gave me a shirt either…)

PHPDoc
Phpdoc for windows - has a nice gui for using phpdoc - what we use for documentation because its easy to customize and launch. (I have been using an eclipse tool though lately that I wrote….)

Thats about it - if you know any other cool tools, post them in the comments!

Friendly reminders about testing your PHP code

August 3rd, 2007 by Aaron

I was reading on a forum the other day about some benchmarks for PHP. The guy had posted some results in ms measurements, and was getting upset about his erratic results. There were some things that he was forgetting, however.

First, not all tests are built to be accurate up to the ms. Sometimes, they are ratio based. For example, the tests you run on your development machine aren’t going to perform the same as they would on the production machine (of course, in this example I’m assuming identical hardware and configuration). There is differences in processes running, memory, etc. The important thing to note is the ratio between a mean of tests in scenario 1 and scenario 2.

Next, if we want to be super picky, the code you’re inserting to test - or the extra modules (think xdebug) you’re loading to test performance - are going to actually lower your performance a small amount. And when dealing with ms, this is measurable!

Finally, I can’t believe how many people forget this: if your development machine is not an exact copy of your production server (which most of the time, it isn’t), your tests MUST be ratio based. There are so many differences here - including even the differences in performance on internal PHP functions (think windows + perl regular expressions…)

So, in summary: DO test. DON’T take the results verbatim as proof. Run many and use means and averages. Be smart about how you’re configuring your test environment.

Highlighting Source Files

July 6th, 2007 by Aaron

I have been writing code snippets in this wordpress blog alot - and I wanted to possibly have the code highlighted. One of the things that happened with code highlighting plugins I’ve noticed is that the code has to be valid (I’ve posted invalid PHP because stupid wordpress kept eating it) or one type of code (I post javascript/html combinations, with ellipses and such…), and so I finally decided to not highlight my code - unless I could find a really cool code highlighting plugin. But along the way, I discovered some really cool tools that might be useful.

Continue reading Highlighting Source Files

Make interfaces Useful, not featureful

June 19th, 2007 by Aaron

There seem to be two schools of design lately: Feature rich, RIA designs and simplicity.

There seems to be confusion over what is the right way to design a website or… for that fact, a user interface. With the technological abilities we have for interface design, more options are available. Because of this, we tend to think that more is better. There are others who ignore the fact that we have these advances, and go as simplistic as possible: two buttons and a form. I advocate for a compromise… let me give examples:

Continue reading Make interfaces Useful, not featureful

How to make a Great MySpace Layout

April 3rd, 2007 by Aaron

In this posting, I’m going to share the steps to making a slimmed down, cleaner, nicer layout for MySpace to help showcase your personal interests, your band, or your business.

Always Develop Locally

I always work locally when I design web pages. For example, when I worked on the new JEMDiary website, I made a copy of the existing one locally, and then started editing it locally. The same applies with this MySpace layout project. View your profile, click File - Save - and save the entire webpage.
I also suggest viewing the source of the myspace page and commenting / removing a specific javascript call:
oas_ad(”www.myspace.com/viewprofile,11013005″,”Leaderboard2″);
This appears to generate the top ad on your profile. I found it better and easier on my eyes to take a screenshot of the ad, and use that.

What Do I have to keep?

You have to keep the ad at the top; thats why I suggested taking a screedshot. Place this ad in the center of your page. That appears to be the only real big key item to keep.

What SHOULD I keep?

Because MySpace users are normally used to having the links at the top of the page, its a good idea to keep some of them there. I personally use the ‘Home’ and ‘Search’ links alot. I also appreciate ‘Music’ so I’ve kept that one there as well. If you were to remove all of these links, your visitors may not want to come back. People tend to feel ‘trapped’ on a page if the layout/functionality changes too much.

Customizing the Current Layout vs Creating a New One

For a period of time, I had customized the current layout. The CSS needed to do this is quite intricate to build, however. The new layout was a little bit more customizable and could use easier CSS declarations and better well-formed xhtml. There are pro’s and con’s to both:
Current Layout Pros: when MySpace adds new features, you immediately have them available, usually is a more familiar type of page for avid MySpace users, allows typical features of display picture and comments to display on the page.
New Layout Pros: Completely customize the user experience - you can control all the information you want to display. Easier to code (in my opinion).

Alrighty - tell me how to do it!

First, you have to determine where to put your CSS and where to put your HTML. YOu could put it all in one section, but I chose to split mine up. ALWAYS put your CSS first, however. This allows the browser to read it in and then apply the style immediately to HTML its rendering. If you do it the other way, there’s a small chance to see a jumpy page.

Remember, we’re developing locally - so open up your copy of your profile. I put my CSS in the ‘About Me’ section.

The first CSS I added is this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

.main {
position: absolute;
left: 50%;
top: 125px;
width: 1000px;
z-index: 1;
margin-left: -500px;
}
.maintable {
width: 1000px;
height: 800px;
cellpadding: 0px;
cellspacing: 0px;
background-color: 000000;
}

OK - but you said you were going to use Well-Formed HTML - I see problems!
Right-o you do. The first thing you’ll notice is that there are no IDs referenced in this css. With a name like ‘main’ you can pretty much assume there’s only one version. The next thing you’ll notice is the lack of pound signs infront of the css hex colors. The reason for this is that MySpace filters out the # symbol for whatever reason. So, we can’t reference elements by id’s and we can’t use properly declared hex values. Luckily for us, most browsers will interpret that 6 digit number as hex. Whew!

The screen size (width elements) are based on the normal screen size. Technically, MySpace’s layout is only 800px wide, but I tend to design for 1000px. So I made mine that wide. If you go with an 800px layout, margin-left would be negative half of that… so -400px.

It is also important to apply a height to the table initially to block out all the content. Depending on the length of your new content, you may not need to do this. I set mine to what works. Finally, make sure to have a background color or image in order to block out the content.

Next, the equivalent HTML (in the Who I’d like to meet section)

1
2
3
4
5

<div class="main">
<table class="maintable">
<tr><td valign="top">
<!-- content here -->
</td></tr></table></div>

This matches up with the css. The ‘content here’ comment would be where you’d start stashing all of your content.

Comments still show through?

Sometimes the comments still end up showing through onto your front page, so insert this html at the VERY BOTTOM of your html in the who I’d like to meet section.

1
2
3
4
5
6
7

<!-- hides comments    -->
<div style="position: relative;
height: 380px;
overflow: hidden;
border: 0px;">
 
<table><tr><td><table><tr><td>

Now, take a quick preview!

You should be able to open this page up locally in a webbrowser, and see your brand - new … BLANK myspace page. You have the ad, and thats about it.

What should be my next steps?

I opened up a new page in Gimp (like photoshop) and started creating my layout, merging pictures, etc. Then when I finally had a style I liked, I ended up breaking out the pictures and assigning them with embeded style declarations with absolute positioning. Very nice. Quick helpful note: don’t forget to add the following CSS:

1
2
3

a img {
border: none;
}

This will keep your image links from having a border and throwing off your layout.

What about Comments?

You can still have a user comment on your profile by providing the typical comment link. However, you may want to provide them with a form to use directly from your page. Use the following HTML:

1
2
3
4

<form method="post" action="http://comments.myspace.com/index.cfm?fuseaction=user.ConfirmComment">
<input type="hidden" name="friendID" value="##yourfriendidnum##">
<textarea name="f_comments"></textarea><input type="submit" />
</form>

This is very stripped down, but thats all you need to get the user to your confirm comment screen. Make sure to put your own numeric friend id number in the value of that hidden input, however.

(Note: Comments are not covered in the advanced programming section either. I don’t want to make images out of them. If anyone has any other ideas, let me know. I had thought of once creating a parser that reads them in, then creates an rss feed, which is read in by a flash ap… but I’m not really a flash programmer…)

Advanced Programming (top friends, friends count)

You may have noticed that you no longer have your top friends or a listing of your friend count on your front page. while the rest of the stuff was easy to figure out how to link to (like Add Me, Message Me, etc), the top friends can be hard. People are always changing their pictures - how do you keep up with this on your custom page as well as still allow yourself to change your top friends through myspace? A PHP script is the Answer.

If you don’t know PHP and don’t have an understanding of programming, this part may be a bit greek.

The first thing I wanted to do was get my friend count. Locally I was able to use file_get_contents() with a remote URL. My hosting provider had allow_url_fopen turned off however. So I had to create my own hacked up function (side note: I should point out that I usually code alot nicer than this - but in the spirit of myspace, I hacked everything together too). I created the function get_contents to use in place of file_get_contents();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

function get_contents($url)
{
$parts = explode('/', $url, 2);
$fp = fsockopen($parts[0], 80, $errno, $errstr, 30);
if (!$fp) {
die();
} else {
$out = "GET /{$parts[1]} HTTP/1.1\r\n";
$out .= "Host: {$parts[0]}\r\n";
$out .= "Connection: Close\r\n\r\n";
$f = '';
fwrite (  $fp, $out);
while (!feof($fp)) {
$f .= fgets($fp, 128);
}
fclose($fp);
}
return $f;
}

The first thing I do is read in the profile page (yay - the content is still there - its just been hidden with CSS).

1

$f = get_contents ('profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendid=#######');

Remote Text Isn’t Allowed! - Use an image

Becuase of no remote text, I have to create an image with my friend count. In order to do that, I wrote a quick regular expression to find my friend count. Then, a new image is created with the GD library, filled with an off black background, and text added with a bluey color. Finally, its written out to a public directory so that I can add it as an item in my HTML part of my profile. Here is the code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

preg_match ('/<span class="redbtext">(\d+)<\/span>/', $f, $x);
$friendcount = $x[1];
$countpic = imagecreatetruecolor(300, 50);
$fill2 = imagecolorallocate($countpic, 16, 16, 16);
imagefill($countpic, 0, 0, $fill2);
$color = imagecolorallocate($countpic, 14,93,248);
imagestring($countpic, 5, 0, 0, "I have {$friendcount} friends... wow!", $color);
imagestring($countpic, 5, 0, 20, "I'm not really THAT cool...", $color);
imagepng($countpic, '../fcount.png');
preg_match('/<span class="redbtext">(\d+)<\/span>/', $f, $x);
$friendcount = $x[1];
$countpic = imagecreatetruecolor(300, 50);
$fill2 = imagecolorallocate($countpic, 16, 16, 16);
imagefill($countpic, 0, 0, $fill2);
$color = imagecolorallocate($countpic, 14,93,248);
imagestring($countpic, 5, 0, 0, "I have {$friendcount} friends... wow!", $color);
imagestring($countpic, 5, 0, 20, "I'm not really THAT cool...", $color);
imagepng($countpic, '../fcount.png');

But what about my buddies?

I made a collage.
I wrote a few regular expressions based on table layouts… but that just turned out really bad. I finally did another approach. It looks like they have an ID system set up for your friends links… so I wrote a regular expression based off of that. This is what it is:

1
2
3

$m = '<a href\="http.*?id\="ctl00_Main_ctl00_UserFriends.*?src=\"(.*?)\"';
$c = preg_match_all('/' . $m . '/s', $f, $matches);
$items = array_reverse($matches[1]);

First off, it gets all the full paths for the images, then it agregates them in a reverse array. I reversed it because my most important friend is first… and when I reverse it, the least important one is written the image first (possibly being overwritten).

Once again, read in each file’s content. You could use the gd’s createimagejpg with remote URLs … but I couldn’t. (random side note: yes, I am not allowing for non jpgs… it might crash.) I had to end up using wget through passthru() call (dumb: why have remote urls off but allow system calls?). I did this:

1
2
3

foreach ($items as $item) {
passthru ("wget {$item}");
}

Then I read them all in using glob(*.jpg) into an array that we iterate through… but first: create your image to be used as the main item.

1
2
3

$mainpic = imagecreatetruecolor(450, 170);
$fill = imagecolorallocate($mainpic, 16, 16, 16);
imagefill($mainpic, 0, 0, $fill);

Of course, now that I have an array of jpg files, the importance is no longer available by the array_reverse() call - so I just do a quick shuffle() on the array.

Finally, the final loop:

1
2
3
4
5
6
7
8

foreach ($jpgs as $jpg) {
$pic = imagecreatefromjpeg($jpg);
$size = getimagesize($jpg);
$x = rand(1, 380);
$y = rand(1, 120);
imagecopymerge($mainpic, $pic, $x, $y, 0, 0, $size[0],$size[1], 100);
unlink($jpg);
}

We create a new GD image from each, get their size into the size array, generate a random x,y coordinate 50px less than our main picture (cuz we don’t want to totally write them off the screen!) We finally merge them in with the original image, and delete our wget version (you wouldn’t have to do this with the remote url option).

And …drum roll please… the friend collage.

Finally, the friends are written to a public directory:

1

imagepng ($mainpic, '../fs.png');

There you go.

There’s a better way to do this!

If you have a better, more effecient way to create any of this content and functionality, please let me know! Any feedback would be appreciated.