ASA 8.0 SSLVPN (WebVPN) : Personnalisation avancée de portails

Introduction

La version de logiciel 8.0 du serveur de sécurité adaptatif dédié de la gamme Cisco ASA 5550 présente des caractéristiques avancées de personnalisation qui activent le développement des portails de Web attrayants pour les utilisateurs sans client. Ce document détaille les nombreuses options disponibles pour personnaliser la page de connexion, ou écran de bienvenue, et la page de portail Web.

Conditions préalables

Conditions requises

Cisco recommande que vous sachiez comment utiliser Cisco Adaptive Security Device Manager (ASDM) afin de configurer les stratégies de groupe et les profils de connexion sur ASA.

Reportez-vous aux documents suivants pour obtenir des informations générales :

• La section Configuration du VPN SSL sans client du Guide de configuration de ligne de commande de l'appliance de sécurité Cisco, version 8.0

• Guide d'utilisation d'ASDM 6.0

Avant de configurer un portail Web personnalisé, vous devez effectuer certaines étapes de configuration ASA de base. Consultez la section Configuration requise de ce document pour plus d'informations.

Components Used

Les informations contenues dans ce document sont basées sur les versions de matériel et de logiciel suivantes :

• Cisco ASA version 8.x

• Cisco ASDM version 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.

Configuration requise

Vous devez configurer l'ASA en prévision des étapes de personnalisation présentées dans ce document.

Procédez comme suit :

1. Dans ASDM, choisissez Configuration > Remote Access VPN > Clientless SSL VPN Access > Group Policies afin de créer une stratégie de groupe, Marketing par exemple, et cochez la case Client SSL VPN sous le protocole de tunnellisation.

   Figure 1 : Créer une stratégie de groupe (marketing)

   

2. Choisissez Configuration > Remote Access VPN > Clientless SSL VPN > Connection Profiles afin de créer un profil de connexion, tel que sslclient, avec les détails du serveur d'authentification requis, serveur AAA par exemple, et attribuez la stratégie de groupe Marketing.

   Figure 2 : Créer un profil de connexion (sslclient)

   

3. Afin de continuer la configuration du profil de connexion, cliquez sur Avancé et configurez une url de groupe pour le profil de connexion.

   Figure 3 : Configurer les URL de groupe pour le profil de connexion

   

   Remarque : Dans cet exemple, le groupe-url est configuré dans trois formats différents. L'utilisateur peut entrer n'importe lequel d'entre eux afin de se connecter à l'ASA par le biais du profil de connexion sslclient.

4. Choisissez Configuration > Remote Access VPN > Clientless SSL VPN Access > Portal > Customization, et ajoutez ces deux objets de personnalisation :

   • Connexion_personnalisée

   • Marketing personnalisé

   Figure 4 : Créer une personnalisation (Custom_Login)

   

   Remarque : la figure 4 illustre la création de l'objet Custom_Login. Répétez les mêmes étapes afin d'ajouter l'objet de personnalisation Custom_Marketing. Cependant, ne modifiez pas ces objets de personnalisation pour le moment. Diverses options de configuration sont abordées dans les sections suivantes de ce document.

Conventions

Pour plus d'informations sur les conventions utilisées dans ce document, reportez-vous à Conventions relatives aux conseils techniques Cisco.

Présentation de la personnalisation

Dans un scénario type sans client, un utilisateur distant entre le nom de domaine complet de l'ASA dans un navigateur afin de se connecter à celui-ci. À partir de là, une page de connexion ou un écran de bienvenue s'affiche. Après une authentification réussie, l'utilisateur voit un portail Web avec toutes les applications autorisées.

Dans les versions antérieures à la version 8.0, le portail Web prend en charge une personnalisation limitée, ce qui signifie que tous les utilisateurs ASA utilisent les mêmes pages Web. Ces pages Web, avec des graphiques limités, sont très différentes des pages intranet typiques.

Meilleure apparence et impression

ASA introduit une fonctionnalité de personnalisation complète, qui permet l'intégration de la fonctionnalité de ” de connexion “ à vos pages Web existantes. En outre, la personnalisation du portail Web s'est considérablement améliorée. Les exemples de ce document vous permettent de personnaliser les pages ASA pour qu'elles ressemblent à vos pages intranet existantes, ce qui offre une expérience utilisateur plus cohérente lorsque les pages ASA sont parcourues.

Virtualisation

Les différentes options de personnalisation renforcent la capacité d'ASA à fournir la virtualisation pendant l'expérience utilisateur. Par exemple, un groupe marketing peut se voir présenter une page de connexion et un portail Web qui ont un aspect et une sensation complètement différents des pages présentées aux groupes Ventes ou Ingénierie.

Pages prises en charge

ASA prend en charge deux types différents de pages WebVPN personnalisables.

Page de connexion

Lorsqu'un utilisateur entre l'URL de groupe https://asa.cisco.com/sslclient dans un navigateur afin de se connecter à l'ASA, cette page de connexion par défaut apparaît :

Figure 5 : Page Connexion par défaut

Afin de modifier cette page de connexion, vous modifiez la personnalisation associée au profil de connexion. Les étapes requises pour modifier cette personnalisation apparaissent dans la section Personnaliser la page de connexion de ce document. Pour l'instant, procédez comme suit :

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

2. Modifiez le profil de connexion sslclient et associez la personnalisation Custom_Login à ce profil de connexion.

Figure 6 : Associer la personnalisation (Custom_Login) au profil de connexion (sslclient)

Page Portail

Une fois l'utilisateur authentifié, cette page de portail Web par défaut ¹ apparaît :

Figure 7 : Page Portail par défaut

^{1. Cela suppose que tous les plug-ins (VNC, ICA, SSH et RDP) sont activés. Si les plug-ins ne sont pas activés, vous ne remarquerez pas leurs onglets.}

Afin de modifier ce portail Web, vous modifiez la personnalisation associée à la stratégie de groupe. Les étapes requises pour modifier cette personnalisation apparaissent dans le portail Web Personnaliser de ce document. Pour l'instant, procédez comme suit :

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

2. Modifiez la stratégie de groupe Marketing et associez la personnalisation Custom_Marketing à cette stratégie de groupe.

Figure 8 : Associer la personnalisation (marketing personnalisé) à la stratégie de groupe (marketing)

Remarque : Plusieurs profils de connexion, chacun avec son propre schéma d'authentification, tel que RADIUS, LDAP ou Certificates, peuvent être associés à une stratégie de groupe unique. Par conséquent, vous avez la possibilité de créer plusieurs pages de connexion, par exemple une personnalisation de connexion pour chaque profil de connexion, et elles peuvent toutes être associées à la personnalisation du portail Web associée à la stratégie de groupe Marketing.

Personnaliser le portail Web

Voici un exemple de portail Web personnalisé :

Figure 9 : Page du portail Web personnalisé

Notez que la page a un titre avec un dégradé de couleurs, un logo pour Marketing, quelques signets Web avec des miniatures, un flux RSS et une page intranet personnalisée. La page intranet personnalisée permet à l'utilisateur final de naviguer sur sa page intranet et d'utiliser simultanément les autres onglets du portail Web.

Remarque : Vous devez conserver la disposition de la page Web avec les cadres supérieur et gauche, ce qui signifie que, strictement parlant, cette page n'est pas entièrement personnalisable. Vous pouvez changer de nombreux petits composants pour obtenir un regard aussi proche que possible de vos portails intranet.

Cette section explique comment configurer chaque composant du portail Web avec l'éditeur de personnalisation dans ASDM.

Panneau de titre

Figure 10 : Panneau de titre

Afin de configurer le panneau de titre, ces options de personnalisation sont activées :

Figure 11 : Éditeur de personnalisation : Configuration du panneau de titre

URL du logo

Afin de personnaliser le logo dans le panneau de titre, téléchargez l'image du logo sur ASA.

Figure 12 : Télécharger le fichier de logo marketing.gif en tant que contenu Web vers ASA

1. Choisissez Accès VPN SSL sans client > Portail > Contenu Web, cliquez sur Importer et indiquez le chemin d'accès au fichier de logo sur votre ordinateur local. Téléchargez-le en tant que contenu Web dans le répertoire /+CSCOU+/.

2. Entrez l'URL du logo /+CSCOU+/marketing.gif, comme illustré à la figure 12.

3. Entrez ASA VPN Marketing comme texte.

4. Cliquez sur le ... afin de choisir la Couleur de police et la Couleur d'arrière-plan.

5. Activez l'option Dégradé afin de créer un motif de couleur graduel attrayant.

Barre d'outils

Figure 13 : Barre d'outils personnalisée

Afin de configurer cette adresse/barre d'outils, modifiez les options de personnalisation suivantes :

Figure 14 : Éditeur de personnalisation : Configuration de la barre d'outils

Remarque : Par défaut, la barre d'outils est activée. Dans cet exemple, les champs restants, tels que Titre de la zone d'invite, Texte du bouton Parcourir et Invite de déconnexion, sont renommés, comme indiqué.

Signets Web avec miniatures

Figure 15 : Signets personnalisés avec miniatures

Pour ajouter des miniatures en regard des signets, procédez comme suit :

1. Téléchargez l'image requise dans le répertoire /+CSCOU+/.

   Figure 16 : Télécharger l'image miniature à associer aux signets

   

2. Associez l'image miniature aux signets ASA.

   1. Choisissez Portal > Bookmarks.

   2. Cliquez sur Add. Entrez Applications pour le nom de la liste de signets.

   3. Cliquez sur Add. Entrez ASA Marketing pour le titre du signet.

   4. Entrez http://cisco.com/go/asa comme valeur d'URL, puis sélectionnez Options avancées.

   5. Cliquez sur Gérer. Choisissez la miniature /+CSCOU+/5550-1.gif précédemment téléchargée, puis cliquez sur OK.

      Figure 17 : Associer les miniatures aux signets

      

3. Associez les signets à la stratégie de groupe ASA.

   1. Choisissez Configuration > Remote Access VPN > Clientless SSL VPN Access > Group Policies, puis modifiez la stratégie marketing.

   2. Choisissez Portal. Décochez Inherit en regard de Bookmark List, puis sélectionnez Applications dans le menu déroulant.

      Figure 18 : Associer des signets à la stratégie de groupe (marketing)

      

Volets personnalisés : Flux RSS

Figure 19 : Flux RSS personnalisé

Pour afficher un flux RSS personnalisé, modifiez les éléments de personnalisation suivants :

Figure 20 : Volets personnalisés : Configuration du flux RSS

Remarque : flux RSS pour Cisco Security Advisory : http://newsroom.cisco.com/data/syndication/rss2/SecurityAdvisories_20.xml.

Volets personnalisés : Page Intranet personnalisé

Figure 21 : Page Web Intranet personnalisé

Afin de configurer cette page Web intranet personnalisée, modifiez les éléments de personnalisation suivants :

Figure 22 : Éditeur de personnalisation : Configuration des volets personnalisés

Remarque : URL de la page Cisco CCO : http://cisco.com/en/US/netsol.

Noms de l'onglet Application personnalisée

Figure 23 : Noms de l'onglet Application personnalisée

Afin de configurer les noms des onglets d'application, modifiez ces éléments de personnalisation :

Figure 24 : Personnaliser les noms de l'onglet Application

Remarque : Vous activez sélectivement les applications et les réorganisez également à l'aide des liens Haut et Bas.

Miniatures d'application personnalisées

Figure 25 : Miniatures d'application personnalisées

Afin d'ajouter vos miniatures préférées en regard des noms d'application, telles que les icônes de l'exemple, procédez comme suit :

1. Sur la page du portail, cliquez avec le bouton droit de la souris sur l'image miniature par défaut pour trouver son nom et son emplacement.

   • Pour l'onglet Accueil, l'emplacement de la miniature est /+CSCOU+/nv-home.gif.

   • Pour l'onglet Applications Web, l'emplacement de la miniature est /+CSCOU+/nv-web-access.gif.

2. Importez l'image désirée en tant que contenu Web vers ASA avec le nom capturé à l'étape 1.

   Par exemple, si vous voulez associer le fichier disney.gif à l'onglet Applications Web, importez-le en tant que nv-web-access.gif.

   Figure 26 : Importer des miniatures pour les onglets d'application

   

Pages d'aide personnalisées pour les applications

Par défaut, Cisco fournit des fichiers d'aide pour l'utilisation des applications. Ces pages peuvent être remplacées par vos propres pages HTML personnalisées. Par exemple, dans la Figure 27, vous pouvez ajouter une image personnalisée à la page d'aide.

Figure 27 : Page d'aide personnalisée

Pour personnaliser les fichiers d'aide, procédez comme suit :

1. Choisissez Portal > Help Customization, puis cliquez sur Import.

2. Sélectionnez la langue.

3. Sélectionnez le fichier .inc. Par exemple, si vous voulez modifier la page d'aide qui correspond à l'onglet d'accès à l'application Web, sélectionnez le fichier web-access-hlp.inc.

4. Choisissez votre fichier HTML personnalisé.

   Figure 28 : Importer des fichiers d'aide personnalisés pour l'accès aux applications

   

Tester la personnalisation

À ce stade, connectez-vous à l'ASA à l'adresse https://asa.cisco.com/sslclient. Une fois l'authentification terminée, vous avez accès au portail Web personnalisé.

Personnaliser la page de connexion

Voici la page de connexion par défaut :

Figure 29 : Page Connexion par défaut

Voici une page de connexion entièrement personnalisée :

Figure 30 : Page de connexion entièrement personnalisée

La nouvelle page de connexion comprend un logo, un titre et une image personnalisés ainsi que la boîte de dialogue login/password. La page de connexion est entièrement personnalisable, ce qui signifie que vous pouvez créer n'importe quelle page HTML et insérer la boîte de dialogue de connexion/mot de passe à l'emplacement souhaité.

Remarque : Bien que la page de connexion soit entièrement personnalisable, la boîte de dialogue de connexion/mot de passe spécifique que ASA charge à l'utilisateur final n'est pas entièrement personnalisable.

Avec une personnalisation complète, vous pouvez fournir du code HTML pour votre propre écran de connexion, puis insérer du code HTML Cisco qui appelle des fonctions sur l'appliance de sécurité qui crée le formulaire de connexion et la liste déroulante Language Selector.

Les sections suivantes de ce document décrivent les modifications requises dans le code HTML et les tâches requises pour configurer le dispositif de sécurité afin qu'il utilise le nouveau code.

Commencer par votre propre fichier HTML

Ce code HTML a été obtenu à partir de l'éditeur Microsoft FrontPage. Il comprend le titre, le logo personnalisé, une image et un pied de page.

Remarque : Les images 5550.gif et asa.gif sont enregistrées dans le répertoire login_files. Les espaces vides sont intentionnels et sont remplacés par la boîte de dialogue de connexion/mot de passe dans les étapes suivantes.

À ce stade, la page ressemble à la figure 31. Notez qu'il inclut un espace vide pour permettre l'insertion de la boîte de dialogue dans les étapes futures.

Figure 31 : Page Web initiale

Modifier les liens vers l'emplacement de l'image

Pour toutes les images, remplacez le chemin par le mot clé /+CSCOU+/, qui est un répertoire interne dans ASA. Lorsque vous téléchargez une image sur ASA, elle est enregistrée dans le répertoire interne /+CSCOU+/du système de fichiers ASA. Plus tard, quand ASA charge ce code HTML modifié, il charge correctement les fichiers image.

Figure 32 : Code HTML modifié

Note : Dans le premier lien, login_files/5550.gif est remplacé par /+CSCOU+/5550.gif.

Renommer le fichier HTML

L'étape suivante consiste à renommer ce fichier login.html en login.inc.

L'extension .inc est requise pour qu'ASA reconnaisse ce type de fichier comme un type spécial et inclut le script Java nécessaire pour prendre en charge la boîte de dialogue login/password.

Ajouter du code au fichier login.inc

Ce code HTML doit être ajouté à l'emplacement où vous voulez afficher la boîte de dialogue login/mot de passe.

<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>
     
     

Remarque : Les deux premières fonctions csco_ShowLoginForm(lform) et csco_ShowLanguageSelector(selector) sont deux fonctions de script Java dont la définition est importée par ASA lorsqu'il rend le fichier .inc. Dans ce code, vous appelez simplement la fonction afin d'afficher la boîte de dialogue login/mot de passe avec le sélecteur de langue.

Remarque : la boîte de dialogue est représentée comme un élément de table. Il peut être entouré d'autres images ou de texte ou aligné comme vous le voyez pour votre page HTML.

Dans ce scénario, la boîte de dialogue login/password apparaît au-dessus de l'image asa.gif au centre. Lorsque vous insérez le code, la page HTML finale ressemble à ceci :

Télécharger le fichier login.inc et les fichiers image en tant que contenu Web vers ASA

L'étape suivante consiste à télécharger le fichier login.inc final et les fichiers image sous forme de contenu Web vers l'ASA. Vous devez vous assurer de sélectionner l'option inférieure afin d'enregistrer les fichiers dans le répertoire /+CSCOU+/.

Figure 33 : Importer les fichiers image en tant que contenu Web vers ASA

Sélectionnez login.inc comme fichier pour une personnalisation complète

Enfin, dans l'éditeur de personnalisation, sélectionnez l'onglet Personnalisation complète et fournissez un lien vers le fichier login.inc que vous avez téléchargé. Lorsque l'utilisateur final se connecte à partir d'un profil de connexion associé à cette personnalisation, tel que sslclient, l'utilisateur voit la page de connexion entièrement personnalisée.

Figure 34 : Associez le fichier login.inc au fichier de personnalisation complète

Tester la personnalisation complète

Lorsque vous vous connectez à l'ASA via https://asa.cisco.com/sslclient, la page de connexion entièrement personnalisée s'affiche.

Figure 35 : Dernière page de connexion entièrement personnalisée

Prise en charge CLI

Comme expliqué, toutes les personnalisations sont modifiées avec l'ASDM. Cependant, vous pouvez toujours utiliser ces commandes CLI afin de supprimer les personnalisations et d'autres contenus WebVPN :

rétablir 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

Exemple :

• Afin de supprimer une personnalisation, émettez la commande CLI Rétablir la personnalisation webvpn Custom_Marketing.

• Afin de supprimer le fichier de logo, émettez la commande revert webvpn webcontent /+CSCOU+/marketing.gif.

• Afin de supprimer les signets, émettez la commande revert webvpn url-list Marketing_URL_List.

• Afin de supprimer toutes les personnalisations, le contenu Web, les plug-ins et les signets, émettez la commande Rétablir tout webvpn.

Remarque : Étant donné que les personnalisations WebVPN ne sont pas enregistrées dans la configuration en cours, une effacement en écriture type, une séquence de rechargement n'efface pas les personnalisations ou le contenu Web de l'ASA. Vous devez explicitement émettre des commandes de rétablissement de webvpn ou supprimer manuellement les personnalisations de l'ASDM.

Sauvegarder les personnalisations

Contrairement aux autres commandes CLI, les personnalisations ne sont pas enregistrées dans la configuration en cours. À la place, vous devez exporter explicitement les personnalisations, qui sont enregistrées au format XML sur l'ordinateur hôte.

Figure 36 : Exporter la personnalisation vers une sauvegarde ou une réplication vers un autre ASA

Afin de restaurer les personnalisations, importez-les avec le fichier XML obtenu à l'étape précédente.

Figure 37 : Importer une personnalisation à partir d'un fichier XML précédemment exporté

Remarque : Outre l'exportation/importation de la personnalisation, vous devez également sauvegarder/restaurer manuellement le contenu Web, qui inclut explicitement les fichiers image, les fichiers d'aide et les images miniatures. Sinon, la personnalisation n'est pas entièrement fonctionnelle.

Conclusion

Les fonctionnalités avancées de personnalisation introduites dans ASA version 8.0 permettent le développement de pages de portail Web attrayantes. Vous pouvez réaliser la virtualisation en créant différents portails Web personnalisés pour différents groupes. En outre, la page de connexion peut être entièrement personnalisée pour correspondre aux portails Web intranet habituels, ce qui garantit une expérience utilisateur homogène.

Dépannage

Vous pouvez recevoir ce message d'erreur après l'activation de la personnalisation 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.

Afin de résoudre ce problème, exécutez la commande revert webvpn all et rechargez ASA.

Informations connexes

• Page de support pour appliances de sécurité adaptables de la gamme Cisco 5500
• Personnalisation des pages VPN SSL sans client
• ASA 8.0 : Comment modifier le logo de WebVPN
• Support et documentation techniques - Cisco Systems