内容

概要

前提条件

要件

使用するコンポーネント

設定要件

表記法

カスタマイズの概要

ルックアンドフィールの改善

仮想化

サポートされるページ

Web ポータルのカスタマイズ

タイトル パネル

ロゴ URL

ツールバー

サムネイルの付いた Web ブックマーク

カスタム ペイン：RSS フィード

カスタム ペイン：カスタム イントラネット ページ

カスタマイズされたアプリケーション タブ名

カスタマイズされたアプリケーション サムネイル

カスタマイズされたアプリケーション用ヘルプ ページ

カスタマイズのテスト

ログイン ページのカスタマイズ

自分の HTML ファイルから開始する

イメージの場所へのリンクを変更する

HTML ファイル名を変更する

login.inc ファイルにコードを追加する

login.inc およびイメージ ファイルを Web コンテンツとして ASA にアップロードする

login.inc をフル カスタマイゼーションのファイルとして選択する

フル カスタマイゼーションをテストする

CLI のサポート

カスタマイズのバックアップ

結論

トラブルシュート

関連情報

概要

Cisco 適応型セキュリティ アプライアンス（ASA）5500 シリーズ ソフトウェア バージョン 8.0 には、クライアントレス ユーザの魅力的な Web ポータルの開発をイネーブルにする高度なカスタマイゼーションの機能があります。このドキュメントでは、ログイン ページまたは初期画面と Web ポータル ページのカスタマイズに使用できる多くのオプションの詳細について説明します。

前提条件

要件

Cisco Adaptive Security Device Manager（ASDM）を使用して、ASA のグループ ポリシーおよび接続プロファイルを設定する方法についての知識があることを推奨します。

一般的な情報については、次のドキュメントを参照してください。

- 『Cisco セキュリティ アプライアンス コマンド ライン コンフィギュレーション ガイド、バージョン 8.0』の「クライアントレス SSL VPN の設定」セクション

- 『ASDM 6.0 User Guide』

カスタマイズされた Web ポータルを設定する前に、基本的な ASA 設定手順を実行しておく必要があります。詳細は、このドキュメントの「設定要件」セクションを参照してください。

使用するコンポーネント

このドキュメントの情報は、次のソフトウェアとハードウェアのバージョンに基づいています。

- Cisco ASA バージョン 8.x

- Cisco ASDM バージョン 6.x

このドキュメントの情報は、特定のラボ環境にあるデバイスに基づいて作成されました。このドキュメントで使用するすべてのデバイスは、初期（デフォルト）設定の状態から起動しています。対象のネットワークが実稼働中である場合には、どのようなコマンドについても、その潜在的な影響について確実に理解しておく必要があります。

設定要件

このドキュメントに記載するカスタマイズ手順の準備として、ASA を設定する必要があります。

次のステップを実行します。

1. ASDM で、[Configuration] > [Remote Access VPN] > [Clientless SSL VPN Access] > [Group Policies] を選択してグループ ポリシー（Marketing など）を作成し、トンネリング プロトコルの下にある [Clientless SSL VPN] チェックボックスにチェックマークを入れます。

図 1：新規グループ ポリシーの作成（Marketing）

2. [Configuration] > [Remote Access VPN] > [Clientless SSL VPN] > [Connection Profiles] を選択して、接続プロファイル（sslclient など）を作成し、必要な認証サーバの詳細情報（AAA サーバなど）を指定し、Marketing グループ ポリシーを割り当てます。

図 2：新規接続プロファイル（sslclient）の作成

3. 接続プロファイルの設定を続行するために [Advanced] をクリックし、接続プロファイル用のグループ URL を設定します。

図 3：接続プロファイル用のグループ URL の設定

注：この例では、group-urlは3つの異なる形式で設定されています。ユーザは sslclient 接続プロファイルを使用して ASA に接続する際、これらのいずれかを入力することができます。

4. [Configuration] > [Remote Access VPN] > [Clientless SSL VPN Access] > [Portal] > [Customization] を選択して、次の 2 つのカスタマイズ オブジェクトを追加します。

- Custom_Login

- Custom_Marketing

図 4：新規カスタマイズの作成（Custom_Login）

注：  図 4 は Custom_Login オブジェクトを作成する方法を示しています。Custom_Marketing カスタマイズ オブジェクトを追加するには同じ手順を繰り返してください。ただし、この時点ではこれらのカスタマイズ オブジェクトを編集しないでください。このドキュメントの後続のセクションで、さまざまな設定オプションについて説明します。

表記法

ドキュメント表記の詳細は、『シスコ テクニカル ティップスの表記法』を参照してください。

カスタマイズの概要

典型的なクライアントレス シナリオでは、リモート ユーザは ASA の FQDN をブラウザに入力してログオンします。ここでログイン ページまたはウェルカム画面が表示されます。認証に成功すると、許可されたすべてのアプリケーションを含む Web ポータルがユーザに表示されます。

8.0 以前のバージョンでは、Web ポータルでサポートされるカスタマイズが限定されており、すべての ASA ユーザに対して同じ Web ページが表示されていました。これらの Web ページはグラフィックが制限され、通常のイントラネット ページとはかなりかけ離れたものでした。

ルックアンドフィールの改善

ASA ではフル カスタマイズ機能が導入され、これによりログイン機能と既存の Web ページの統合が可能になります。また、Web ポータルのカスタマイズが著しく改善されました。このドキュメントの例により、既存のイントラネット ページと似たルックアンドフィールになるように ASA ページをカスタマイズでき、ASA ページをブラウズするときに一貫性のあるユーザ エクスペリエンスが実現されます。

仮想化

さまざまなカスタマイズ オプションによって、ASA がユーザ エクスペリエンスとして仮想化を提供するための機能が強化されています。たとえば、Marketing グループに対して表示されるログイン ページおよび Web ポータルのルックアンドフィールを、Sales または Engineering グループに対して表示されるページとまったく違ったものにすることができます。

サポートされるページ

ASA では 2 種類の WebVPN ページをカスタマイズ可能ページとしてサポートします。

ログイン ページ

ユーザがグループ URL https://asa.cisco.com/sslclient をブラウザに入力して ASA に接続すると、このデフォルト ログイン ページが表示されます。

図 5：デフォルト ログイン ページ

このログイン ページを変更するには、接続プロファイルに関連付けられているカスタマイズを編集します。このカスタマイズの変更に必要な手順は、このドキュメントの「ログイン ページのカスタマイズ」にあります。ここでは、次の手順を実行します。

1. [Configuration] > [Remote Access VPN] > [Clientless SSL VPN Access] > [Connection Profiles] を選択します。

2. 接続プロファイル sslclient を編集し、カスタマイズ Custom_Login にこの接続プロファイルを関連付けます。

図 6：カスタマイズ（Custom_Login）と接続プロファイル（sslclient）との関連付け

ポータル ページ

ユーザが認証されると、次のデフォルト1 Web ポータル ページが表示されます。

図 7：デフォルト ポータル ページ

1. すべてのプラグイン（VNC、ICA、SSH、および RDP）が有効であると仮定しています。プラグインが有効でない場合、プラグインのタブが表示されません。

この Web ポータルを変更するには、グループ ポリシーに関連付けられているカスタマイズを編集します。このカスタマイズの変更に必要な手順は、このドキュメントの「Web ポータルのカスタマイズ」にあります。ここでは、次の手順を実行します。

1. [Configuration] > [Remote Access VPN] > [Clientless SSL VPN Access] > [Group Policies] を選択します。

2. Marketing グループ ポリシーを編集し、Custom_Marketing カスタマイズをこのグループ ポリシーに関連付けます。

図 8：グループ ポリシー（Marketing）へのカスタマイズ（Custom_Marketing）の関連付け

注：RADIUS、LDAP、証明書などの独自の認証スキームを持つ複数の接続プロファイルは、1つのグループポリシーに関連付けることができます。したがって、たとえば接続プロファイルごとに 1 つのログイン カスタマイズというふうに複数のログイン ページを作成しておき、Marketing グループ ポリシーに関連付けられた同一の Web ポータル カスタマイズにこれらすべてのページを関連付けることができます。

Web ポータルのカスタマイズ

次に、カスタマイズされた Web ポータルの例を示します。

図 9：カスタマイズされた Web ポータル ページ

ページには、なだらかに変化する配色設計を持つタイトル、Marketing のロゴ、サムネイル付きの Web ブックマーク、RSS フィード、カスタム イントラネット ページがあります。カスタム イントラネット ページにより、エンドユーザはイントラネット ページをナビゲートしながら、Web ポータルの他のタブを同時に使用できます。

注：Webページのレイアウトは、上フレームと左フレームで維持する必要があります。つまり、厳密に言えば、このページは完全にカスタマイズできません。多くの小さいコンポーネントを変更することによって、ご使用のイントラネット ポータルの外観にできるだけ近づけることができます。

このセクションでは、ASDM のカスタマイズ エディタを使用して、Web ポータルの個々のコンポーネントを設定する方法について扱います。

タイトル パネル

図 10：タイトル パネル

タイトル パネルを設定するには、次のカスタマイズ オプションを有効にする必要があります。

図 11：カスタマイゼーション エディタ：タイトル パネルの設定

ロゴ URL

タイトル パネルのロゴをカスタマイズするには、ロゴのイメージを ASA にアップロードします。

図 12：ロゴ ファイル marketing.gif を Webcontent として ASA にアップロード

1. [Clientless SSL VPN Access] > [Portal] > [Web Contents] を選択して [Import] をクリックし、ローカル コンピュータのロゴ ファイルへのパスを指定します。これを Web コンテンツとして /+CSCOU+/ ディレクトリにアップロードします。

2. 図 12 に示すように、ロゴ URL /+CSCOU+/marketing.gif を入力します。

3. ASA VPN Marketing というテキストを入力します。

4. フォントの色と背景の色を選択するには、[...]ボタンをクリックします。

5. Gradient オプションを有効にして、なだらかに変化する美しい色パターンを作成します。

ツールバー

図 13：カスタマイズされたツールバー

このアドレス バーあるいはツールバーを設定するには、次のカスタマイズ オプションを編集します。

図 14：カスタマイゼーション エディタ：ツールバー設定

注：デフォルトでは、ツールバーは有効になっています。この例で、[Prompt Box Title]、[Browse button text]、[Logout Prompt] などのフィールドは、図に示すように名前が変更されています。

サムネイルの付いた Web ブックマーク

図 15：サムネイルの付いたカスタマイズ済みブックマーク

ブックマークの横にサムネイルを追加するには、次の手順を実行します。

1. 必要なイメージを /+CSCOU+/ ディレクトリにアップロードします。

図 16：ブックマークに関連付けるサムネイル イメージのアップロード

2. サムネイル イメージを ASA ブックマークに関連付けます。

1. [Portal] > [Bookmarks] をクリックします。

2. [Add] をクリックします。[Bookmark List Name] に Applications と入力します。

3. [Add] をクリックします。[Bookmark Title] に ASA Marketing と入力します。

4. URL 値として http://cisco.com/go/asa と入力し、[Advanced Options] を選択します。

5. [Manage] をクリックします。以前アップロードされた [/+CSCOU+/5550-1.gif] サムネイルを選択し、[OK] をクリックします。

図 17：サムネイルとブックマークとの関連付け

3. ブックマークを ASA グループ ポリシーに関連付けます。

1. [Configuration] > [Remote Access VPN] > [Clientless SSL VPN Access] > [Group Policies] を選択し、Marketing ポリシーを編集します。

2. [Portal] を選択します。[Bookmark List] の横にある Inherit のチェックマークを外し、ドロップダウン メニューから [Applications] を選択します。

図 18：グループ ポリシー（Marketing）へのブックマークの関連付け

カスタム ペイン：RSS フィード

図 19：カスタマイズされた RSS フィード

カスタム RSS フィードを表示するには、次のカスタマイズ要素を編集します。

図 20：カスタム ペイン：RSS フィード設定

注：シスコセキュリティアドバイザリのRSSフィード：http://newsroom.cisco.com/data/syndication/rss2/SecurityAdvisories_20.xml.

カスタム ペイン：カスタム イントラネット ページ

図 21：カスタマイズされたイントラネット Web ページ

このカスタム イントラネット Web ページを表示するには、次のカスタマイズ要素を編集します。

図 22：カスタマイゼーション エディタ：カスタム ペイン設定

注：Cisco CCOのURLページ：http://cisco.com/en/US/netsol

カスタマイズされたアプリケーション タブ名

図 23：カスタマイズされたアプリケーション タブ名

アプリケーション タブ名を設定するには、次のカスタマイズ要素を編集します。

図 24：アプリケーション タブ名のカスタマイズ

注：アプリケーションを選択して有効にし、[上へ]リンクと[下へ]リンクを使用して再配置します。

カスタマイズされたアプリケーション サムネイル

図 25：カスタマイズされたアプリケーション サムネイル

この例で示すアイコンなど、好みのサムネイルをアプリケーション名の横に追加するには、次の手順を実行します。

1. ポータル ページでデフォルトのサムネイル イメージを右クリックして、イメージの名前と場所を調べます。

- [Home] タブの場合、サムネイル イメージの場所は /+CSCOU+/nv-home.gif です。

- [Web Applications] タブの場合、サムネイルの場所は /+CSCOU+/nv-web-access.gif です。

2. 手順 1 で取得した名前を使用して、目的のイメージを Web コンテンツとして ASA にインポートします。

たとえば、disney.gif を [Web Applications] タブに関連付けるには、このファイルを nv-web-access.gif としてインポートします。

図 26：アプリケーション タブ用のサムネイルのインポート

カスタマイズされたアプリケーション用ヘルプ ページ

デフォルトでは、アプリケーションの使用に関するヘルプ ページが Cisco から提供されています。これらのページは独自の HTML ページに置き換えることができます。たとえば図 27 では、ユーザ指定の写真を追加できます。

図 27：カスタマイズされたヘルプ ページ

ヘルプ ファイルをカスタマイズするには、次の手順を実行します。

1. [Portal] > [Help Customization] を選択し、[Import] をクリックします。

2. [Language] を選択します。

3. .inc ファイルを選択します。たとえば、[Web Application] アクセス タブに対応するヘルプ ページを編集する場合、web-access-hlp.inc ファイルを選択します。

4. カスタムの HTML ファイルを選択します。

図 28：アプリケーション アクセスのためのカスタマイズされたヘルプ ファイルのインポート

カスタマイズのテスト

この時点で、https://asa.cisco.com/sslclient から ASA にログオンします。認証に成功すると、カスタマイズされた Web ポータルが表示されます。

ログイン ページのカスタマイズ

デフォルト ログイン ページは次のようになります。

図 29：デフォルト ログイン ページ

フル カスタマイズされたログイン ページは次のようになります。

図 30：フル カスタマイズされたログイン ページ

新しいログイン ページには、ログインおよびパスワード用ダイアログボックスの他に、カスタマイズされたロゴ、タイトル、およびイメージが含まれています。ログイン ページはフル カスタマイズ可能で、つまり任意の HTML ページを作成し、ログインおよびパスワード用ダイアログボックスを必要な場所に挿入してもかまいません。

注：ログインページ全体はカスタマイズ可能ですが、ASAがエンドユーザにロードする特定のログイン/パスワードダイアログボックスは完全にはカスタマイズできません。

フル カスタマイゼーションを使用して、独自のログイン画面の HTML を入力し、セキュリティ アプライアンスで関数を呼び出す Cisco HTML コードを挿入できます。これで、Login フォームと言語セレクタ ドロップダウン リストが作成されます。

このドキュメントの次のセクションでは、HTML コードに必要な変更と、新規コードを使用するセキュリティ アプライアンスを設定するために必要なタスクについて説明します。

自分の HTML ファイルから開始する

この HTML は Microsoft FrontPage エディタから取得しました。これにはタイトル、カスタマイズされたロゴ、イメージ、フッタが含まれています。

注：イメージ550.gifとasa.gifはlogin_filesディレクトリに保存されます。空白の領域は意図的なもので、後の手順でログインおよびパスワード ダイアログボックスに置き換わります。

この時点で、ページは図31のように表示されます。このページには、将来の手順でダイアログボックスを挿入できるように、空白スペースがどのように含まれていることに注意してください。

図 31：最初の Web ページ

イメージの場所へのリンクを変更する

すべてのイメージについて、パスをキーワード /+CSCOU+/ で置き換えます。これは ASA の内部ディレクトリです。イメージを ASA にアップロードすると、イメージは ASA ファイル システムの内部ディレクトリ /+CSCOU+/ に保存されます。後で ASA がこの変更された HTML をロードするとき、イメージ ファイルを正しくロードします。

図 32：変更された HTML コード

注：最初のリンクでは、login_files/5550.gifは/+CSCOU+/5550.gifに置き換えられます。

HTML ファイル名を変更する

次の手順では、この login.html ファイルの名前を login.inc に変更します。

.inc 拡張子は必須です。この拡張子によって、ASA はこれを特殊なタイプのファイルとして認識し、ログインおよびパスワード用ダイアログボックスをサポートするために必要な Java スクリプトを含めます。

login.inc ファイルにコードを追加する

次の HTML コードを、ログインおよびパスワード用ダイアログボックスを表示する場所に追加する必要があります。

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

注：最初の2つの関数csco_ShowLoginForm(lform)とcsco_ShowLanguageSelector(selector)は、ASAが.incファイルをレンダリングする際に定義をインポートする2つのJavaスクリプト関数です。このコードでは、ログインおよびパスワード用ダイアログボックスと言語セレクタを表示するための関数が呼び出されます。

注：ダイアログボックスは、テーブル要素として表されます。これは他のイメージまたはテキストによって囲んだり、HTML ページに合うように位置を調整したりできます。

このシナリオでは、ログインおよびパスワード用ダイアログボックスは asa.gif イメージの上部の中央に表示されます。このコードを挿入すると、最終的な HTML ページは次のようになります。

login.inc およびイメージ ファイルを Web コンテンツとして ASA にアップロードする

次の手順では、最終的な login.inc ファイルとイメージ ファイルを Web コンテンツとして ASA にアップロードします。ファイルを /+CSCOU+/ ディレクトリに保存するには、最下部のオプションを必ず選択する必要があります。

図 33：イメージ ファイルを Web コンテンツとして ASA にインポートする

login.inc をフル カスタマイゼーションのファイルとして選択する

最後に、カスタマイゼーション エディタで [Full Customization] タブを選択し、アップロードした login.inc ファイルへのリンクを指定します。このカスタマイズに関連付けられている接続プロファイル（sslclient など）からエンド ユーザが接続すると、フル カスタマイズされたログイン ページがユーザに表示されます。

図 34：login.inc をフル カスタマイゼーションのファイルとして関連付ける

フル カスタマイゼーションをテストする

https://asa.cisco.com/sslclient から ASA に接続すると、フル カスタマイズされたログイン ページが表示されます。

図 35：フル カスタマイズされた最終的なログイン ページ

CLI のサポート

ここまで説明したように、すべてのカスタマイズは ASDM で編集されます。ただし、カスタマイズやその他の WebVPN コンテンツを削除するために、次の CLI コマンドを使用することもできます。

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

以下に、いくつかの例を示します。

- カスタマイズを削除するには、revert webvpn customization Custom_Marketing CLI コマンドを発行します。

- ロゴ ファイルを削除するには、revert webvpn webcontent /+CSCOU+/marketing.gif コマンドを発行します。

- ブックマークを削除するには、revert webvpn url-list Marketing_URL_List コマンドを発行します。

- すべてのカスタマイズ、Web コンテンツ、プラグイン、およびブックマークを削除するには、revert webvpn all コマンドを発行します。

注：WebVPNのカスタマイズは実行コンフィギュレーションに保存されないため、通常の書き込み消去、リロードシーケンスは、カスタマイズやWebコンテンツをASAから消去しません。revert webvpn コマンドを明示的に発行するか、ASDM からカスタマイズを手動で削除する必要があります。

カスタマイズのバックアップ

他の CLI コマンドとは違い、カスタマイズは実行コンフィギュレーション内に保存されません。カスタマイズを明示的にエクスポートする必要があり、カスタマイズは XML 形式でホスト コンピュータに保存されます。

図 36：バックアップまたは別の ASA への複製のためにカスタマイズをエクスポートする

カスタマイズを復元するには、前の手順で取得した XML ファイルと一緒にカスタマイズをインポートします。

図 37：以前エクスポートされた XML ファイルからカスタマイズをインポートする

注：カスタマイゼーションのエクスポートやインポートに加え、イメージファイル、ヘルプファイル、サムネイルイメージなどのWebコンテンツを手動でバックアップ/復元する必要もあります。そうしないと、カスタマイズは完全に機能しません。

結論

ASA バージョン 8.0 で導入された高度なカスタマイズ機能によって、興味を引く Web ポータル ページの開発が可能になります。異なるグループに対して異なる Web ポータルをカスタマイズして作成することによって、仮想化を実現できます。さらに、正規のイントラネット Web ポータルに合わせてログイン ページをフル カスタマイズすることができ、一貫性のあるユーザ エクスペリエンスが実現します。

トラブルシュート

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.

この問題を解決するには、revert webvpn all コマンドを実行して ASA をリロードしてください。

関連情報

- Cisco 5500 シリーズ適応型セキュリティ アプライアンスに関するサポート ページ

- クライアントレス SSL VPN ページのカスタマイズ

- ASA 8.0：WebVPN のロゴを変更する方法

- テクニカル サポートとドキュメント – Cisco Systems