Customizing Clientless SSL VPN

Customize the Clientless SSL VPN User Experience

You can customize the Clientless SSL VPN user experience, including the logon, portal, and logout pages. There are two methods you can use. You can customize pre-defined page components in the Add/Edit Customization Object window. This window adds, or makes changes to, an XML file stored on the ASA (a customization object) that is used to customize the pages. Alternatively, you can export the XML file to a local computer or server, make changes to the XML tags, and re-import the file to the ASA. Either method creates a customization object that you apply to a connection profile or group policy.

Rather than customizing the pre-defined components of the logon page, you can create your own page and import it to the ASA for full customization.

You can customize pre-defined components of the logon page, including titles, language options, and messages to users. Alternatively, you can completely replace the page with your own custom page (full customization).

Customize the Logon Page with the Customization Editor

The following figure shows the logon page and the pre-defined components you can customize:

Figure 1. Components of Clientless Logon Page

To customize all the components of the logon page, follow this procedure. You can preview your changes for each component by clicking the Preview button:

Procedure

Step 1

Specify pre-defined customization. Go to Logon Page and choose Customize pre-defined logon page components. Specify a title for the browser window.

Step 2

Display and customize the title panel. Go to Logon Page > Title Panel and check Display title panel. Enter text to display as the title and specify a logo. Specify any font styles.

Step 3

Specify language options to display. Go to Logon Page > Language and check Enable Language Selector. Add or delete any languages to display to remote users. Languages in the list require translation tables that you configure in Configuration > Remote Access VPN > Language Localization.

The username and password fields' labels will change according to the language selected by the user.
Step 4

Customize the logon form. Go to Logon Page > Logon Form. Customize the text of the form and the font style in the panel. The secondary password field appears to users only if a secondary authentication server is configured in the connection profile.

Step 5

Arrange the position of the logon form fields. Go to Logon Page > Form Fields Order. Use the up and down arrow buttons to change the order that the fields are displayed.

Step 6

Add messages to users. Go to Logon Page > Informational Panel and check Display informational panel. Add text to display in the panel, change the position of the panel relative to the logon form, and specify a logo to display in this panel.

Step 7

Display a copyright statement. Go to Logon Page > Copyright Panel and check Display copyright panel. Add text to display for copyright purposes.

Step 8

Click OK, then apply the changes to the customization object you edited.

What to do next

Read about Replacing the Logon Page with Your Own Fully Customized Page.

Replace the Logon Page With Your Own Fully Customized Page

If you prefer to use your own, custom login screen, rather than changing specific components of the logon page we provide, you can perform this advanced customization using the Full Customization feature.

With Full Customization, you provide the HTML for your own login screen, and you insert Cisco HTML code that calls functions on the ASA that create the Login form and the Language Selector drop-down list.

This document describes the modifications you need to make to your HTML code and the tasks required to configure the ASA to use your code.

The following figure shows a simple example of a custom login screen enabled by the Full Customization feature.

Figure 2. Example of Full Customization of Logon Page

Create the Custom Login Screen File

The following HTML code is used as an example and is the code that displays: 


<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 3</title>
<base target="_self">
</head>

<p align="center">
<img border="0" src="/+CSCOU+/cisco_logo.jpg" width="188" height="48"><font face="Snap ITC" size="6" color="#FF00FF">
</font><font face="Snap ITC" color="#FF00FF" size="7">&nbsp;</font><i><b><font color="#FF0000" size="7" face="Sylfaen"> SSL VPN Service by the Cisco ASA5500</font></b></i></p>

<body onload="csco_ShowLoginForm('lform');csco_ShowLanguageSelector('selector')">

<table>

<tr><td colspan=3 height=20 align=right><div id="selector" style="width: 300px"></div></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr>
<td height="379"></td>
<td height="379"></td>
<td align=middle valign=middle>
<div id=lform >
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>Loading...</p>
</div>
</td>
</tr>
<tr>
<td width="251"></td>
<td width="1"></td>
<td align=right valign=right width="800">
<img border="1" src="/+CSCOU+/asa5500.jpg" width="660" height="220" align="middle">
</td></tr>
</table>

The indented code injects the Login form and the Language Selector on the screen. The function csco_ShowLoginForm('lform') injects the logon form. csco_ShowLanguageSelector('selector') injects the Language Selector.

Procedure
Step 1

Name your file logon.inc. When you import the file, the ASA recognizes this filename as the logon screen.

Step 2

Modify the paths of images used by the file to include /+CSCOU+/.

Files that are displayed to remote users before authentication must reside in a specific area of the ASA cache memory represented by the path /+CSCOU+/. Therefore, the source for each image in the file must include this path. For example:

src=”/+CSCOU+/asa5520.gif”

Step 3

Insert the special HTML code below. This code contains the Cisco functions, described earlier, that inject the login form and language selector onto the screen. 


<body onload="csco_ShowLoginForm('lform');csco_ShowLanguageSelector('selector')">

<table>

<tr><td colspan=3 height=20 align=right><div id="selector" style="width: 300px"></div></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr>
<td height="379"></td>
<td height="379"></td>
<td align=middle valign=middle>
<div id=lform >
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>Loading...</p>
</div>
</td>
</tr>
<tr>
<td width="251"></td>
<td width="1"></td>
<td align=right valign=right width="800">
<img border="1" src="/+CSCOU+/asa5500.jpg" width="660" height="220" align="middle">
</td></tr>

</table>

Import the File and Images

Procedure
Step 1

Go to Clientless SSL VPN Access > Portal > Web Contents.

Step 2

Click Import.

  1. Select the Source option, and enter the path the Web content files.

  2. In the Destination area, choose No for Require Authentication to access its content. This ensures the files are stored in the area of flash memory accessible to users before authentication.

Step 3

Click Import Now.

Configure the Security Appliance to Use the Custom Login Screen

Procedure
Step 1

Select a customization object in the table from Clientless SSL VPN Access > Portal > Customization and click Edit.

Step 2

In the navigation pane, choose Logon Page.

Step 3

Choose Replace pre-defined logon page with a custom page.

Step 4

Click Manage to import your logon page file.

Step 5

In the Destination area, choose No to ensure your logon page is visible to users before they authenticate.

Step 6

Back in the Edit Customization Object window, click General and enable the customization object for the connection profile and/or group policies you desire.

Clientless SSL VPN End User Setup

This section is for the system administrator who sets up Clientless SSL VPN for end users. It describes how to customize the end-user interface and summarizes configuration requirements and tasks for a remote system. It specifies information to communicate to users to get them started using Clientless SSL VPN.

Define the End User Interface

The Clientless SSL VPN end user interface consists of a series of HTML panels. A user logs on to Clientless SSL VPN by entering the IP address of an ASA interface in the format https://address. The first panel that displays is the login screen.

View the Clientless SSL VPN Home Page

After the user logs in, the portal page opens.

The home page displays all of the Clientless SSL VPN features you have configured, and its appearance reflects the logo, text, and colors you have selected. This sample home page includes all available Clientless SSL VPN features with the exception of identifying specific file shares. It lets users browse the network, enter URLs, access specific websites, and use Application Access (port forwarding and smart tunnels) to access TCP applications.

View the Clientless SSL VPN Application Access Panel

To start port forwarding or smart tunnels, a user clicks the Go button in the Application Access box. The Application Access window opens and displays the TCP applications configured for this Clientless SSL VPN connection. To use an application with this panel open, the user starts the application in the normal way.


Note

A stateful failover does not retain sessions established using Application Access. Users must reconnect following a failover.

View the Floating Toolbar

The floating toolbar shown in the following figure represents the current Clientless SSL VPN session.

Figure 3. Clientless SSL VPN Floating Toolbar

Be aware of the following characteristics of the floating toolbar:

  • The toolbar lets you enter URLs, browse file locations, and choose preconfigured Web connections without interfering with the main browser window.

  • If you configure your browser to block popups, the floating toolbar cannot display.

  • If you close the toolbar, the ASA prompts you to end the Clientless SSL VPN session.

Customize Clientless SSL VPN Pages

You can change the appearance of the portal pages displayed to Clientless SSL VPN users. This includes the Login page displayed to users when they connect to the security appliance, the Home page displayed to users after the security appliance authenticates them, the Application Access window displayed when users launch an application, and the Logout page displayed when users log out of Clientless SSL VPN sessions.

After you customize the portal pages, you can save your customization and apply it to a specific connection profile, group policy, or user. The changes do not take effect until you reload the ASA, or you switch off and then enable clientless SSL.

You can create and save many customization objects, enabling the security appliance to change the appearance of portal pages for individual users or groups of users.

Information About Customization

The ASA uses customization objects to define the appearance of user screens. A customization object is compiled from an XML file which contains XML tags for all the customizable screen items displayed to remote users. The ASA software contains a customization template that you can export to a remote PC. You can edit this template and import the template back into the ASA as a new customization object.

When you export a customization object, an XML file containing XML tags is created at the URL you specify. The XML file created by the customization object named Template contains empty XML tags and provides the basis for creating new customization objects. This object cannot be changed or deleted from cache memory but can be exported, edited, and imported back into the ASA as a new customization object.

Customization Objects, Connection Profiles, and Group Policies

Initially, when a user first connects, the default customization object (named DfltCustomization) identified in the connection profile (tunnel group) determines how the logon screen appears. If the connection profile list is enabled, and the user selects a different group which has its own customization, the screen changes to reflect the customization object for that new group.

After the remote user is authenticated, the screen appearance is determined by whether a customization object has been assigned to the group policy.

Edit the Customization Template

This section shows the contents of the customization template and has convenient figures to help you quickly choose the correct XML tag and make changes that affect the screens.

You can use a text editor or an XML editor to edit the XML file. The following example shows the XML tags of the customization template. Some redundant tags have been removed for easier viewing: 


<custom>
   <localization>
      <languages>en,ja,zh,ru,ua</languages>
      <default-language>en</default-language>
   </localization>
    <auth-page>
      <window>
          <title-text l10n="yes"><![CDATA[SSL VPN Service</title-text>
      </window>
      <full-customization>
          <mode>disable</mode>
          <url></url>
      </full-customization>
      <language-selector>
        <mode>disable</mode>
        <title l10n="yes">Language:</title>
        <language>
          <code>en</code>
          <text>English</text>
        </language>
        <language>
          <code>zh</code>
          <text>(Chinese)</text>
        </language>
        <language>
          <code>ja</code>
          <text>(Japanese)</text>
        </language>
        <language>
          <code>ru</code>
          <text>(Russian)</text>
        </language>
        <language>
          <code>ua</code>
          <text>(Ukrainian)</text>
        </language>
      </language-selector>
      <logon-form>
          <title-text l10n="yes"><![CDATA[Login</title-text>
          <title-background-color><![CDATA[#666666</title-background-color>
          <title-font-color><![CDATA[#ffffff</title-font-color>
          <message-text l10n="yes"><![CDATA[Please enter your username and password.</message-text>
          <username-prompt-text l10n="yes"><![CDATA[USERNAME:</username-prompt-text>
          <password-prompt-text l10n="yes"><![CDATA[PASSWORD:</password-prompt-text>
          <internal-password-prompt-text l10n="yes">Internal Password:</internal-password-prompt-text>
          <internal-password-first>no</internal-password-first>
          <group-prompt-text l10n="yes"><![CDATA[GROUP:</group-prompt-text>
          <submit-button-text l10n="yes"><![CDATA[Login</submit-button-text>
          <title-font-color><![CDATA[#ffffff</title-font-color>
          <title-background-color><![CDATA[#666666</title-background-color>
          <font-color>#000000</font-color>
          <background-color>#ffffff</background-color>
          <border-color>#858A91</border-color>
      </logon-form>
      <logout-form>
          <title-text l10n="yes"><![CDATA[Logout</title-text>
          <message-text l10n="yes"><![CDATA[Goodbye.<br>

For your own security, please:<br>

<li>Clear the browser's cache

<li>Delete any downloaded files

<li>Close the browser's window</message-text>
          <login-button-text l10n="yes">Logon</login-button-text>
          <hide-login-button>no</hide-login-button>
          <title-background-color><![CDATA[#666666</title-background-color>
          <title-font-color><![CDATA[#ffffff</title-font-color>
          <title-font-color><![CDATA[#ffffff</title-font-color>
          <title-background-color><![CDATA[#666666</title-background-color>
          <font-color>#000000</font-color>
          <background-color>#ffffff</background-color>
          <border-color>#858A91</border-color>
      </logout-form>
      <title-panel>
         <mode>enable</mode>
         <text l10n="yes"><![CDATA[SSL VPN Service</text>
         <logo-url l10n="yes">/+CSCOU+/csco_logo.gif</logo-url>
         <gradient>yes</gradient>
         <style></style>
         <background-color><![CDATA[#ffffff</background-color>
         <font-size><![CDATA[larger</font-size>
         <font-color><![CDATA[#800000</font-color>
         <font-weight><![CDATA[bold</font-weight>
      </title-panel>
      <info-panel>
        <mode>disable</mode>
        <image-url l10n="yes">/+CSCOU+/clear.gif</image-url>
        <image-position>above</image-position>
        <text l10n="yes"></text>
      </info-panel>
      <copyright-panel>
         <mode>disable</mode>
         <text l10n="yes"></text>
      </copyright-panel>
    </auth-page>
    <portal>
      <title-panel>
         <mode>enable</mode>
         <text l10n="yes"><![CDATA[SSL VPN Service</text>
         <logo-url l10n="yes">/+CSCOU+/csco_logo.gif</logo-url>
         <gradient>yes</gradient>
         <style></style>
         <background-color><![CDATA[#ffffff</background-color>
         <font-size><![CDATA[larger</font-size>
         <font-color><![CDATA[#800000</font-color>
         <font-weight><![CDATA[bold</font-weight>
      </title-panel>
      <browse-network-title l10n="yes">Browse Entire Network</browse-network-title>
      <access-network-title l10n="yes">Start AnyConnect</access-network-title>
      <application>
         <mode>enable</mode>
         <id>home</id>
         <tab-title l10n="yes">Home</tab-title>
         <order>1</order>
      </application>
      <application>
         <mode>enable</mode>
         <id>web-access</id>
         <tab-title l10n="yes"><![CDATA[Web Applications</tab-title>
         <url-list-title l10n="yes"><![CDATA[Web Bookmarks</url-list-title>
         <order>2</order>
      </application>
      <application>
         <mode>enable</mode>
         <id>file-access</id>
         <tab-title l10n="yes"><![CDATA[Browse Networks</tab-title>
         <url-list-title l10n="yes"><![CDATA[File Folder Bookmarks</url-list-title>
         <order>3</order>
      </application>
      <application>
         <mode>enable</mode>
         <id>app-access</id>
         <tab-title l10n="yes"><![CDATA[Application Access</tab-title>
         <order>4</order>
      </application>
      <application>
         <mode>enable</mode>
         <id>net-access</id>
         <tab-title l10n="yes">AnyConnect</tab-title>
         <order>4</order>
      </application>
      <application>
         <mode>enable</mode>
         <id>help</id>
         <tab-title l10n="yes">Help</tab-title>
         <order>1000000</order>
      </application>
      <toolbar>
         <mode>enable</mode>
         <logout-prompt-text l10n="yes">Logout</logout-prompt-text>
         <prompt-box-title l10n="yes">Address</prompt-box-title>
         <browse-button-text l10n="yes">Browse</browse-button-text>
         <username-prompt-text l10n="yes"></username-prompt-text>
      </toolbar>
      <column>
         <width>100%</width>
         <order>1</order>
      </column>
      <pane>
         <type>TEXT</type>
         <mode>disable</mode>
         <title></title>
         <text></text>
         <notitle></notitle>
         <column></column>
         <row></row>
         <height></height>
      </pane>
      <pane>
         <type>IMAGE</type>
         <mode>disable</mode>
         <title></title>
         <url l10n="yes"></url>
         <notitle></notitle>
         <column></column>
         <row></row>
         <height></height>
      </pane>
      <pane>
         <type>HTML</type>
         <mode>disable</mode>
         <title></title>
         <url l10n="yes"></url>
         <notitle></notitle>
         <column></column>
         <row></row>
         <height></height>
      </pane>
      <pane>
         <type>RSS</type>
         <mode>disable</mode>
         <title></title>
         <url l10n="yes"></url>
         <notitle></notitle>
         <column></column>
         <row></row>
         <height></height>
      </pane>
      <url-lists>
         <mode>group</mode>
      </url-lists>
      <home-page>
         <mode>standard</mode>
         <url></url>
      </home-page>
    </portal>
</custom>

The following figure shows the Logon page and its customizing XML tags. All these tags are nested within the higher-level tag <auth-page>.

Figure 4. Logon Page and Associated XML Tags

The following figure shows the Language Selector drop-down list that is available on the Logon page, and the XML tags for customizing this feature. All these tags are nested within the higher-level <auth-page> tag.

Figure 5. Language Selector on Logon Screen and Associated XML Tags

The following figure shows the Information Panel that is available on the Logon page, and the XML tags for customizing this feature. This information can appear to the left or right of the login box. These tags are nested within the higher-level <auth-page> tag.

Figure 6. Information Panel on Logon Screen and Associated XML Tags

The following figure shows the Portal page and the XML tags for customizing this feature. These tags are nested within the higher-level <auth-page> tag.

Figure 7. Portal Page and Associated XML Tags

Login Screen Advanced Customization

If you prefer to use your own, custom login screen, rather than changing specific screen elements of the login screen we provide, you can perform this advanced customization using the Full Customization feature.

With Full Customization, you provide the HTML for your own login screen, and you insert Cisco HTML code that calls functions on the ASA that create the Login form and the Language Selector drop-down list.

This section describes the modifications you need to make to your HTML code and the tasks required to configure the ASA to use your code.

The following figure shows the standard Cisco login screen that displays to Clientless SSL VPN users. The Login form is displayed by a function called by the HTML code.

Figure 8. Standard Cisco Login Page

The following figure shows the Language Selector drop-down list. This feature is an option for Clientless SSL VPN users and is also called by a function in the HTML code of the login screen.

Figure 9. Language Selector Drop-down List

The following figure shows a simple example of a custom login screen enabled by the Full Customization feature.

Figure 10. Example of Full Customization of Login Screens

The following HTML code is used as an example and is the code that displays: 


<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 3</title>
<base target="_self">
</head>

<p align="center">
<img border="0" src="/+CSCOU+/cisco_logo.jpg" width="188" height="48"><font face="Snap ITC" size="6" color="#FF00FF">
</font><font face="Snap ITC" color="#FF00FF" size="7">&nbsp;</font><i><b><font color="#FF0000" size="7" face="Sylfaen"> SSL VPN Service by the Cisco ASA5500</font></b></i></p>

<body onload="csco_ShowLoginForm('lform');csco_ShowLanguageSelector('selector')">

<table>

<tr><td colspan=3 height=20 align=right><div id="selector" style="width: 300px"></div></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr>
<td height="379"></td>
<td height="379"></td>
<td align=middle valign=middle>
<div id=lform >
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>Loading...</p>
</div>
</td>
</tr>
<tr>
<td width="251"></td>
<td width="1"></td>
<td align=right valign=right width="800">
<img border="1" src="/+CSCOU+/asa5500.jpg" width="660" height="220" align="middle">
</td></tr>

</table>

The indented code injects the Login form and the Language Selector on the screen. The function csco_ShowLoginForm('lform') injects the logon form. csco_ShowLanguageSelector('selector') injects the Language Selector.

Modify Your HTML File

Procedure

Step 1

Name your file logon.inc. When you import the file, the ASA recognizes this filename as the logon screen.

Step 2

Modify the paths of images used by the file to include /+CSCOU+/.

Files that are displayed to remote users before authentication must reside in a specific area of the ASA cache memory represented by the path /+CSCOU+/. Therefore, the source for each image in the file must include this path.

For example:

src=”/+CSCOU+/asa5520.gif”

Step 3

Insert the special HTML code below. This code contains the Cisco functions, described earlier, that inject the login form and language selector onto the screen. 


<body onload="csco_ShowLoginForm('lform');csco_ShowLanguageSelector('selector')">

<table>

<tr><td colspan=3 height=20 align=right><div id="selector" style="width: 300px"></div></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr>
<td height="379"></td>
<td height="379"></td>
<td align=middle valign=middle>
<div id=lform >
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>Loading...</p>
</div>
</td>
</tr>
<tr>
<td width="251"></td>
<td width="1"></td>
<td align=right valign=right width="800">
<img border="1" src="/+CSCOU+/asa5500.jpg" width="660" height="220" align="middle">
</td></tr>

</table>

Customize the Portal Page

The following figure shows the portal page and the pre-defined components you can customize:

Figure 11. Customizable Components of the Portal Page

In addition to customizing the components of the page, you can divide the portal page into custom panes that display text, an image, an RSS feed, or HTML.

To customize the portal page, follow this procedure. You can preview your changes for each component by clicking the Preview button.

Procedure

Step 1

Choose Configuration > Remote Access VPN > Clientless SSL VPN Access > Portal > Customization.

Step 2

Click Add.

Step 3

In the Customization Object Name field, enter the name for the customization.

Step 4

In the left pane, click Portal Page.

Step 5

Enter the title in the Browser Window Title field.

Step 6

To display and customize the title panel, click Title Panel and check the Display title panel check box. Enter the text to display as the title and specify a logo. You can also specify any font styles.

Step 7

To enable and customize the toolbar, click Toolbar and check the Display toolbar check box. Customize the Prompt Box Title, Browse Button Text, Logout Prompt as desired.

Enabling the toolbar also displays the user name which was used to login. The Username field must contain Username as the valid keyword.
Step 8

To customize the applications list, click Applications and check the Show navigation panel check box. Applications enabled in the ASA configuration, including client-server plugins and port forwarding applications are displayed in a table. Enable or disable these applications in this table as required.

Step 9

To create custom panes in the portal page space, click Custom Panes. Configure the number of columns and their width. If required, create custom panes and divide the window into rows and columns for text, images, RSS feeds, or HTML pages, as desired.

Step 10

To specify a home page URL, click Home Page and check the Enable custom intranet web page check box. Choose a bookmark mode that defines how bookmarks are organized.

Step 11

Click Timeout Alerts to configure a timeout alert message and a tooltip.

Step 12

Click OK.

What to do next

Read about Configuring Custom Portal Timeout Alerts.

Configure Custom Portal Timeout Alerts

So that users of the Clientless SSL VPN feature can manage their time in the VPN session, the Clientless SSL VPN portal page displays a countdown timer showing the total time left before the clientless VPN session expires. Sessions can timeout due to inactivity or because they have reached the end of a maximum allowed connection time that you have configured.

You can create custom messages to alert users that their session is about to end because of an idle timeout or a session timeout. Your custom message replaces the default idle timeout message. The default message is, “Your session will expire in %s .” The %s place holder in your message is replaced by a ticking countdown timer.

Procedure
Step 1

Start ASDM and choose Configuration > Remote Access VPN > Clientless SSL VPN Access > Portal > Customization.

Step 2

Click Add to add a new customization object or choose an existing customization object and click Edit to add a custom idle timeout message to an existing customization object.

Step 3

In the Add / Edit Customization Object pane, expand the Portal Page node on the navigation tree and click Timeout Alerts.

Step 4

Check Enable alert visual tooltip (red background for timer countdown). This displays the countdown timer as a tool tip on a red background. When users click the Time left area, the time area expands to display your custom timeout alert message. If you leave this box unchecked, users see the custom timeout alerts in a pop-up window.

Step 5

Enter a message in the Idle Timeout Message box and in the Session Timeout Message box. An example of a message could be, Warning: Your session will end in %s. Please complete your work and prepare to close your applications.

Step 6

Click OK.

Step 7

Click Apply.

Specify a Custom Timeout Alert in a Customization Object File

If you desire, you can edit an existing customization object file outside of the ASA and import it to the ASA.

The timeout messages are configured in the <timeout-alerts> XML element of your XML customization object file. The <timeout-alerts> element is a child of the <portal> element. The <portal> element is a child of the <custom> element.

The <timeout-alerts> element is placed after the <home-page> element and before any <application> elements in the order of the <portal> child elements.

You need to specify these child-elements of <timeout-alerts>:

  • <alert-tooltip> – If set to “yes”, users see the countdown timer on a red background as a tool tip. Clicking the count down timer expands the tooltip to display your custom message. If set to “no” or if is undefined, users receive your custom messages in pop-up windows.

  • <session-timeout-message> – Enter your custom session timeout message in this element. If set and not empty, users receive your custom message instead of the default message. The %s place holder in the message will be replaced with a ticking countdown timer.

  • <idle-timeout-message> – Enter your custom idle timeout message in this element. If set and not empty, users receive your custom message instead of the default message. The %s place holder will be replaced with a ticking countdown timer.

What To Do Next

Read about Importing and Exporting Customization Objects and Creating XML-Based Portal Customization Objects and URL Lists.

Configuration Example for Timeout-alert Element and Child Elements

This example shows only the <timeout-alerts> elements of the <portal> element.

Do not cut and paste this example into an existing customization object. 


		<portal>
      <window></window>
      <title-panel></title-panel>
		    <toolbar></toolbar>
		    <url-lists></url-lists>
		    <navigation-panel></navigation-panel>
		    <home-page>
		    <timeout-alerts> 
		        <alert-tooltip>yes</alert-tooltip>
		        <idle-timeout-message>You session expires in %s due to idleness.</idle-timeout-message>
          <session-timeout-message>Your session expires in %s.</session-timeout-message> 
		    </timeout-alerts> 
		    <application></application>
		    <column></column>
		    <pane></pane>
		    <external-portal></external-portal>
		</portal>

Customize the Logout Page

The following figure shows the logout page you can customize:

Figure 12. Components of the Logout Page

To customize the logout page, follow this procedure. You can preview your changes for each component by clicking the Preview button:

Procedure

Step 1

Go to Logout Page. Customize the title or text as you desire.

Step 2

For the convenience of the user, you can display the Login button on the Logout page. To do this, check Show logon button. Customize the button text, if desired.

Step 3

Customize the title font or background, as desired.

Step 4

Click OK, then apply the changes to the customization object you edited.

Add Customization Object

Procedure

Step 1

Click Add and enter a name for the new customization object. Maximum 64 characters, no spaces.

Step 2

(Optional) Click Find to search for a customization object. Start typing in the field, and the tool searches the beginning characters of every field for a match. You can use wild cards to expand your search. For example, typing sal in the Find field matches a customization object named sales but not a customization object named wholesalers. If you type *sal in the Find field, the search finds the first instance of either sales or wholesalers in the table.

Use the up and down arrows to skip up or down to the next string match. Check the Match Case check box to make your search case sensitive.

Step 3

The onscreen keyboard enables the keyboard when clicking on the Password field of the Portal page during login. It is not enabled for the Username box. You can specify when the onscreen keyboard shows on portal pages. The choices are as follows:

  • Do not show OnScreen Keyboard

  • Show only for the login page

  • Show for all portal pages requiring authentication

Step 4

(Optional) Highlight a customization object and click Assign to assign the selected object to one or more group policies, connection profiles, or LOCAL users.

Import/Export Customization Object

You can import or export already-existing customization objects. Import an object to apply to end users. Export a customization object already resident on the ASA for editing purposes, after which you can reimport it.

Procedure

Step 1

Identify the customization object by name. Maximum 64 characters, no spaces.

Step 2

Choose the method to import or export the customization file:

  • Local computer—Choose this method to import a file that resides on the local PC.

  • Path—Provide the path to the file.

  • Browse Local Files—Browse to the path for the file.

  • Flash file system—Choose this method to export a file that resides on the ASA.

  • Path—Provide the path to the file.

  • Browse Flash—Browse to the path for the file.

  • Remote server—Choose this option to import a customization file that resides on a remote server accessible from the ASA.

  • Path—Identify the method to access the file (ftp, http, or https), and provide the path to the file.

Step 3

Click to import or export the file.

Understand the XML Customization File Structure

The following figure represents the file structure for an XML customization object.


Note

Absence of a parameter/tag results in a default/inherited value, while presence results in setting the parameter/tag value even it is an empty string.

Table 1. XML-Based Customization File Structure

Tag

Type

Values

Preset value

Description

custom

node

—

—

Root tag

  auth-page

node

—

—

Tag-container of authentication page configuration

    window

node

—

—

Browser window

       title-text

string

Arbitrary string

empty string

—

    title-panel

node

—

—

The page top pane with a logo and a text

       mode

text

enable|disable

disable

—

       text

text

Arbitrary string

empty string

—

       logo-url

text

Arbitrary URL

empty image URL

—

    copyright-panel

node

—

—

The page bottom pane with a copyright information

       mode

text

enable|disable

disable

—

       text

text

Arbitrary URL

empty string

—

    info-panel

node

—

—

The pane with a custom text and image

       mode

string

enable|disable

disable

—

image-position

string

above|below

above

The image position, relative to text

       image-url

string

Arbitrary URL

empty image

—

       text

string

Arbitrary string

empty string

—

    logon-form

node

—

—

The form with username, password, group prompt

       title-text

string

Arbitrary string

Logon

—

       message-text

string

Arbitrary string

empty string

—

       username-prompt-text

string

Arbitrary string

Username

—

       password-prompt-text

string

Arbitrary string

Password

—

       internal-password-prompt-text

string

Arbitrary string

Internal Password

—

       group-prompt-text

string

Arbitrary string

Group

—

       submit-button-text

string

Arbitrary string

Logon

    logout-form

node

—

—

The form with a logout message and the buttons to login or close the window

       title-text

string

Arbitrary string

Logout

—

       message-text

string

Arbitrary string

Empty string

—

       login-button-text

string

Arbitrary string

Login

       close-button-text

string

Arbitrary string

Close window

—

    language-selector

node

—

—

The drop-down list to choose a language

mode

string

enable|disable

disable

—

title

text

—

Language

The prompt text to choose language

       language

node (multiple)

—

—

—

          code

string

—

—

—

          text

string

—

—

—

  portal

node

—

—

Tag-container of the portal page configuration

    window

node

—

—

see authentication page description

       title-text

string

Arbitrary string

Empty string

—

    title-panel

node

—

—

see authentication page description

       mode

string

enable|disable

Disable

—

       text

string

Arbitrary string

Empty string

—

       logo-url

string

Arbitrary URL

Empty image URL

—

    navigation-panel

node

—

—

The pane on the left with application tabs

       mode

string

enable|disable

enable

—

    application

node (multiple)

—

N/A

The node changes defaults for the configured (by id) application

       id

string

For stock application

web-access

file-access

app-access

net-access

help

For ins:

Unique plug-in

N/A

—

       tab-title

string

—

N/A

—

       order

number

—

N/A

Value used to sort elements. The default element order values have step 1000, 2000, 3000, etc. For example, to insert an element between the first and second element, use a value 1001 – 1999.

       url-list-title

string

—

N/A

If the application has bookmarks, the title for the panel with grouped bookmarks

       mode

string

enable|disable

N/A

v

     toolbar

node

—

—

—

       mode

string

enable|disable

Enable

—

prompt-box-title

string

Arbitrary string

Address

Title for URL prompt list

browse-button-text

string

Arbitrary string

Browse

Browse button text

logout-prompt-text

string

Arbitrary string

Logout

—

     column

node (multiple)

—

—

One column will be shown by default

       width

string

—

N/A

—

       order

number

—

N/A

Value used to sort elements.

     url-lists

node

—

—

URL lists are considered to be default elements on the portal home page, if they are not explicitly switched off

       mode

string

group | nogroup

group

Modes:

group – elements grouped by application type i.e. Web Bookmarks, File Bookmarks)

no-group – url-lists are shown in separate panes

disable – do not show URL lists by default

     panel

node

(multiple)

—

—

Allows to configure extra panes

       mode

string

enable|disable

—

Used to temporarily switch off the panel without removing its configuration

       title

string

—

—

—

       type

string

—

—

Supported types:

RSS

IMAGE

TEXT

HTML

       url

string

—

—

URL for RSS,IMAGE or  HTML type paned

       url-mode

string

—

—

Modes: mangle, no-mangle

       text

string

—

—

Text for TEXT type panes

       column

number

—

—

—

Configuration Example for Customization

The following example illustrates the following customization options:

  • Hides tab for the File access application

  • Changes title and order of Web Access application

  • Defines two columns on the home page

  • Adds an RSS pane

  • Adds three panes (text, image, and html) at the top of second pane 

    
<custom name="Default">
  <auth-page>

    <window>
          <title-text l10n="yes">title WebVPN Logon</title>
    </window>

    <title-panel>
         <mode>enable</mode>
         <text l10n="yes">EXAMPLE WebVPN</text>
         <logo-url>http://www.example.com/images/EXAMPLE.gif</logo-url>
    </title-panel>

    <copyright>
         <mode>enable</mode>
         <text l10n="yes">(c)Copyright, EXAMPLE Inc., 2006</text>
    </copyright>

    <info-panel>
        <mode>enable</mode>
        <image-url>/+CSCOE+/custom/EXAMPLE.jpg</image-url>
      <text l10n="yes">
            <![CDATA[
            <div>
            <b>Welcome to WebVPN !.</b>
            </div>
            
      </text>
    </info-panel>
    <logon-form>
      <form>
          <title-text l10n="yes">title WebVPN Logon</title>
          <message-text l10n="yes">message WebVPN Logon</title>
          <username-prompt-text l10n="yes">Username</username-prompt-text>
          <password-prompt-text l10n="yes">Password</password-prompt-text>
          <internal-password-prompt-text l10n="yes">Domain password</internal-password-prompt-text>
          <group-prompt-text l10n="yes">Group</group-prompt-text>
          <submit-button-text l10n="yes">Logon</submit-button-text>
      </form>
    </logon-form>
    <logout-form>
      <form>
          <title-text l10n="yes">title WebVPN Logon</title>
          <message-text l10n="yes">message WebVPN Logon</title>
          <login-button-text l10n="yes">Login</login-button-text>  
          <close-button-text l10n="yes">Logon</close-button-text>  
      </form>
    </logout-form>

    <language-slector>
      <language>
          <code l10n="yes">code1</code>
          <text l10n="yes">text1</text> 
      </language>
      <language>
          <code l10n="yes">code2</code>
          <text l10n="yes">text2</text> 
      </language>
    </language-slector>

  </auth-page>
  <portal>

    <window>
          <title-text l10n="yes">title WebVPN Logon</title>
    </window>

    <title-panel>
         <mode>enable</mode>
         <text l10n="yes">EXAMPLE WebVPN</text>
         <logo-url>http://www.example.com/logo.gif</logo-url>
    </title-panel>

    <navigation-panel>
         <mode>enable</mode>
    </navigation-panel>

    <application>
            <id>file-access</id>
            <mode>disable</mode>          
    </application>
    <application>
            <id>web-access</id>
            <tab-title>EXAMPLE Intranet</tab-title>
            <order>3001</order>
    </application>

   <column>
            <order>2</order>
            <width>40%</width>
  <column>
   <column>
            <order>1</order>
            <width>60%</width>
  <column>

  <url-lists>
    <mode>no-group</mode>
  </url-lists>

  <pane>
   <id>rss_pane</id>   
    <type>RSS</type>
   <url>rss.example.com?id=78</url>
  </pane>
  <pane>
    <type>IMAGE</type>
   <url>http://www.example.com/logo.gif</url>
    <column>1</column>
    <row>2</row>
   </pane>

  <pane>
    <type>HTML</type>
   <title>EXAMPLE news</title>
   <url>http://www.example.com/news.html</url>
    <column>1</column>
    <row>3</row>
   </pane>

  </portal>

</custom>

Use the Customization Template

A customization template, named Template, contains all currently employed tags with corresponding comments that describe how to use them. Use the export command to download the customization template from the ASA, as follows: 


hostname# export webvpn customization Template tftp://webserver/default.xml
hostname#

You cannot change or delete the file Template. When you export it, as in this example, you are saving it to a new name, default.xml. After you make your changes to this file to create a customization object that meets the needs of your organization, import it to the ASA, either as default.xml or another name of your choosing. For example: 


hostname# import webvpn customization General tftp://webserver/custom.xml
hostname#

where you import an XML object called custom.xml, and name it General on the ASA.

The Customization Template

The customization template, named Template, follows: 


<?xml version="1.0" encoding="UTF-8" ?>
- <!--

Copyright (c) 2008,2009 by Cisco Systems, Inc.
All rights reserved.

Note: all white spaces in tag values are significant and preserved.


Tag: custom
Description: Root customization tag

Tag: custom/languages
Description: Contains list of languages, recognized by ASA
Value: string containing comma-separated language codes. Each language code is
       a set dash-separated alphanumeric characters, started with
       alpha-character (for example: en, en-us, irokese8-language-us)
Default value: en-us
Tag: custom/default-language
Description: Language code that is selected when the client and the server
             were not able to negotiate the language automatically.
             For example the set of languages configured in the browser
             is "en,ja", and the list of languages, specified by
             'custom/languages' tag is "cn,fr", the default-language will be
             used.
Value: string, containing one of the language coded, specified in
'custom/languages' tag above.
Default value: en-us

*********************************************************

Tag: custom/auth-page
Description: Contains authentication page settings

*********************************************************
Tag: custom/auth-page/window
Description: Contains settings of the authentication page browser window

Tag: custom/auth-page/window/title-text
Description: The title of the browser window of the authentication page
Value: arbitrary string
Default value: Browser's default value

*********************************************************

Tag: custom/auth-page/title-panel
Description: Contains settings for the title panel

Tag: custom/auth-page/title-panel/mode
Description: The title panel mode
Value: enable|disable
Default value: disable
Tag: custom/auth-page/title-panel/text
Description: The title panel text.
Value: arbitrary string
Default value: empty string

Tag: custom/auth-page/title-panel/logo-url
Description: The URL of the logo image (imported via "import webvpn webcontent")
Value: URL string
Default value: empty image URL

Tag: custom/auth-page/title-panel/background-color
Description: The background color of the title panel
Value: HTML color format, for example #FFFFFF
Default value: #FFFFFF

Tag: custom/auth-page/title-panel/font-color
Description: The background color of the title panel
Value: HTML color format, for example #FFFFFF
Default value: #000000

Tag: custom/auth-page/title-panel/font-weight
Description: The font weight
Value: CSS font size value, for example bold, bolder,lighter etc.
Default value: empty string

Tag: custom/auth-page/title-panel/font-size
Description: The font size
Value: CSS font size value, for example 10pt, 8px, x-large, smaller etc.
Default value: empty string




Tag: custom/auth-page/title-panel/gradient
Description: Specifies using the background color gradient
Value: yes|no
Default value:no

Tag: custom/auth-page/title-panel/style
Description: CSS style of the title panel
Value: CSS style string
Default value: empty string

*********************************************************

Tag: custom/auth-page/copyright-panel
Description: Contains the copyright panel settings

Tag: custom/auth-page/copyright-panel/mode
Description: The copyright panel mode
Value: enable|disable
Default value: disable

Tag: custom/auth-page/copyright-panel/text
Description: The copyright panel text
Value: arbitrary string
Default value: empty string

*********************************************************
Tag: custom/auth-page/info-panel
Description: Contains information panel settings

Tag: custom/auth-page/info-panel/mode
Description: The information panel mode
Value: enable|disable
Default value: disable

Tag: custom/auth-page/info-panel/image-position
Description: Position of the image, above or below the informational panel text
Values: above|below
Default value: above

Tag: custom/auth-page/info-panel/image-url
Description: URL of the information panel image (imported via "import webvpn webcontent")
Value: URL string
Default value: empty image URL

Tag: custom/auth-page/info-panel/text
Description: Text of the information panel
Text: arbitrary string
Default value: empty string

*********************************************************

Tag: custom/auth-page/logon-form
Description: Contains logon form settings

Tag: custom/auth-page/logon-form/title-text
Description: The logon form title text
Value: arbitrary string
Default value: "Logon"

Tag: custom/auth-page/logon-form/message-text
Description: The message inside of the logon form
Value: arbitrary string
Default value: empty string

Tag: custom/auth-page/logon-form/username-prompt-text
Description: The username prompt text
Value: arbitrary string
Default value: "Username"

Tag: custom/auth-page/logon-form/password-prompt-text
Description: The password prompt text
Value: arbitrary string
Default value: "Password"

Tag: custom/auth-page/logon-form/internal-password-prompt-text
Description: The internal password prompt text
Value: arbitrary string
Default value: "Internal Password"

Tag: custom/auth-page/logon-form/group-prompt-text
Description: The group selector prompt text
Value: arbitrary string
Default value: "Group"


Tag: custom/auth-page/logon-form/submit-button-text
Description: The submit button text
Value: arbitrary string
Default value: "Logon"

Tag: custom/auth-page/logon-form/internal-password-first
Description: Sets internal password first in the order
Value: yes|no
Default value: no


Tag: custom/auth-page/logon-form/title-font-color
Description: The font color of the logon form title
Value: HTML color format, for example #FFFFFF
Default value: #000000

Tag: custom/auth-page/logon-form/title-background-color
Description: The background color of the logon form title
Value: HTML color format, for example #FFFFFF
Default value: #000000


Tag: custom/auth-page/logon-form/font-color
Description: The font color of the logon form
Value: HTML color format, for example #FFFFFF
Default value: #000000

Tag: custom/auth-page/logon-form/background-color
Description: The background color of the logon form
Value: HTML color format, for example #FFFFFF
Default value: #000000


*********************************************************

Tag: custom/auth-page/logout-form
Description: Contains the logout form settings

Tag: custom/auth-page/logout-form/title-text
Description: The logout form title text
Value: arbitrary string
Default value: "Logout"

Tag: custom/auth-page/logout-form/message-text
Description: The logout form message text
Value: arbitrary string
Default value: Goodbye.
               For your own security, please:
               Clear the browser's cache
               Delete any downloaded files
               Close the browser's window

Tag: custom/auth-page/logout-form/login-button-text
Description: The text of the button sending the user to the logon page
Value: arbitrary string
Default value: "Logon"

*********************************************************

Tag: custom/auth-page/language-selector
Description: Contains the language selector settings

Tag: custom/auth-page/language-selector/mode
Description: The language selector mode
Value: enable|disable
Default value: disable

Tag: custom/auth-page/language-selector/title
Description: The language selector title
Value: arbitrary string
Default value: empty string

Tag: custom/auth-page/language-selector/language (multiple)
Description: Contains the language settings

Tag: custom/auth-page/language-selector/language/code
Description: The code of the language
Value (required): The language code string

Tag: custom/auth-page/language-selector/language/text
Description: The text of the language in the language selector drop-down box
Value (required): arbitrary string

*********************************************************

Tag: custom/portal
Description: Contains portal page settings

*********************************************************

Tag: custom/portal/window
Description: Contains the portal page browser window settings

Tag: custom/portal/window/title-text
Description: The title of the browser window of the portal page
Value: arbitrary string
Default value: Browser's default value

*********************************************************

Tag: custom/portal/title-panel
Description: Contains settings for the title panel

Tag: custom/portal/title-panel/mode
Description: The title panel mode
Value: enable|disable
Default value: disable

Tag: custom/portal/title-panel/text
Description: The title panel text.
Value: arbitrary string
Default value: empty string

Tag: custom/portal/title-panel/logo-url
Description: The URL of the logo image (imported via "import webvpn webcontent")
Value: URL string
Default value: empty image URL

Tag: custom/portal/title-panel/background-color
Description: The background color of the title panel
Value: HTML color format, for example #FFFFFF
Default value: #FFFFFF

Tag: custom/auth-pa/title-panel/font-color
Description: The background color of the title panel
Value: HTML color format, for example #FFFFFF
Default value: #000000

Tag: custom/portal/title-panel/font-weight
Description: The font weight
Value: CSS font size value, for example bold, bolder,lighter etc.
Default value: empty string

Tag: custom/portal/title-panel/font-size
Description: The font size
Value: CSS font size value, for example 10pt, 8px, x-large, smaller etc.
Default value: empty string
Tag: custom/portal/title-panel/gradient
Description: Specifies using the background color gradient
Value: yes|no
Default value:no

Tag: custom/portal/title-panel/style
Description: CSS style for title text
Value: CSS style string
Default value: empty string

*********************************************************

Tag: custom/portal/application (multiple)
Description: Contains the application setting

Tag: custom/portal/application/mode
Description: The application mode
Value: enable|disable
Default value: enable

Tag: custom/portal/application/id
Description: The application ID. Standard application ID's are: home, web-access, file-access, app-access, network-access, help
Value: The application ID string
Default value: empty string

Tag: custom/portal/application/tab-title
Description: The application tab text in the navigation panel
Value: arbitrary string
Default value: empty string

Tag: custom/portal/application/order
Description: The order of the application's tab in the navigation panel. Applications with lesser order go first.
Value: arbitrary number
Default value: 1000

Tag: custom/portal/application/url-list-title
Description: The title of the application's URL list pane (in group mode)
Value: arbitrary string
Default value: Tab tite value concatenated with "Bookmarks"

*********************************************************

Tag: custom/portal/navigation-panel
Description: Contains the navigation panel settings

Tag: custom/portal/navigation-panel/mode
Description: The navigation panel mode
Value: enable|disable
Default value: enable

*********************************************************

Tag: custom/portal/toolbar
Description: Contains the toolbar settings

Tag: custom/portal/toolbar/mode
Description: The toolbar mode
Value: enable|disable
Default value: enable

Tag: custom/portal/toolbar/prompt-box-title
Description: The universal prompt box title
Value: arbitrary string
Default value: "Address"
Tag: custom/portal/toolbar/browse-button-text
Description: The browse button text
Value: arbitrary string
Default value: "Browse"

Tag: custom/portal/toolbar/logout-prompt-text
Description: The logout prompt text
Value: arbitrary string
Default value: "Logout"

*********************************************************

Tag: custom/portal/column (multiple)
Description: Contains settings of the home page column(s)

Tag: custom/portal/column/order
Description: The order the column from left to right. Columns with lesser order values go
first
Value: arbitrary number
Default value: 0

Tag: custom/portal/column/width
Description: The home page column width
Value: percent
Default value: default value set by browser
Note: The actual width may be increased by browser to accommodate content


*********************************************************


Tag: custom/portal/url-lists
Description: Contains settings for URL lists on the home page

Tag: custom/portal/url-lists/mode
Description: Specifies how to display URL lists on the home page:
             group URL lists by application (group) or
             show individual URL lists (nogroup).
             URL lists fill out cells of the configured columns, which are not taken
             by custom panes.
             Use the attribute value "nodisplay" to not show URL lists on the home page.

Value: group|nogroup|nodisplay
Default value: group
*********************************************************

Tag: custom/portal/pane (multiple)
Description: Contains settings of the custom pane on the home page

Tag: custom/portal/pane/mode
Description: The mode of the pane
Value: enable|disable
Default value: disable

Tag: custom/portal/pane/title
Description: The title of the pane
Value: arbitrary string
Default value: empty string

Tag: custom/portal/pane/notitle
Description: Hides pane's title bar
Value: yes|no
Default value: no

Tag: custom/portal/pane/type
Description: The type of the pane. Supported types:
             TEXT - inline arbitrary text, may contain HTML tags;
             HTML - HTML content specified by URL shown in the individual iframe;
             IMAGE - image specified by URL
             RSS - RSS feed specified by URL
Value: TEXT|HTML|IMAGE|RSS
Default value: TEXT

Tag: custom/portal/pane/url
Description: The URL for panes with type  HTML,IMAGE or RSS
Value: URL string
Default value: empty string

Tag: custom/portal/pane/text
Description: The text value for panes with type TEXT
Value: arbitrary string
Default value:empty string

Tag: custom/portal/pane/column
Description: The column where the pane located.
Value: arbitrary number
Default value: 1

Tag: custom/portal/pane/row
Description: The row where the pane is located
Value: arbitrary number
Default value: 1

Tag: custom/portal/pane/height
Description: The height of the pane
Value: number of pixels
Default value: default value set by browser


*********************************************************

Tag: custom/portal/browse-network-title
Description: The title of the browse network link
Value: arbitrary string
Default value: Browse Entire Network


Tag: custom/portal/access-network-title
Description: The title of the link to start a network access session
Value: arbitrary string
Default value: Start AnyConnect

-->
- <custom>
- <localization>
<languages>en,ja,zh,ru,ua</languages>
<default-language>en</default-language>
</localization>
- <auth-page>
- <window>
- <title-text l10n="yes">
- <![CDATA[
WebVPN Service

</title-text>
</window>
- <language-selector>
<mode>disable</mode>
<title l10n="yes">Language:</title>
- <language>
<code>en</code>
<text>English</text>
</language>
- <language>
<code>zh</code>
<text>?? (Chinese)</text>
</language>
- <language>
<code>ja</code>
<text>?? (Japanese)</text>
</language>
- <language>
<code>ru</code>
<text>??????? (Russian)</text>
</language>
- <language>
<code>ua</code>
<text>?????????? (Ukrainian)</text>
</language>
</language-selector>
- <logon-form>
- <title-text l10n="yes">
- <![CDATA[
Login

</title-text>
- <title-background-color>
- <![CDATA[
#666666

</title-background-color>
- <title-font-color>
- <![CDATA[
#ffffff

</title-font-color>
- <message-text l10n="yes">
- <![CDATA[
Please enter your username and password.

</message-text>
- <username-prompt-text l10n="yes">
- <![CDATA[
USERNAME:

</username-prompt-text>
- <password-prompt-text l10n="yes">
- <![CDATA[
PASSWORD:

</password-prompt-text>
<internal-password-prompt-text l10n="yes" />
<internal-password-first>no</internal-password-first>
- <group-prompt-text l10n="yes">
- <![CDATA[
GROUP:

</group-prompt-text>
- <submit-button-text l10n="yes">
- <![CDATA[
Login

</submit-button-text>
- <title-font-color>
- <![CDATA[
#ffffff

</title-font-color>
- <title-background-color>
- <![CDATA[
#666666

</title-background-color>
<font-color>#000000</font-color>
<background-color>#ffffff</background-color>
</logon-form>
- <logout-form>
- <title-text l10n="yes">
- <![CDATA[
Logout

</title-text>
- <message-text l10n="yes">
- <![CDATA[
Goodbye.

</message-text>
</logout-form>
- <title-panel>
<mode>enable</mode>
- <text l10n="yes">
- <![CDATA[
WebVPN Service

</text>
<logo-url l10n="yes">/+CSCOU+/csco_logo.gif</logo-url>
<gradient>yes</gradient>
<style />
- <background-color>
- <![CDATA[
#ffffff

</background-color>
- <font-size>
- <![CDATA[
larger

</font-size>
- <font-color>
- <![CDATA[
#800000

</font-color>
- <font-weight>
- <![CDATA[
bold

</font-weight>
</title-panel>
- <info-panel>
<mode>disable</mode>
<image-url l10n="yes">/+CSCOU+/clear.gif</image-url>
<image-position>above</image-position>
<text l10n="yes" />
</info-panel>
- <copyright-panel>
<mode>disable</mode>
<text l10n="yes" />
</copyright-panel>
</auth-page>
- <portal>
- <title-panel>
<mode>enable</mode>
- <text l10n="yes">
- <![CDATA[
WebVPN Service

</text>
<logo-url l10n="yes">/+CSCOU+/csco_logo.gif</logo-url>
<gradient>yes</gradient>
<style />
- <background-color>
- <![CDATA[
#ffffff

</background-color>
- <font-size>
- <![CDATA[
larger

</font-size>
- <font-color>
- <![CDATA[
#800000

</font-color>
- <font-weight>
- <![CDATA[
bold

</font-weight>
</title-panel>
<browse-network-title l10n="yes">Browse Entire Network</browse-network-title>
<access-network-title l10n="yes">Start AnyConnect</access-network-title>
- <application>
<mode>enable</mode>
<id>home</id>
<tab-title l10n="yes">Home</tab-title>
<order>1</order>
</application>
- <application>
<mode>enable</mode>
<id>web-access</id>
- <tab-title l10n="yes">
- <![CDATA[
Web Applications

</tab-title>
- <url-list-title l10n="yes">
- <![CDATA[
Web Bookmarks

</url-list-title>
<order>2</order>
</application>
- <application>
<mode>enable</mode>
<id>file-access</id>
- <tab-title l10n="yes">
- <![CDATA[
Browse Networks

</tab-title>
- <url-list-title l10n="yes">
- <![CDATA[
File Folder Bookmarks

</url-list-title>
<order>3</order>
</application>
- <application>
<mode>enable</mode>
<id>app-access</id>
- <tab-title l10n="yes">
- <![CDATA[
Application Access

</tab-title>
<order>4</order>
</application>
- <application>
<mode>enable</mode>
<id>net-access</id>
<tab-title l10n="yes">AnyConnect</tab-title>
<order>4</order>
</application>
- <application>
<mode>enable</mode>
<id>help</id>
<tab-title l10n="yes">Help</tab-title>
<order>1000000</order>
</application>
- <toolbar>
<mode>enable</mode>
<logout-prompt-text l10n="yes">Logout</logout-prompt-text>
<prompt-box-title l10n="yes">Address</prompt-box-title>
<browse-button-text l10n="yes">Browse</browse-button-text>
</toolbar>
- <column>
<width>100%</width>
<order>1</order>
</column>
- <pane>
<type>TEXT</type>
<mode>disable</mode>
<title />
<text />
<notitle />
<column />
<row />
<height />
</pane>
- <pane>
<type>IMAGE</type>
<mode>disable</mode>
<title />
<url l10n="yes" />
<notitle />
<column />
<row />
<height />
</pane>
- <pane>
<type>HTML</type>
<mode>disable</mode>
<title />
<url l10n="yes" />
<notitle />
<column />
<row />
<height />
</pane>
- <pane>
<type>RSS</type>
<mode>disable</mode>
<title />
<url l10n="yes" />
<notitle />
<column />
<row />
<height />
</pane>
- <url-lists>
<mode>group</mode>
</url-lists>
</portal>
</custom>

Customize the Help

The ASA displays help content on the application panes during clientless sessions. Each clientless application pane displays its own help file content using a predetermined filename. For example, the help content displayed on the Application Access panel is from the file named app-access-hlp.inc. The following table shows the clientless application panels and predetermined filenames for the help content.

Table 2. Clientless Applications

Application Type

Panel

Filename

Standard

Application Access

app-access-hlp.inc

Standard

Browse Networks

file-access-hlp.inc

Standard

AnyConnect Client

net-access-hlp.inc

Standard

Web Access

web-access-hlp.inc

Plug-in

MetaFrame Access

ica-hlp.inc

Plug-in

Terminal Servers

rdp-hlp.inc

Plug-in

Telnet/SSH Servers

ssh,telnet-hlp.inc

Plug-in

VNC Connections

vnc-hlp.inc

1 This plug-in is capable of doing both sshv1 and sshv2.

You can customize the help files provided by Cisco or create help files in other languages. Then use the Import button to copy them to the flash memory of the ASA for display during subsequent clientless sessions. You can also export previously imported help content files, customize them, and reimport them to flash memory.

Procedure

Step 1

Click Import to launch the Import Application Help Content dialog, where you can import new help content to flash memory for display during clientless sessions.

Step 2

(Optional) Click Export to retrieve previously imported help content selected from the table.

Step 3

(Optional) Click Delete to delete previously imported help content selected from the table.

Step 4

The abbreviation of the language rendered by the browser is displayed. This field is not used for file translation; it indicates the language used in the file. To identify the name of a language associated with an abbreviation in the table, display the list of languages rendered by your browser. For example, a dialog window displays the languages and associated language codes when you use one of the following procedures:

  • Open Internet Explorer and choose Tools > Internet Options > Languages > Add.

  • Open Mozilla Firefox and choose Tools > Options > Advanced > General, click Choose next to Languages, and click Select a language to add.

The filename that the help content file was imported as is provided.

Customize a Help File Provided by Cisco

To customize a help file provided by Cisco, you first require a copy of the file from the flash memory card.

Procedure
Step 1

Use your browser to establish a clientless session with the ASA.

Step 2

Display the help file by appending the string in “URL of Help File in Flash Memory of the Security Appliance” in the following table, to the address of the ASA, substituting language as described below, then press Enter.

Table 3. Help Files Provided by Cisco for Clientless Applications

Application Type

Panel

URL of Help File in Flash Memory of the Security Appliance

Standard

Application Access

/+CSCOE+/help/language/app-access-hlp.inc

Standard

Browse Networks

/+CSCOE+/help/language/file-access-hlp.inc

Standard

AnyConnect Client

/+CSCOE+/help/language/net-access-hlp.inc

Standard

Web Access

/+CSCOE+/help/language/web-access-hlp.inc

Plug-in

Terminal Servers

/+CSCOE+/help/language/rdp-hlp.inc

Plug-in

Telnet/SSH Servers

/+CSCOE+/help/language/ssh,telnet-hlp.inc

Plug-in

VNC Connections

/+CSCOE+/help/language/vnc-hlp.inc

language is the abbreviation for the language rendered by the browser. It is not used for file translation; it indicates the language used in the file. For help files provided by Cisco in English, enter the abbreviation en.

The following example address displays the English version of the Terminal Servers help:

https:// address_of_security_appliance/+CSCOE+/help/en/rdp-hlp.inc

Step 3

Choose File > Save (Page) As.

Note 

Do not change the contents of the File name box.

Step 4

Change the Save as type option to Web Page, HTML only and click Save.

Step 5

Use your preferred HTML editor to customize the file.

Note 

You can use most HTML tags, but do not use tags that define the document and its structure (for example, do not use <html>, <title>, <body>, <head>, <h1>, <h2>, etc. You can use character tags, such as the <b> tag, and the <p>, <ol>, <ul>, and <li> tags to structure content.

Step 6

Save the file as HTML only, using the original filename and extension. Ensure the filename does not have an extra filename extension.

What to do next

Return to ASDM and choose Configuration > Remote Access VPN > Clientless SSL VPN Access > Portal > Help Customization > Import to import the modified help file into flash memory.

Create Help Files for Languages Not Provided by Cisco

Use standard HTML to create help files in other languages. We recommend creating a separate folder for each language to support.


Note

You can use most HTML tags, but do not use tags that define the document and its structure (for example, do not use <html>, <title>, <body>, <head>, <h1>, <h2>, etc. You can use character tags, such as the <b> tag, and the <p>, <ol>, <ul>, and <li> tags to structure content.

Save the file as HTML only. Use the filename in the Filename column.

Return to ASDM and choose Configuration > Remote Access VPN > Clientless SSL VPN Access > Portal > Help Customization > Import to import the new help file into flash memory.

Import/Export Application Help Content

Use the Import Application Help Content dialog box to import help files to flash memory for display on the portal pages during clientless sessions. Use the Export Application Help Content dialog box to retrieve previously imported help files for subsequent editing.

Procedure

Step 1

The Language field specifies the language rendered by the browser but is not used for file translation. (This field is inactive in the Export Application Help Content dialog box.) Click the dots next to the Language field and double-click the row containing the language shown in the Browse Language Code dialog box. Confirm the abbreviation in the Language Code field matches the abbreviation in the row and click OK.

Step 2

If the language required to provide help content is not present in the Browse Language Code dialog box, perform the following

  1. Display the list of languages and abbreviations rendered by your browser.

  2. Enter the abbreviation for the language in the Language Code field and click OK.

OR

You can also enter it into the Language text box to the left of the dots.

A dialog box displays the languages and associated language codes when you use one of the following procedures:

  • Open Internet Explorer and choose Tools > Internet Options > Languages > Add.

  • Open Mozilla Firefox and choose Tools > Options > Advanced > General, click Choose next to Languages, and click Select a language to add.

Step 3

If you are importing, choose the new help content file from the File Name drop-down list. If you are exporting, this field is unavailable.

Step 4

Configure the parameters for the source file (if importing) or destination file (if exporting):

  • Local computer—Indicate if the source or destination file is on a local computer:

    • Path—Identify the path of the source or destination file.

    • Browse Local Files—Click to browse the local computer for the source or destination file.

  • Flash file system—Indicate if the source or destination file is located in flash memory on the ASA:

    • Path—Identify the path of the source or destination file in flash memory.

    • Browse Flash—Click to browse the flash memory for the source or destination file.

  • Remote server—Indicate if the source or destination file is on a remote server:

    • Path—Choose the file transfer (copy) method, either ftp, tftp, or http (for importing only), and specify the path.

Customize Bookmark Help

The ASA displays help content on the application panels for each selected bookmark. You can customize those help files or create help files in other languages. You then import them to flash memory for display during subsequent sessions. You can also retrieve previously imported help content files, modify them, and reimport them to flash memory.

Each application panel displays its own help file content using a predetermined filename. The prospective location of each is in the /+CSCOE+/help/language/ URL within flash memory of the ASA. The following table shows the details about each of the help files you can maintain for VPN sessions.

Table 4. VPN Application Help Files

Application Type

Panel

URL of Help File in Flash Memory of the Security Appliance

Help File Provided By Cisco in English?

Standard

Application Access

/+CSCOE+/help/language/app-access-hlp.inc

Yes

Standard

Browse Networks

/+CSCOE+/help/language/file-access-hlp.inc

Yes

Standard

AnyConnect Client

/+CSCOE+/help/language/net-access-hlp.inc

Yes

Standard

Web Access

/+CSCOE+/help/language/web-access-hlp.inc

Yes

Plug-in

MetaFrame Access

/+CSCOE+/help/language/ica-hlp.inc

No

Plug-in

Terminal Servers

/+CSCOE+/help/language/rdp-hlp.inc

Yes

Plug-in

Telnet/SSH Servers

/+CSCOE+/help/language/ssh,telnet-hlp.inc

Yes

Plug-in

VNC Connections

/+CSCOE+/help/language/vnc-hlp.inc

Yes

language is the abbreviation of the language rendered by the browser. This field is not used for file translation; it indicates the language used in the file. To specify a particular language code, copy the language abbreviation from the list of languages rendered by your browser. For example, a dialog window displays the languages and associated language codes when you use one of the following procedures:

  • Open Internet Explorer and choose Tools > Internet Options > Languages > Add.

  • Open Mozilla Firefox and choose Tools > Options > Advanced > General, click Choose next to Languages, and click Select a language to add.

Understand Language Translation

The ASA provides language translation for the entire Clientless SSL VPN session. This includes login, logout banners, and portal pages displayed after authentication such as plugins and AnyConnect. Functional areas and their messages that are visible to remote users are organized into translation domains. The following table shows the translation domains and the functional areas translated.

Language Translation Domain Options

Translation Domain

Functional Areas Translated

AnyConnect

Messages displayed on the user interface of the Cisco AnyConnect VPN client.

banners

Message displayed when VPN access is denied for a clientless connection.

CSD

Messages for the Cisco Secure Desktop (CSD).

customization

Messages on the logon and logout pages, portal page, and all the messages customizable by the user.

plugin-ica

Messages for the Citrix plug-in.

plugin-rdp

Messages for the Remote Desktop Protocol plug-in.

plugin-rdp2

Messages for the Java Remote Desktop Protocol plug-in.

plugin-telnet,ssh

Messages for the Telnet and SSH plug-in.

plugin-vnc

Messages for the VNC plug-in.

PortForwarder

Messages displayed to Port Forwarding users.

url-list

Text that user specifies for URL bookmarks on the portal page.

webvpn

All the layer 7, AAA and portal messages that are not customizable.

The ASA includes a translation table template for each domain that is part of standard functionality. The templates for plug-ins are included with the plug-ins and define their own translation domains.

You can export the template for a translation domain, which creates an XML file of the template at the URL you provide. The message fields in this file are empty. You can edit the messages and import the template to create a new translation table object that resides in flash memory.

You can also export an existing translation table. The XML file created displays the messages you edited previously. Reimporting this XML file with the same language name creates a new version of the translation table object, overwriting previous messages.

Some templates are static, but some change based on the configuration of the ASA. Because you can customize the logon and logout pages, portal page, and URL bookmarks for clientless users, the ASA generates the customization and url-list translation domain templates dynamically, and the template automatically reflects your changes to these functional areas.

After creating translation tables, they are available to customization objects that you create and apply to group policies or user attributes. With the exception of the AnyConnect translation domain, a translation table has no affect, and messages are not translated on user screens until you create a customization object, identify a translation table to use in that object, and specify that customization for the group policy or user. Changes to the translation table for the AnyConnect domain are immediately visible to AnyConnect client users.

Edit a Translation Table

Procedure

Step 1

Navigate to Configuration > Remote Access VPN > Language Localization. When the Language Localization pane displays, click Add.

Step 2

Choose a Language Localization Template from the drop-down box. The entries in the box correspond to functional areas that are translated.

Step 3

Specify a language for the template. The template becomes a translation table in cache memory with the name you specify. Use an abbreviation that is compatible with the language options for your browser. For example, if you are creating a table for the Chinese language, and you are using IE, use the abbreviation zh, that is recognized by IE.

Step 4

Edit the translation table. For each message represented by the msgid field to translate, enter the translated text between the quotes of the associated msgstr field. The example below shows the message Connected, with the Spanish text in the msgstr field: 


msgid "Connected"
msgstr "Conectado"
Step 5

Click OK.

Add a Translation Table

You can add a new translation table, based on a template, or you can modify an already-imported translation table in this pane.

Procedure

Step 1

Select a template to modify and use as a basis for a new translation table. The templates are organized into translation domains and affect certain areas of functionality.

Step 2

Select the translation domain from the drop-down.

Step 3

Specify a language. Use an abbreviation that is compatible with the language options of your browser. The ASA creates the new translation table with this name.

Step 4

Use the editor to change the message translations. The message ID field (msgid) contains the default translation. The message string field (msgstr) that follows msgid provides the translation. To create a translation, enter the translated text between the quotes of the msgstr string. For example, to translate the message “Connected” with a Spanish translation, insert the Spanish text between the msgstr quotes: 


msgid "Connected"
msgstr "Conectado"

After making changes, click Apply to import the translation table.