What I cannot create, I do not understand.
Richard Feynman

In a nutshell, we can not solve the problem if we don’t understand what the problem is.

Mike utilized the following exploits/weaknesses to take over an installation of PHP Nuke and enable a remote code execution:

• OWASP A1 – SQL Injection
• OWASP A3 – Broken Authentication and Session Management
• CWE-200: Information Exposure
• OWASP A1 – SQL Injection
• CWE-98: Improper Control of Filename for Include/Require Statement in PHP Program (‘PHP File Inclusion’)

While Mike said it took over a year to develop the exploit, it seemed very easy. However, I’m sure there is a lot of “guess and check” involved in hacking. Maybe by easy, to me it seems that some very basic security measures would have prevented this, measures that PHP Nuke isn’t taking, but very easily could. Things like

• Proper usage of MySQL Data Types
• Proper management of user sessions
• Better MySQL input sanitzation
• Proper login methods

These are just a few of the things that could help prevent against this exploit. More than anything, what I was amazed at was that Mike was able to login to the admin portion of the (his) site without having to decrypt the md5 password hash due to the shoddy session management. Apparently, this has been a well-documented PHP Nuke exploit for years, however he had to use some clever hacking first to obtain the information necessary.

Like I said, I learned a lot (much more than I though I was going to) at the meeting and look forward to attending every month. I highly suggest checking for an OWASP chapter in your area and attending monthly meetings. In closing, I’d like to leave a list of some of the things I took away from this meeting:

• Modules (to any web app) are a major risk for attack (I pretty much knew this one already, just wanted to share it)
• Do not mix XSS and SQL Injection sanitization methods in the same function
• Limit the abilities of what even the admin of your application can do so even if it gets popped, the damage can be minimized
• Do not use md5 for password hashing! Instead use sha1 or sha256 (this was news to me)
• Don’t manage your sessions yourself, let php manage them with session_start()
• Use PhpSecInfo
• Granting MySQL FILE privileges are worse than granting GRANT privileges
• Security through Obscurity is not security at all, instead it is merely a stop-gap
• I will NEVER use, work on, or support PHP Nuke (it has more holes than swiss cheese)

OneWordSurveys.com

The Site

OneWordSurveys.com is a site as simple as it’s concept: Simple (one word) answers to simple questions. The site poses simple questions to users, all with one word answers. Questions like “Soda or Pop?”, “Coke or Pepsi?”, “Biscuits or Muffins?”, and much, much more. The site also provides a means for users to submit their own surveys as well.

The Design

As you can see from visiting the site, the design is not overly complicated. The client wanted to focus on the surveys and make them as visible as possible and make voting simple. This meant a clean and simple design making the posts highly visible in the overall design. The theme chosen is called SimpleX and is provided by WPShoppe.com.

Only minor changes were made to the theme and installed plugins on the website after the initial design. Most of these were simply aesthetic changes at the request of the client. In addition to standard performance plugins, we also developed a plugin to allow all posts to be posted directly to the client’s Twitter account as well as also posting directly to the client’s Facebook page setup for OneWordSurveys.com. Lastly, we also customized a contact form plugin so that when a user submits a survey of their own, it will automatically create the survey and schedule the post within the database, thus automating the website further. At this point, all the client has to do is double check the post before it’s scheduled post time.

Overall, this site was a very quick and easy site we developed for the client. However, as you can see, and as the client can attest to with the automation, quick and easy does not always sacrifice quality. This site took approximately 5 hours to complete.

OneWordSurveys.com includes the following services:

• HTML
• PHP
• CSS
• Javascript
• AJAX
• MySQL
• Customized WordPress Blog
• WordPress Theme Customization
• WordPress Plugin Development

A while back, I started writing book reviews on some of the books that I have read. This didn’t take off quite as I had expected, mainly because I didn’t write all that many reviews, although I have read plenty of my books. My goal is to eventually read and write reviews for all the books that I own, although is quite the undertaking with the number of books that I own.

Until I get all those books read and reviews written, I thought another good way to share with others the info from these books is to let people know which books I own. I have posted a Tech Library that will contain all the books that I own with links to purchase, authors’ websites, and any reviews that I have written on that book. I buy my books solely based on user reviews and ratings from other readers on amazon.com. I figure the most honest opinions about a book are going to come from the people that are actually reading and using the books on a daily basis, not technical reviews and critics who may have been paid to review the book. I also feel that the authors have written the books for a reason, being experts on the subject and as such, I will provide links to their sites as I feel there is a lot to be learned from them.

Check out our library, read one of our reviews, or head over to amazon.com and pick up a new book and teach yourself something new, or expand on what you already know.

FreeAdviceForCharity.com

The Site

FreeAdviceForCharity.com is a a site based out of Phoenix, AZ that looks to give back to it’s visitor’s, more than most sites on the internet usually do. The basis behind FreeAdviceForCharity.com is that the sites team of professional financial advisors provide FREE financial advice to it’s visitors and ask nothing in return, aside from a request to donate to Rotary International’s PolioPlus Fund. The Mission Statement of the site is:

FreeAdviceForCharity.com is to provide the best quality advice for individuals regarding various financial needs while at the same time promoting local charities and building a stronger community.

The Design

When I was initially approached by the client about this site, his description of the site he wanted was one where he could provide financial information and articles to his visitors on a regular basis. He wanted to be able to continue to update the content and keep it fresh. Immediately my thoughts turned to WordPress to create a blog site. What better way to continually update the site and information for visitor’s without needing all the technical expertise and know-how to do so?

The client was initially turned off a bit by the idea of a blog. I believe this was mainly due to the misconceptions of the usefulness and power of a blog, in addition to the poor image that blogs have received due to the over-saturation of blogs on the internet. Many of the blogs out there are poor in design and (especially) content. Once I started to show the client the power of a WordPress blog, and the fact that they can be altered so that the site does not even look like your “traditional” blog, he became more open to the prospect.

When starting a professional blog-based site, I think the first step is finding a theme that you like and fits your needs. I searched all over for a good financial-based theme and presented the client with a number of ideas to go off of. He finally decided on not a financial theme, but a travel based theme from EZWPthemes.com.. This site provides a number of great looking WordPress themes for free.

After nailing down the theme, next came the customization. If you compare the above theme to the current site, you’ll notice a number of differences. These include changes made to the header to make it a financial theme, replacement of the image in the recent post section with the Mission Statement and info box, and the replacement of the Gallery on the left with multiple other modules.

After the customization of the theme, it was time to start working on the content for the site; content other than the main blog posts. This included a Request a Consultation page with custom JavaScript and AJAX built into the request form. The other main piece of development was the “Did You Know?” module on the left hand side. Visitor’s will be presented with various “Did You Know?” facts as they travel throughout the site. This was a custom WordPress Plugin we developed specifically for this site. The client has the ability to log into his WordPress dashboard and add new quotes, edit existing quotes, or delete existing quotes, all of which are stored in a separate table within the WordPress database itself. With the WordPress Plugin API, plugin development is pretty simple as it is mostly just basic PHP programming that utilizes the hooks built into WordPress. You will also notice the “Meet With An Advisor” module on the left hand side. We are currently working on another plugin to allow this data to be changed by the client as well.

Overall this was not a complicated site, as WordPress makes it very easy to launch websites in short amounts of time. This site took just over 18 hours to complete, most of which was spent on the theme customization and plugin development.

FreeAdviceForCharity.com includes the following services:

• HTML
• PHP
• CSS
• Javascript
• AJAX
• MySQL
• Customized WordPress Blog
• WordPress Theme Customization
• WordPress Plugin Development

1. The development of the plugin itself (and getting it to work)
2. The use of cURL within the plugin itself

For those of you who don’t know, cURL is a PHP library that allows you to make calls to remote websites via a PHP script. I know this isn’t all that difficult to learn, but I really havn’t had a need to use it up until now and so I never learned it.

As far as the plugin itself goes, the process turned out to be really quite simple. First, you obviously enter your twitter username and password which is then encrypted and stored in the database for later use. Next, the plugin just waits for a new post (not a page) to be published (not saved) and it checks to make sure that I havn’t already tweeted (twaught?) that post. If I havn’t, it adds an entry to make sure I don’t retweet if the post is updated again. It then creates (through cURL) the TinyURL to use with the “tweet” by connecting to the TinyURL API from the script then and makes sure the tweet is less than 140 characters long. Once past there, the script then connects to the Twitter API and logs into my account to make the post, all through the script.

I havn’t made the plugin public yet because there’s still more that I want to do to it, including validating login info once saved, allowing for custom tweets, general cleaning up/maintenance and more. Once complete, then I’ll probably make it public. But it’s a huge step in the right direction for me and I’m really happy with the results so far.

AngelWithCrookedFeet.org

The Site

AngelWithCrookedFeet.org is the online home to the Angel With Crooked Feet Foundation providing support, guidance, and counseling to youth and their families who are victims of sexual abuse and more. The Foundation was started by Anthony V. Sarjant Ph.D. of Show Low, Arizona and Gus Koernig of Mesa, Arizona. Together Tony and Gus authored Angel With Crooked Feet which chronicles the life of Tony, born with a club foot to a mother who didn’t want him. Through his years, Tony has suffered through time in and out of hospitals, petty crime, time in a juvenile detention center and later prison, sexual assault, the occult, marital infidelity, alcoholism, and suicide attempts.

It’s a story that proves, again and again, that God never gives up on us, even when we want to give up on ourselves. It is the story I’m telling because I know that reading about my experiences, my ordeals, my challenges, and my victories will help thousands of people, young and old, overcome the challenges in their lives.

The Design

AngelWithCrookedFeet.org was actually a website redesign that we did. The site was originally built by the client using Yahoo!’s SiteBuilder. As is generally the problem with site builders, the site was chunky and contained a large amount of extraneous code that not only cause the site to have the look it did (alignments were off, elements overlapped each other and burst out of their parent elements, hovers didn’t work properly, etc), but also increased the load time. So, the majority of the work was simply taking the existing website and the intended layout, and converting it to a small, fast-loading, clean, and of course, standards-compliant website.

In this redesign, the client did not wish to change the layout. He simply wanted a nice clean website. The first step in this redesign was to discern which elements/data on the page would be kept, and which images would be needed. After gathering the required elements and files, the next step was to redesign the layout based off the intentions that the client had with the original build. The layout for the most part was there, it was just clunky. In a redesign like this, I didn’t bother with the CSS at first, I simply wanted to get the code for the structure in place. After I had a lean standards compliant base to work off of, the CSS would be very easy to write and display the website in the intended manner.

The general structure of the website includes a main wrapper <div> that encompasses all the content on the website, a sidebar <div> with a navigation <table>, a main content <div>, and a footer <div> and that’s basically it. The reason for the main wrapper <div> is that the Yahoo! SiteBuilder had aligned all the content flush left leaving approximately 40% of the screen blank on the right hand side. Having this much blank space is almost standard for websites now, or at least is common, due to making sure the website will display fully on varying screen resolutions. However, the better way to display this much space is to center the content and have the space divided equally on each side which gives the appearance of the content taking up more space that it does.

So the design and the CSS weren’t to difficult for this site. The main thing I wanted to focus on for the client is getting that lean and clean website I was talking about. The two biggest differences between the Yahoo! site and the current site is the amount of code that was removed, and the navigation hover technique. As I said, the Yahoo! site had a lot of extraneous code in it, over 300 lines per page on such a small site. The current size of the site is just barely over 50 lines for the ‘home’ page and the ‘about’ page and just under that for the content page, and of course is 100% W3 HTML 4.01 Standard Compliant.

The second reason for the smaller sizes is I changed the mouseover technique used on the navigation links. Previously the mouseover was handled via Javascript. Currently with the use of Image Sprites (post to come soon about these) and the CSS 2 :hover pseudo-class, we were able to duplicate this same functionality without all the Javascript getting in the way. Basically what CSS Sprites do is takes multiple images and combines them all into one, then uses the :hover pseudo-class to reposition the background image when hovered over or selected to show the current image “state.” There is one minor drawback to the :hover element. It is not supported in IE 6 and below on any elements other than <a> tags. To quote Andy Budd from CSS Mastery: Advanced Web Standards Solutions

This is an embellishment rather than an important feature…Users of more modern browsers will appreciate the added usability benefits, while those using IE 6 and below will be unaware they are missing anything

However, using Dean Edwards’ IE 7 scripts gives this functionality to versions of IE that are missing it using just a small 30KB Javascript file.

Overall this was a simple redesign for us that took just over 3 hours to complete, but was a huge improvement for the website and the client was extremely satisfied, not only because of the vast improvement in his website, but also because of the cheap price of the redesign since it didn’t take us long to make these changes. All in all, AngelWithCrookedFeet.org includes the following services:

• HTML
• CSS
• Javascript

P.S. We are currently working on two corollary sites to go along with AngelWithCrookedFeet.org. These are AngelWithCrookedFeet.com and AngelWithCrookedFeet.info, which will have information articles about the Foundation, Inspirational/Motivational Speaking, Surviving Sexual Abuse and Child Abuse, and more, as well as give users the ability to schedule Tony for speaking engagements and the like.

AllOutdoorsPhotography.com

The Site

AllOutdoorsPhotography.com is an online photo gallery displaying the photographs of Mesa, AZ photographer Gus Koernig. Gus’s portfolio features photographs from around the United States, including Arizona, Utah, Wyoming, Montana, North Carolina, and more, as well as Australia and New Zealand. AllOutdoorsPhotography.com focuses on capturing the beauty of the world that we live, from Mountains to Streams, Waterfalls to Seascapes, Sunrises and Sunsets to Cityscapes, these images will take your breath away. All photos on the site are available for sale with options of a print only or a beautiful museum-style mounting for easy display. All photos come hand-signed by the photographer.

The Design

Our design process for AllOutdoorsPhotography.com started a little different than most. First off, Gus was fairly open to the design of the site and didn’t really have anything in particular in mind with regards to the layout/design of the site. This left us not only with an option to experiment, but also didn’t give us a lot of direction to start with either. The ultimate goal of the site was to display the images in a gallery format with the implementation of a shopping cart functionality to allow for the purchase of the photos.

We started out by coming up with a number of different layout ideas in a process called “wireframing.” Wireframing involves creating

“black-and-white diagrams that illustrate blocks of content, navigation, or functionality…used as a tool to communicate content and structure without the distractions of color and imagery.”

Transcending CSS: The Fine Art of Web Design by Andy Clarke

Here’s an example of some of our wireframes

With a layout selected by Gus, we set forth on creating our website comps. The comps were the basic structure and layout of the site as actual web pages for Gus to get a feel for how the selected wireframe would translate to an actual working web site. The comps were designed in basic HTML and CSS and, once approved by Gus, were very easy to convert into PHP by taking our duplicate content (page headers, footers, and navigation bars) and copying them into a PHP include file. This took care of the majority of the site

The remainder (and bulk) of the site involved displaying the photos from stored database information and creating the shopping cart. By storing the image information in a database, it allows Gus to login to the CMS we created for him to upload new photos, remove existing, change prices, on his own. It also cuts down on the amount of code required for each page of the site. From there, it was simply a matter of creating the shopping cart (which is not as easy as I’m making it sound) for purchasing the orders. There are a lot of caveats to creating a custom shopping cart and, as a designer/developer, you need to make sure that all of those are covered. I won’t cover those here, but let’s just say that the attention to detail is a high priority and can make or break a custom shopping cart. For more information about creating shopping carts, I recommend Constructing Usable Shopping Carts by Clifton Evans, Jody Kerr, and Jon Stephens

All in all, the site for AllOutdoorsPhotography.com took us approximately 45 hours to complete and included the following services:

• HTML
• CSS
• Javascript
• PHP
• AJAX
• MySQL
• Flash
• Custom Shopping Cart
• Custom CMS
• Logo Design