SSLVPN ASA 8.0 (WebVPN): Personalización avanzada del portal

Introducción

La versión 8.0 del software de Security Appliance (ASA) 5500 Series introduce funciones de personalización avanzadas que permiten el desarrollo de portales web atractivos para usuarios sin cliente. Este documento detalla las innumerables opciones disponibles para personalizar la página de registro, o pantalla de bienvenida, y la página del portal web.

Prerequisites

Requirements

Cisco recomienda que tenga conocimiento sobre cómo utilizar Cisco Adaptive Security Device Manager (ASDM) para configurar políticas de grupo y perfiles de conexión en ASA.

Consulte estos documentos para obtener información general:

• La sección Configuración de Clientless SSL VPN de la Guía de Configuración de la Línea de Comandos de Cisco Security Appliance, Versión 8.0

• Guía del usuario de ASDM 6.0

Antes de configurar un portal web personalizado, debe completar algunos pasos básicos de configuración de ASA. Consulte la sección Requisitos de Configuración de este documento para obtener más información.

Componentes Utilizados

La información que contiene este documento se basa en las siguientes versiones de software y hardware.

• Cisco ASA versión 8.x

• Cisco ASDM versión 6.x

The information in this document was created from the devices in a specific lab environment. All of the devices used in this document started with a cleared (default) configuration. If your network is live, make sure that you understand the potential impact of any command.

Requisitos de configuración

Debe configurar el ASA como preparación para los pasos de personalización presentados en este documento.

Complete estos pasos:

1. En ASDM, elija Configuration > Remote Access VPN > Clientless SSL VPN Access > Group Policies para crear una política de grupo, Marketing por ejemplo, y marque la casilla de verificación Clientless SSL VPN en el protocolo de tunelización.

   Figura 1: Crear una nueva política de grupo (marketing)

   

2. Elija Configuration > Remote Access VPN > Clientless SSL VPN > Connection Profiles para crear un perfil de conexión, como sslclient, junto con los detalles requeridos del servidor de autenticación, por ejemplo, el servidor AAA y asignar la política de grupo Marketing.

   Figura 2: Crear un nuevo perfil de conexión (sslclient)

   

3. Para continuar con la configuración del perfil de conexión, haga clic en Advanced y configure una url de grupo para el perfil de conexión.

   Figura 3: Configuración de URL de grupo para el perfil de conexión

   

   Nota: En este ejemplo, la url de grupo se configura en tres formatos diferentes. El usuario puede ingresar cualquiera de ellos para conectarse al ASA a través del perfil de conexión sslclient.

4. Elija Configuration > Remote Access VPN > Clientless SSL VPN Access > Portal > Customization, y agregue estos dos objetos de personalización:

   • Inicio_sesión_personalizado

   • Marketing_personalizado

   Figura 4: Crear una nueva personalización (Inicio_sesión_personalizado)

   

   Nota: La figura 4 muestra cómo crear el objeto Custom_Login. Repita los mismos pasos para agregar el objeto de personalización Custom_Marketing. Sin embargo, no edite estos objetos de personalización en este momento. En las secciones siguientes de este documento se tratan varias opciones de configuración.

Convenciones

Consulte Convenciones de Consejos TécnicosCisco para obtener más información sobre las convenciones del documento.

Descripción general de la personalización

En un escenario típico sin cliente, un usuario remoto ingresa el FQDN del ASA en un navegador para iniciar sesión en él. A partir de ahí, aparecerá una página de inicio de sesión o una pantalla de bienvenida. Después de una autenticación correcta, el usuario ve un portal web con todas las aplicaciones autorizadas.

En las versiones anteriores a la 8.0, el portal web admite una personalización limitada, lo que significa que todos los usuarios de ASA experimentan las mismas páginas web. Estas páginas web, con gráficos limitados, se apartan mucho de las páginas de intranet típicas.

Mejor aspecto

ASA presenta una función de personalización completa que permite la integración de la funcionalidad de inicio de sesión con las páginas web existentes. Además, se han producido mejoras significativas en la personalización del portal web. Los ejemplos de este documento le permiten personalizar las páginas ASA para que tengan un aspecto similar al de las páginas de intranet existentes, lo que proporciona una experiencia de usuario más uniforme cuando se exploran páginas ASA.

Virtualización

Las diversas opciones de personalización refuerzan la capacidad de ASA de proporcionar virtualización durante la experiencia del usuario. Por ejemplo, se puede presentar a un grupo de marketing una página de inicio de sesión y un portal web que tengan un aspecto completamente diferente al de las páginas presentadas a los grupos de ventas o ingeniería.

Páginas admitidas

ASA admite dos tipos diferentes de páginas WebVPN que se pueden personalizar.

Página de inicio de sesión

Cuando un usuario ingresa la url de grupo https://asa.cisco.com/sslclient en un navegador para conectarse al ASA, aparece esta página de inicio de sesión predeterminada:

Figura 5: Página de inicio de sesión predeterminada

Para modificar esta página de inicio de sesión, edita la personalización asociada al perfil de conexión. Los pasos necesarios para modificar esta personalización aparecen en la sección Personalizar página de inicio de sesión de este documento. Por ahora, complete estos pasos:

1. Elija Configuration > Remote Access VPN > Clientless SSL VPN Access > Connection Profiles.

2. Edite el perfil de conexión sslclient y asocie la personalización Custom_Login con este perfil de conexión.

Figura 6: Asociar la personalización (inicio de sesión personalizado) al perfil de conexión (sslclient)

Página del portal

Después de autenticar al usuario, aparece esta página predeterminada del portal web ¹:

Figura 7: Página de portal predeterminada

^{1. Esto supone que todos los complementos (VNC, ICA, SSH y RDP) están habilitados. Si los plug-ins no están habilitados, no notará sus pestañas.}

Para modificar este portal web, edita la personalización asociada a la política de grupo. Los pasos necesarios para modificar esta personalización aparecen en el Portal web personalizado de este documento. Por ahora, complete estos pasos:

1. Elija Configuration > Remote Access VPN > Clientless SSL VPN Access > Group Policies.

2. Edite la política de grupo Marketing y asocie la personalización Custom_Marketing con esta política de grupo.

Figura 8: Asociar la personalización (Custom_Marketing) con la política de grupo (Marketing)

Nota: Varios perfiles de conexión, cada uno con su propio esquema de autenticación, como RADIUS, LDAP o Certificates, se pueden asociar a una política de grupo único. Por lo tanto, tiene la opción de crear varias páginas de inicio de sesión, por ejemplo, una personalización de inicio de sesión para cada perfil de conexión, y todas ellas se pueden asociar a la misma personalización del portal web asociada a la política del grupo de marketing.

Personalizar portal web

Este es un ejemplo de portal web personalizado:

Figura 9: Página de portal web personalizado

Observe que la página tiene un título con un esquema de color de degradado, un logotipo para marketing, algunos marcadores web con miniaturas, una fuente RSS y una página de intranet personalizada. La página de intranet personalizada permite al usuario final navegar por su página de intranet y utilizar simultáneamente las otras fichas del portal web.

Nota: Todavía necesita conservar la presentación de la página web con los marcos superior e izquierdo, lo que significa que, en sentido estricto, esta página no es totalmente personalizable. Puede cambiar muchos componentes pequeños para obtener el aspecto más cercano posible a los portales de la intranet.

Esta sección trata sobre cómo configurar cada componente individual en el portal web con el editor de personalización en ASDM.

Panel de título

Figura 10: Panel de título

Para configurar el panel de título, estas opciones de personalización están habilitadas:

Figura 11: Editor de personalización: Configuración del panel de título

URL del logotipo

Para personalizar el logotipo en el panel de título, cargue la imagen del logotipo en ASA.

Figura 12: Cargar el archivo de logotipo Marketing.gif como contenido web en ASA

1. Elija Clientless SSL VPN Access > Portal > Contenido Web, haga clic en Importar y proporcione la ruta al archivo de logotipo en su equipo local. Cargue como contenido web en el directorio /+CSCOU+/.

2. Ingrese la URL del logotipo /+CSCOU+/marketing.gif, como se muestra en la Figura 12.

3. Ingrese ASA VPN Marketing como texto.

4. Haga clic en el ... para seleccionar Color de fuente y Color de fondo.

5. Habilite la opción Gradiente para crear un atractivo patrón de color gradual.

Barra de herramientas

Figura 13: Barra de herramientas personalizada

Para configurar esta dirección/barra de herramientas, edite estas opciones de personalización:

Figura 14: Editor de personalización: Configuración de la barra de herramientas

Nota: De forma predeterminada, la barra de herramientas está activada. En este ejemplo, se cambia el nombre de los campos restantes, como Título del cuadro de mensaje, Texto del botón Examinar y Mensaje de cierre de sesión, como se muestra.

Marcadores web con miniaturas

Figura 15: Marcadores personalizados con miniaturas

Para agregar miniaturas junto a los marcadores, complete estos pasos:

1. Cargue la imagen requerida en el directorio /+CSCOU+/.

   Figura 16: Cargar la imagen en miniatura para asociarla a marcadores

   

2. Asocie la imagen en miniatura a los marcadores de ASA.

   1. Elija Portal > Marcadores.

   2. Haga clic en Add (Agregar). Introduzca Aplicaciones para el nombre de la lista de marcadores.

   3. Haga clic en Add (Agregar). Introduzca el marketing de ASA para el título de marcador.

   4. Escriba http://cisco.com/go/asa como valor de URL y elija Opciones avanzadas.

   5. Haga clic en Administrar. Elija la miniatura previamente cargada /+CSCOU+/5550-1.gif y haga clic en Aceptar.

      Figura 17: Asociar miniaturas con marcadores

      

3. Asocie los marcadores con la política de grupo ASA.

   1. Elija Configuration > Remote Access VPN > Clientless SSL VPN Access > Group Policies y edite la política de marketing.

   2. Elija Portal. Desmarque Heredar junto a Lista de marcadores y seleccione Aplicaciones en el menú desplegable.

      Figura 18: Asociar marcadores con política de grupo (marketing)

      

Paneles personalizados: Fuente RSS

Figura 19: Fuente RSS personalizada

Para mostrar una fuente RSS personalizada, edite estos elementos de personalización:

Figura 20: Paneles personalizados: Configuración de fuente RSS

Nota: Fuentes RSS para Cisco Security Advisory: http://newsroom.cisco.com/data/syndication/rss2/SecurityAdvisories_20.xml.

Paneles personalizados: Página de intranet personalizada

Figura 21: Página Web de Intranet personalizada

Para configurar esta página web de intranet personalizada, edite estos elementos de personalización:

Figura 22: Editor de personalización: Configuración de paneles personalizados

Nota: URL de la página de Cisco CCO: http://cisco.com/en/US/netsol.

Nombres de pestaña de aplicaciones personalizadas

Figura 23: Nombres de pestaña de aplicaciones personalizadas

Para configurar los nombres de las fichas de aplicación, edite estos elementos de personalización:

Figura 24: Personalizar nombres de ficha de aplicaciones

Nota: Habilita selectivamente las aplicaciones y también las reorganiza con los enlaces Arriba y Abajo.

Miniaturas de aplicaciones personalizadas

Figura 25: Miniaturas de aplicaciones personalizadas

Para agregar las miniaturas favoritas junto a los nombres de la aplicación, como los iconos del ejemplo, complete estos pasos:

1. En la página del portal, haga clic con el botón derecho del ratón en la imagen de miniatura predeterminada para encontrar su nombre y ubicación.

   • Para la pestaña Inicio, la ubicación de la imagen en miniatura es /+CSCOU+/nv-home.gif.

   • Para la ficha Aplicaciones Web, la ubicación de la miniatura es /+CSCOU+/nv-web-access.gif.

2. Importe la imagen deseada como contenido web en ASA con el nombre capturado en el paso uno.

   Por ejemplo, si desea asociar disney.gif a la ficha Aplicaciones Web, importe como nv-web-access.gif.

   Figura 26: Importar miniaturas para las pestañas de aplicación

   

Páginas de ayuda personalizadas para aplicaciones

De forma predeterminada, Cisco proporciona archivos de ayuda para el uso de la aplicación. Estas páginas se pueden reemplazar por sus propias páginas HTML personalizadas. Por ejemplo, en la Figura 27, puede agregar una imagen personalizada a la página de ayuda.

Figura 27: Página de ayuda personalizada

Para personalizar los archivos de ayuda, complete estos pasos:

1. Elija Portal > Help Customization y haga clic en Import.

2. Seleccione el idioma.

3. Seleccione el archivo .inc. Por ejemplo, si desea editar la página de ayuda que corresponde a la ficha de acceso Aplicación Web, seleccione el archivo web-access-hlp.inc.

4. Elija su archivo HTML personalizado.

   Figura 28: Importar archivos de ayuda personalizados para el acceso a la aplicación

   

Probar la personalización

En este momento, inicie sesión en ASA en https://asa.cisco.com/sslclient. Después de la autenticación correcta, aparece el portal web personalizado.

Personalizar página de inicio de sesión

Esta es la página de inicio de sesión predeterminada:

Figura 29: Página de inicio de sesión predeterminada

Esta es una página de inicio de sesión totalmente personalizada:

Figura 30: Página de inicio de sesión totalmente personalizada

La nueva página de inicio de sesión incluye un logotipo, un título y una imagen personalizados junto con el cuadro de diálogo de inicio de sesión/contraseña. La página de inicio de sesión es totalmente personalizable, lo que significa que puede generar cualquier página HTML e insertar el cuadro de diálogo login/password en la ubicación deseada.

Nota: Mientras que toda la página de inicio de sesión se puede personalizar, el cuadro de diálogo de inicio de sesión/contraseña específico que ASA carga al usuario final no se puede personalizar completamente.

Con una personalización completa, puede proporcionar HTML para su propia pantalla de inicio de sesión y, a continuación, insertar código HTML de Cisco que llama a las funciones del dispositivo de seguridad que crean el formulario de inicio de sesión y la lista desplegable Selector de idioma.

En las secciones siguientes de este documento se describen las modificaciones necesarias en el código HTML y las tareas necesarias para configurar el dispositivo de seguridad para utilizar el nuevo código.

Comience con su propio archivo HTML

Este HTML se obtuvo del editor de Microsoft FrontPage. Incluye el título, el logotipo personalizado, una imagen y un pie de página.

Nota: Las imágenes 5550.gif y asa.gif se guardan en el directorio login_files. Los espacios en blanco son intencionales y se reemplazan por el cuadro de diálogo login/password en pasos posteriores.

En este punto, la página se parece a la Figura 31. Observe cómo incluye espacio en blanco para permitir la inserción del cuadro de diálogo en pasos futuros.

Figura 31: Página web inicial

Modificar los vínculos a la ubicación de la imagen

Para todas las imágenes, reemplace la trayectoria con la palabra clave /+CSCOU+/, que es un directorio interno en ASA. Cuando carga una imagen en ASA, la imagen se guarda en el directorio interno /+CSCOU+/ en el sistema de archivos ASA. Más tarde, cuando ASA carga este HTML modificado, carga los archivos de imagen correctamente.

Figura 32: Código HTML modificado

Nota: En el primer enlace, login_files/5550.gif se sustituye por /+CSCOU+/5550.gif.

Cambiar el nombre del archivo HTML

El siguiente paso es cambiar el nombre de este archivo login.html a login.inc.

La extensión .inc es necesaria para que ASA reconozca esto como un tipo especial de archivo e incluya la secuencia de comandos java necesaria para soportar el cuadro de diálogo login/password.

Agregar código al archivo login.inc

Este código HTML debe agregarse en la ubicación en la que desea mostrar el cuadro de diálogo login/password.

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

<table> <tr><td colspan=3 height=20 align=right>

<div id="selector" style="width: 300px"></div> </td></tr>

<tr> <td align=middle valign=middle>


     
     

      
      

Loading...

</div> </td> </tr> </table>
     
     

Nota: Las dos primeras funciones csco_ShowLoginForm(lform) y csco_ShowLanguageSelector(selector) son dos funciones de script java cuya definición importa ASA cuando representa el archivo .inc. En este código, simplemente invoca la función para mostrar el cuadro de diálogo login/password junto con el selector de idioma.

Nota: El cuadro de diálogo se representa como un elemento de tabla. Esto se puede envolver en otras imágenes o texto o alinear como se ajuste a la página HTML.

En este escenario, el cuadro de diálogo login/password aparece sobre la imagen asa.gif en el centro. Al insertar el código, la página HTML final se muestra de la siguiente manera:

Cargue el login.inc y los archivos de imagen como contenido web en ASA

El siguiente paso es cargar el archivo login.inc final y los archivos de imagen como contenido web en ASA. Debe asegurarse de seleccionar la opción inferior para guardar los archivos en el directorio /+CSCOU+/.

Figura 33: Importar archivos de imagen como contenido web a ASA

Seleccione login.inc para que sea el archivo de personalización completa

Por último, en el editor de personalización, seleccione la pestaña Personalización completa y proporcione un enlace al archivo login.inc que cargó. Cuando el usuario final se conecta desde un perfil de conexión asociado a esta personalización, como sslclient, el usuario ve la página de inicio de sesión totalmente personalizada.

Figura 34: Asocie login.inc para que sea el archivo de personalización completa

Probar la personalización completa

Cuando se conecta a ASA a través de https://asa.cisco.com/sslclient, aparece la página de inicio de sesión totalmente personalizada.

Figura 35: Página de inicio de sesión completamente personalizada final

Soporte CLI

Como se explica, todas las personalizaciones se editan con el ASDM. Sin embargo, todavía puede utilizar estos comandos CLI para eliminar las personalizaciones y otro contenido WebVPN:

revert webvpn:

all                Revert all webvpn related data
  customization      Revert customization file
  plug-in            Revert plug-in options
  translation-table  Revert translation table
  url-list           Revert a list of URLs for use with WebVPN
  webcontent         Revert webcontent

Por ejemplo:

• Para eliminar una personalización, ejecute el comando CLI revert webvpn customization Custom_Marketing.

• Para eliminar el archivo de logotipo, ejecute el comando revert webvpn webcontent /+CSCOU+/marketing.gif.

• Para eliminar los marcadores, ejecute el comando revert webvpn url-list Marketing_URL_List.

• Para eliminar todas las personalizaciones, contenidos web, complementos y marcadores, ejecute el comando revert webvpn all.

Nota: Dado que las personalizaciones de WebVPN no se guardan en la configuración en ejecución, una eliminación de escritura típica recarga no borra las personalizaciones ni los contenidos web del ASA. Debe ejecutar explícitamente los comandos revert webvpn o eliminar manualmente las personalizaciones del ASDM.

Copia de seguridad de las personalizaciones

A diferencia de los otros comandos CLI, las personalizaciones no se guardan en la configuración en ejecución. En su lugar, debe exportar explícitamente las personalizaciones y se guardan en formato XML al equipo host.

Figura 36: Exportar personalización para realizar copias de seguridad o replicar en otro ASA

Para restaurar las personalizaciones, importar con el archivo XML obtenido en el paso anterior.

Figura 37: Importar una personalización desde un archivo XML exportado anteriormente

Nota: Además de exportar/importar la personalización, también debe realizar copias de seguridad/restaurar manualmente el contenido web, que incluye explícitamente los archivos de imagen, los archivos de ayuda y las imágenes en miniatura. De lo contrario, la personalización no funciona completamente.

Conclusión

Las funciones avanzadas de personalización introducidas en la versión 8.0 de ASA permiten el desarrollo de atractivas páginas de portales web. Puede lograr la virtualización creando diferentes portales web personalizados para diferentes grupos. Además, la página de inicio de sesión se puede personalizar completamente para que coincida con los portales web habituales de la intranet, lo que proporciona una experiencia de usuario uniforme.

Troubleshoot

Puede recibir este mensaje de error después de habilitar la personalización de WebVPN:

%ERROR: csco_config.lua:36: csco_config.lua:552: copying
'disk0:/csco_config/locale/ja/LC_MESSAGES/PortForwarder.po' to a temporary ramfs file
failed

%ERROR: csco_config.lua:36: csco_config.lua:552: copying
'disk0:/csco_config/locale/ja/LC_MESSAGES/webvpn.po' to a temporary ramfs file failed

%ERROR: csco_config.lua:36: csco_config.lua:552: copying
'disk0:/csco_config/locale/fr/LC_MESSAGES/customization.po' to a temporary ramfs file
failed.

Para resolver este problema, ejecute el comando revert webvpn all y recargue ASA.

Información Relacionada

• Página de Soporte de Cisco 5500 Series Adaptive Security Appliance
• Personalización de páginas SSL VPN sin cliente
• ASA 8.0: Cómo cambiar el logotipo de WebVPN
• Soporte Técnico y Documentación - Cisco Systems