I was looking through my blog this morning because I could have sworn I already wrote this post. I know I’ve had this conversation with Phil Nash of Unintentionally Blank. But I guess I never wrote it down? Oh well…

One of my pet peeves when filling out a form is when I click in the payment field and my credit crard / bank account number drops down because it was saved in the browser from last time I made a payment on that site. How is it that developers on these sites overlook that huge security issue?

There’s a very simple fix for it, and it’s called “autocomplete off”:

The XHTML

<input id="pmt" name="payment" type="text" autocomplete="off"/>

The autocomplete="off" makes sure the text field doesn’t expose any saved data. Of course, it would be too easy if this was valid XHTML so it’s not. If you’re concerned with writing 100% valid XHTML, there are valid ways to do this.

Writing valid code

To make this valid, we need to do it with JavaScript. Since I’m pretty sure most people who read this are jQuery freaks (like me), I’ll show the jQuery version of this:

The XHTML

<input id="pmt" name="payment" type="text" />

The jQuery

$(function() {
$("input#pmt").attr("autocomplete","off");
});

The problem with added security with JavaScript

I don’t really recommend using javaScript for this, only because it’s easily disabled. And then you’re back at square one with the payment info dropping down in the text field

Ideally, I’d like to use PHP to do this, but I can’t find it anywhere so I’m using <noscript>:

The jQuery

$(function() {
$("form#paymentform").html("<input id="pmt" name="payment" type="text" autocomplete="off"/>);
});

The XHTML (placed inside the form)

<label for="pmt">Credit Card Number</label>
<noscript><input id="pmt" name="payment" type="text" autocomplete="off"/></noscript>

That way, if javascript is enabled you’ll use the jQuery to write the textfield, and if it’s not, you’ll just write it out normally, which will be invalid, but more secure.

Let me know if anyone knows the PHP way to check for JS.

Every once in a while Google Analytics will turn up a peculiar behavior where you can tell someone is linking directly to an image hosted on your Web server. Sometimes it can be for good reasons like giving you credit for a project, or make sure files are synced up (cross-domain projects); but it’s usually just out of ignorance or laziness (or myspace).

Either way, hotlinking images like that steals your bandwidth and can effect the performance of your server. So you want to stop it.

There are a few ways you can do this; some people output a special image to a bandwidth thief that says something like “Stop stealing my images”. I don’t like that mainly because you’re intentionally degrading your bandwidth to teach someone a lesson about hotlinking? Bleh.

I prefer using a 403 error, it works just as well in my opinion, and gets the point accross.

.htaccess code

RewriteEngine On
RewriteCond %{HTTP_REFERER} !^http://(.+\.)?csskarma\.com/ [NC]
RewriteCond %{HTTP_REFERER} !^$
RewriteRule .*\.(jpe?g|gif|bmp|png)$ - [F]

Put that in your .htaccess file (in your root directory). If you don't have an .htaccess file, just create an empty file in the root and name it ".htaccess". Then put this code in there and you'll be good to go.

Don't forget to change out "csskarma" for your web site. You'll definitely notice if you forget that bit.

What's going on

Turn on the rewrite condition:

RewriteEngine On

Match any request for csskarma.com (NC means "no case" it will match upper or lower case requests):

RewriteCond %{HTTP_REFERER} !^http://(.+\.)?csskarma\.com/ [NC]

Allow empty requests, these are harmless and often 404 errors anyway

RewriteCond %{HTTP_REFERER} !^$

Replace the stolen image with a 403 "forbidden" error

RewriteRule .*\.(jpe?g|gif|bmp|png)$ - [F]