TIP: Get Lighttpd to display different favicon for SSL pages

on the same server, same ip and same CMS

The Situation

My site is run on a VPS with very modest resources. I don't run a database, my content management systems are all flat file based to conserve. I have but one IP. Thanks to Startcom I was able to get verified SSL certificates for my website free of charge.

The thing is I wanted to have things configured so that when a visitor proceeds to a secure page the favicon changes to a secure looking one using the same CMS instance on the same server with the same IP.

This turned out not to be as straightforward as I thought it would be. Here is what I came up with in the end.

Step 1: Setup SSL in Lighttpd

I first had to setup SSL on Lighttpd. I started with this page. I may get around to recording my steps here some day.

To setup SSL I had to put my configuration in /etc/lighttpd/conf-enabled/10-ssl.conf

In that file you turn on the SSL service and specify the various certificate files needed.

Step 2: Make Your Favicons

Using my favorite image editor (the Gimp) and some royalty free images I produced two favicon.ico files: one for the regular pages and the other for the secure ones.

Step 3: The Good Part

So far everything is standard. Essentially what I did was tell my CMS to look in a folder called /favicon for its favicon.ico file. So the CMS would always look there for a file named favicon.ico. Here is where the little trick comes in.

However there will not be an actual folder called /favicon rather it would be an alias so that Lighttpd would point to one folder for non-secure connections and another folder for secure ones. To do that I simply did the following.

In the main config file, /etc/lighttpd/lighttpd.conf I inserted this:

$SERVER["socket"] == ":80" {
alias.url += ( "/favicon/" => "/web/folder/doc_root/favicon_n/" )
}

This tells Lighttpd to point /favicon to the folder /favicon_n in the document root for non-secure connections (via port 80).

Then in the SSL config file mentioned earlier, /etc/lighttpd/conf-enabled/10-ssl.conf I inserted:

alias.url += ( "/favicon/" => "/web/folder/doc_root/favicon_sc/" )
}

Which tells Lighttpd to point /favicon to the folder /favicon_sc in the document root for secure connections (via port 443).

Step 4: Drop Your Payload & Restart

Then I just droped the two favicon.ico files I made in step 2 into their respectives folders, the regular one in /favicon_n and the secure one in /favicon_sc and restarted the web-server.

Step 5: Edit Your CMS Template

There after it was simply a matter of editing my CMS template and pointing it to either an absolute or relative url /favicon/favicon.ico and Lighttpd ensures that the right icon is automatically loaded based on the port it's routing to.

That's it.

~~DISCUSSION~~

lighty/sslico.txt · Last modified: 2010/09/16 13:08 by qays
www.chimeric.de Creative Commons License Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0