Tuesday, 2 December 2008

Customising ISA Server 2006 HTML Forms - Part 1: Simple, Consistent Form Branding

Most people at one time or another want to utilise the HTML form customisation features of ISA Server 2006 when deploying solutions, in order to provide a branded experience for end users. In addition, people often wish to 'sanitise' the text located on the form to make the form appear as generic as possible, as opposed to 'Microsoft' or 'ISA Server' branded.

Although HTML form customisation is covered well in the Microsoft document titled Customizing HTML Forms in ISA Server 2006 I thought it may be useful to share my own thoughts, findings and procedures on HTML customisation through a series of blog articles.

This is the first part in the series and provides a walkthrough of how to provide a simple and consistent brand to HTML forms. As opposed to editing the .htm code itself (as described in the Microsoft article) the approach I use is less invasive and does not require any HTML code changes at all. This has the benefit of being easily transferable between deployments (which is important for my consultancy role) and also ensures that changes can easily be removed or applied to new HTML form directories, as and when necessary. The other key benefit of this approach is that all HTML form pages will inherit the customisations, as opposed to having to edit each individual .htm file in order provide users with consistent branding or the same 'look and feel'.

Please Note: I am assuming that you have read the Microsoft article detailed above and have a general understanding of the HTML form components, structure and terminology.

If we consider the default HTML forms provided out of the box with ISA Server 2006 as a starting point, we can get a better understanding of how to modify the general look and feel of the form.

Starting with the default ISA form, this can be seen below:

If we look at the HTML code for this form (located in the logon_* files) we can break the form down into the following two key graphical components (images):

<td colspan=3><img src="/CookieAuth.dll?GetPic?formdir=@@FORMDIR&image=lgntop.gif" alt=""></td>

<td colspan=3><img src="/CookieAuth.dll?GetPic?formdir=@@FORMDIR&image=lgnbottom.gif" alt=""></td>

These are indicated in the screenshot below, highlighted in orange:

As shown in the above screenshot, the HTML form header and footer are made up of the following image files:

  • lgntop.gif
  • lgnbottom.gif

In addition to these images, a default cascading style sheet is used to define background colour, text colours etc. This style sheet is called logon_style.css

Therefore, all of the above mentioned files can be seen below highlighted in the ISA HTML form directory:

With this knowledge in hand, the simplest and most flexible option to customise the form is to merely replace these default files with customised versions which contain the required branding changes. By replacing each of these default files with each of the following customised files, we should achieve a basic level of brand customisation.

Please Note: Don't forget to restart the Microsoft Firewall service for the file changes to take effect!

Resulting in the following customised ISA default form:

Applying the same approach to the default Exchange HTML form provides similar results. However, as the default Exchange HTML forms includes an additional image in the footer, we also need to update the following file:

  • lgnexlogo.gif

Therefore, all of the above mentioned files can be seen below highlighted in the Exchange HTML form directory:

Resulting in the following customised Exchange form:

If required, my own pre-customised files (for both ISA and Exchange) which produce the above results can be downloaded from here:

Obviously, the company logo will need to be added manually, ideally using a pixel size of 500 x 115 or a very similar size.

Once the 'look and feel' has been modified, we can begin looking at the strings.txt files in order to customise the default text on the HTML form.

Please Note: There are several copies of the strings.txt file and it is necessary to edit the correct files to see your corresponding changes. The section called Form Set Directories in the Microsoft Customizing HTML Forms in ISA Server 2006 article defined above provides more detail on this concept. In summary, you often need to edit both the strings.txt located within the HTML folders and the appropriate language specific strings.txt file located within the HTML\NLS\ folder.

As described within the Microsoft article, strings are used to insert text entries into the resulting HTML forms. Of all of the strings available, I normally change the following key ones:

  • L_WindowTitle_Text
  • L_OWAWindowTitle_Text
  • L_Copyright
  • L_SecuredByISA

A quick overview of common changes is provided below:

The L_WindowTitle_Text and L_OWAWindowTitle_Text strings can be modified to change the text shown in the browser title bar, to make this company or application specific.

The L_Copyright string can be modified to change the text to reference the correct date/company and I often also use this field to add some form of legal disclaimer.

The entire Secured by Microsoft Internet Security and Acceleration Server text can be hidden by modifying this string to a single blank space e.g. " ".

These are just examples of some of the thing I do, but the strings.txt can be fully customised to meet your own personal requirements.

Bringing all this together, we now have a very clean looking form, customised and sanitised as required. The results can be seen for both ISA and Exchange below, with custom changes shown in red for clarity.

Sometimes, people also choose to modify the default Domain\user name: reference and replace this with a simpler Username: label, making it easier for users to understand when in a single domain environment.

This is very simple to achieve using the L_Username_Text string, as shown below:

Resulting in the following form:

So, as can be seen it is actually quite easy modify the default HTML forms to get a very personalised authentication form. The thing I like about this approach is that with the use of style sheet modifications combined with the use of existing image filenames, means that ALL elements of the form will inherit the same standardised 'look and feel' without requiring changes to individual .htm files. This approach also allows for the same changes to easily be applied to a new set of HTML forms, to another array member or they could be have modified by a third party or replaced as part of an ISA service pack or upgrade.

With the 'look and feel' elements covered, Part 2 of the series will show how to restructure some of the less intuitive default forms to provide a better user experience, most appropriately when using two-factor authentication solutions like RSA. More to follow...

UPDATE 05/01/09

A GUI based tool called FBA Editor has been written by Kay Sellenrode to help make some of the above described changes a little easier to achieve. The tool can be downloaded from here. Many thanks to Kay for providing the tool!