A quick introduction to XSSI

Do you need XSSI?

When designing your Web site, you can find that many of its pages have to be dynamically generated. Using a scripting language such as PHP or Perl can be a solution. But if you are just using them as a templating system with no need for databases access, complex logic, or form processing, such a choice can be overkill.

In such a case, considering using XSSI (eXtended Server Side Includes) can be very rewarding:

  • The XSSI engine is included in the Web server and you do not have to install or configure anything to get XSSI pages processed.
  • XSSI pages require very low processing and memory resources in comparison with scripting languages.
  • XSSI processing is fast since it is done inside the Web server whereas scripting languages are loaded inside external processes.

First Example

It is sometimes important to include in the bottom of some Web pages their last date of modification. This can give a hint to users about their freshness or can suggest that they are up-to-date.

Last modified on Tue Jan 19, 2009

Inserting such a notice by hand in your pages can easily become a daunting task. XSSI can come here to rescue as it can do that for you automatically if you enter the following directive instead of the date:

<div>Last modified on <!--#echo var="LAST_MODIFIED"--></div>

To have this extra directive processed by the XSSI engine, all you have to do is to change the extension of your HTML page to .shtml. If such a change is costly, you can configure Abyss Web Server to preprocess .html pages by the XSSI engine.

So what are XSSI?

XSSI (eXtended Server Side Includes) are a set of directives that can be put in a HTML page and interpreted by the web server while it sends the page to a client. You can use XSSI to insert in your HTML page:

  • The value of an environment variable.
  • The size and the last modification time of a file.
  • A file.
  • The output of a script or a shell command.

XSSI also supports conditional processing as well as declaring variables and setting their values.

XSSI Syntax

<!-- #directive attr1="value1" attr2="value2" ... -->

Directives are enclosed in standard HTML comments. So if XSSI processing is not enabled, your browser will ignore them. Otherwise, each directive is evaluated and replaced by its results.

Second Example: XSSI environment variables

The following HTML code contains a single XSSI directive which prints the HTTP_REFERER environment variable which contains the URL of the last page the user followed before reach the current one:

<HTML>
  <HEAD><TITLE>XSSI Test</TITLE></HEAD>
  <BODY>
    Welcome! You reached us from <!--#echo var="HTTP_REFERER" -->.
  </BODY>
</HTML>

To put it in action, copy the above HTML code inside a new file called test2.shtml and save it inside your Web site document path. Browsing that newly created page will result in an output which looks like:

Welcome! You reached us from http://www.aprelium.com/.

XSSI environment variables

In the above example, HTTP_USER_AGENT is an environment variable. The XSSI environment variables that are usually generated by an HTTP request can be classified into 4 categories depending on the information they give:

  • Information about the client (the visitor's browser).
  • Information about the server.
  • Information about the current time and date.
  • Information about the document (requested URL or file).

For an extensive list of environment variables available for XSSI use, please refer to Abyss Web Server documentation

Advanced XSSI Constructs

Declaring new variables and setting their values

<!--#set var="new_variable" value="new_value" -->

Testing variables values

<!-- #if expression="test_expression_1" -->
  Content to process if test_expression_1 is true
<!-- #elif expression="test_expression_2" -->
  Content to process if test_expression_2 is true
  .
  .
<!-- #elif expression="test_expression_n" -->
  Content to process if test_expression_n is true
<!-- #else -->
  Content to process if all the above tests are false
<!-- #endif -->

The test expressions can range from simple comparisons between variables and strings to regular expression matching.

For more details on conditional blocks, please refer to Abyss Web Server documentation.

Third example: Putting it all together

XSSI are based on simple SSI directives that are executed on the web server which can improve and speed efficiently the web pages loading. The code below of a simple template design is an example of XSSI for such purpose:

<HTML>
  <HEAD><TITLE>XSSI Test</TITLE></HEAD>
  <BODY>
    <!--#if expr="$(HTTP_USER_AGENT) = /MSIE/" -->
      <!--#set var="Browser" value="Microsoft Internet Explorer" -->
    <!--#elif expr="$(HTTP_USER_AGENT) = /Opera/" -->
      <!--#set var="Browser" value="Opera" -->
    <!--#else -->
      <!--#set var="Browser" value="an unknown browser" -->
    <!--#endif -->


    <DIV>
      Welcome. You are using <!--#echo var="Browser" -->
      and you reached us from <!--#echo var="HTTP_REFERER" -->.
      This page was generated on <!--#echo var="DATE_LOCAL" -->.
    </DIV>

    <!--#if expr="${HTTP_USER_AGENT} = /MSIE [3-5]/" -->
      <!--#include file="legacy_msie_design.html"-->
    <!--#else -->
      <!--#include file="new_design.html"-->
    <!--#endif -->


    <DIV><A HREF="<!-#echo var="HTTP_REFERER"-->">Previous Page</A></DIV>
  </BODY>
</HTML>

First, a regular expression matching is done on the HTTP_USER_AGENT environment variable. Depending on the matching results, a new variable Browser is filled with the client browser name using the #set directive. Next, the DATE_LOCAL environment variable is printed (echoed). As a last step, a new test is carried on HTTP_USER_AGENT's value:
  • If HTTP_USER_AGENT contains the string MSIE 3, MSIE 4, or MSIE 5 (which happens when the visitor is using Microsoft Internet Explorer 5 or earlier), the contents of the file legacy_msie_design.html are included.
  • Otherwise, the contents of new_design.html are inserted.

See also