"Innovation comes only from readily and seamlessly sharing information rather than hoarding it."- Tom Peters
Development Blog

Articles - CSS_HTML entries

Protecting Images using PHP and htaccess

Sources to check

In this article, we're going to tackle a few different tactics to safeguard images. But, let's first think about what ways people can get images.

  • Direct path - if a user knows the path to an image, they can simply go straight to it, and download the image.
  • Drag and drop - in most browsers today, you can simply drag and drop an image right onto your desktop.
  • Hotlinking - another website can link directly to your image
  • Screenshot - a visitor can simply take a screenshot of your page and crop the image.

How to fix them

So, now that we've established where our problems are, how can we fix them?

CSS3: Drop Shadows

CSS3 is exciting stuff. I really like the drop shadow feature because I was tired of always having to create new PNG files just to get the effect. Also, it's a pain trying to get the bottom lined up, and the right side of a div to all look right with the shadow. What a relief it is to let the browser figure it all out!

So, what are the tags?

Just like the CSS3 rotating text, each browser has its own tag. I haven't figured it out for Opera yet, but I'm sure that's ok. Very few people are using it anyways, right? So...here's the tags.


filter:progid:DXImageTransform.Microsoft.DropShadow(sProperties)
-webkit-box-shadow: 10px 10px 25px #ccc;
-moz-box-shadow: 10px 10px 25px #ccc;

The first one, the filter is for IE (details), the webkit tag is for Chrome and Safari (details), and the moz-box-shadow tag is for Firefox (details).

Properties

Webkit and Mozilla

The properties are pretty simple. They pretty much go as follows:

CSS3: Rotating Text

If you look at my home page, or on the Articles page, you'll see that the dates are rotated. How do we do that? Well, with a little bit of simple CSS styling, it's quite easy! The hard part is working with positioning... But, we'll try to go over that here!

The CSS Code

In case you're just here to see the CSS code, it's just below. Under it, I've got a very simple tutorial on how to use it.


-moz-transform:rotate(270deg);
-webkit-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

This code creates the rotation used on my site for the date elements. It rotates the text so the bottom is facing to the right.

Form Security using PHP

What we will do is allow a user to pass an array of element "names" that they want to be hidden.  Some examples might be "firstName", "lastname", "email", or "username".  Our PHP class will return these elements as hidden input elements, and then store them into a session variable.  After the form is submitted, the class will check all of these elements to see if any are filled.  If any are filled, we know something has happened.  So... let's begin.

First, we need to build our PHP class.  Here's the barebones...

<?php

class safeForm {
     //This variable will store the current data.
     private $data = array();    

     //This variable will store the old data to be checked.
     private $old_data = array();

     //This function will actually do the input element creation.
     function setFields($fieldNames) {

     }
}

What you see are our two variables, one to store our current data, and one to store the old data. Our function setFields() will actually do the creation of our hidden elements. The variable $fieldNames will be an array of string elements of the field names to hide.