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.
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.
Export a Customization Template
When you export a customization object, an XML file is created at the URL you specify. The customization template (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.
Procedure
Step 1 |
Export a customization object and and make changes to the XML tags: export webvpn customization |
Step 2 |
Import the file as a new object: import webvpn customization Example:The following example exports the default customization object (DfltCustomization) and creates the XML file named dflt_custom.
|
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>.
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.
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.
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.
Import a Customization Object
After you edit and save the XML file, import it into the cache memory of the ASA. When you import the customization object, the ASA checks the XML code for validity. If the code is valid, the ASA stores the object in a hidden location in cache memory.
import webvpn customization
The following example shows importing the customization object General.xml from the URL 209.165.201.22/customization and naming it custom1:
hostname# import webvpn customization custom1 tftp://209.165.201.22/customization /General.xml
Accessing tftp://209.165.201.22/customization/General.xml...!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Writing file disk0:/csco_config/97/custom1...
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
329994 bytes copied in 5.350 secs (65998 bytes/sec)
Apply Customizations to Connection Profiles, Group Policies, and Users
After you create a customization, you can apply the customization to a connection profile (tunnel group), a group, or a user, with the customization command. The options displayed with this command are different depending on the mode you are in.
Note |
After you customize the portal pages, the changes do not take effect until you reload the ASA, or you disable and then enable clientless SSL. |
Procedure
Step 1 |
Switch to Clientless SSL VPN configuration mode: webvpn |
Step 2 |
Switch to either tunnel-group, group-policy, or username Clientless SSL VPN configuration: tunnel-group webvpn OR group-policy webvpn OR username webvpn |
Step 3 |
Apply a customization to a connection profile with name as the name of a customization to apply to the connection profile: customization name Or apply a customization to a group or user. The following options are included:
Example:This example enters tunnel-group Clientless SSL VPN configuration mode and enables the customization cisco for the connection profile cisco_telecommutes:
This example enters group policy Clientless SSL VPN configuration mode, queries the security appliance for a list of customizations, and enables the customization cisco for the group policy cisco_sales:
This example enters username Clientless SSL VPN configuration mode and enables the customization cisco for the user cisco_employee:
|
Step 4 |
(Optional) Remove the command from the configuration and remove a customization from the connection profile: [ no] customization name |
Step 5 |
(Optional) Remove the command from the configuration and revert to the default: [no] customization {none | value name} |
Step 6 |
Show a list of existing customizations: customization ? |
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.
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.
The following figure shows a simple example of a custom login screen enabled by the Full Customization feature.
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"> </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> </p>
<p> </p>
<p> </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.
|