Cisco Adaptive Security Appliance (ASA) Web VPN Portal Customization: Solution Brief

Guide Cisco Adaptive Security Appliance (ASA) Web VPN Portal Customization: Solution Brief Author: Ashur Kanoon August 2012 For further information, questions and comments please contact ccbu-pricing@cisco.com 2012 Cisco and/or its affiliates. All rights reserved. This document is Cisco Public Information. Page 1 of 13

Contents Purpose... 3 Understanding the Parts of the Cisco Adaptive Security Appliance (ASA) WebVPN Portal... 3 Basic Customization of the Default Cisco Adaptive Security Appliance (ASA) WebVPN Portal... 6 Full Customization of the Cisco Adaptive Security Appliance (ASA) WebVPN Portal... 6 Uploading the Graphics and HTML to the ASA... 7 Example of a Fully Customized Cisco Adaptive Security Appliance (ASA) WebVPN Portal... 9 Other Useful Things to Know... 12 2012 Cisco and/or its affiliates. All rights reserved. This document is Cisco Public Information. Page 2 of 13

Purpose This Solution Brief was created with the following goals in mind: To provide a thorough understanding of the Cisco Adaptive Security Appliance (ASA) WebVPN Portal and associated pages To provide information on basic and full customization of the WebVPN Portal and associated pages To provide tips and guidance on creating a custom WebVPN Cisco Adaptive Security Appliance (ASA) WebVPN Portal To provide an example of a fully customized Portal The scope of this Solution Brief is full customization. However, we will briefly mention how to customize the default Cisco WebVPN Portal. Full portal customization was provided by Cisco as a way for customers to take full advantage of the benefits and features of the Cisco Adaptive Security Appliance (ASA), while still presenting an interface Cisco Adaptive Security Appliance (ASA) WebVPN Portal which would resemble a customer Intranet website. Understanding the Parts of the Cisco Adaptive Security Appliance (ASA) WebVPN Portal The following three pages can be customized: 1. Logon Page 2. Portal Page 3. Logout Page These are listed in the usual order they will be seen by the end user. It is important to note that some of the objects which will be customized for the Logon Page will also be displayed in the Logout Page. This will be detailed later in the document. Please also note that the Portal Page can be customized using the default Cisco WebVPN Portal, or an administrator can create a completely custom HTML page. We will detail both of these methods in this Solution Brief. Below, we will show the default Cisco WebVPN Portal, and highlight and note each section as it relates to the Customization Objects listed in Configuration Remote Access VPN Clientless SSL VPN Access Portal Customization. 2012 Cisco and/or its affiliates. All rights reserved. This document is Cisco Public Information. Page 3 of 13

Basic Customization of the Default Cisco Adaptive Security Appliance (ASA) WebVPN Portal The basic customization of the default WebVPN Portal is beyond the scope of this document. This customization is documented at: http://www.cisco.com/en/us/docs/security/asa/asa84/asdm64/configuration_guide/vpn_clientless_ssl.html#wp2207 465 Basic customization includes changing the logo, fonts, and text/background colors. You can also choose which panels are to be displayed. Full Customization of the Cisco Adaptive Security Appliance (ASA) WebVPN Portal The process and behavior of full customization for the Logon and Logout Pages and the Portal Page differ slightly. We pair the Logon and Logout Pages because the Logout Page uses many of the customizations from the Logon screen. The custom pages (html and graphics) used in this method are directly uploaded to the ASA. An external webserver is not used. On the custom Logon Page, when we replace the default pre-defined Logon Page with a custom page, all of the Logon custom object settings will not be applicable, and will be ignored and not displayed. Only the custom HTML file will be displayed. The custom Logon Page should at minimum have the code to display the Logon form: <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>loading...</p> </div> </td> </tr> <tr> <td width="251"></td> <td width="1"></td> <td align=right valign=right width="800"> </td></tr> </table> 2012 Cisco and/or its affiliates. All rights reserved. This document is Cisco Public Information. Page 6 of 13

When creating a custom Portal Page, we technically mean a custom Home Page. In the custom Portal Page, we can still show all the other panels, along with a custom Home Page, without the custom panes. Custom panes are not applicable, and are ignored and not displayed, whenever a custom Home Page is used. The custom Home Page should at minimum have hyperlink graphics and text with mangled links, also known as bookmarks. Creating this custom Home Page will be the main focus of the remainder of the document. The recommended approach for creating the custom Home Page is to first create the bookmarks, using the default Portal Page. This will automatically create mangled links, which we can then retrieve and use in our Custom Page. To retrieve the links, right-click on the area containing the links and view the source. This will obtain the bits of HTML code we need, which look like: <a href="javascript: parent.dourl('6666753a2f2f3139322e3136382e312e35312f253353706670625f6666622533513 1',[{ 'l' : '4753BCE5C12C2DA5C96B663BB8547DC2', 'n' : 4}],'get',false,'no', false)">myssh</a> The above code is the mangled link generated by the ASA in the default Portal. In the actual Portal, all we see is the myssh link. Instead of the text myssh we can have a graphic representation, using some the following bit of code: <a href="javascript: parent.dourl('6666753a2f2f3139322e3136382e312e35312f253353706670625f6666622533513 1',[{ 'l' : '4753BCE5C12C2DA5C96B663BB8547DC2', 'n' : 4}],'get',false,'no', false)"><img src=/+cscoe+/ssh.png width="125" border=0></a> In the above sample code, we replace the text myssh with the HTML tag img src which is used to display an image on a web page. Uploading the Graphics and HTML to the ASA To upload graphics and HTML files to the ASA, go to Configuration Remote Access VPN Clientless SSL VPN Access Portal Web Contents in Cisco Adaptive Security Device Manager (ASDM). 2012 Cisco and/or its affiliates. All rights reserved. This document is Cisco Public Information. Page 7 of 13

Figure 5. Web Contents In the screenshot above, note that the file name starts with either /+CSCOU+/ or /+CSCOE+/. When importing, you have the option to require authentication or not. For the graphics/html files on the Logon/Logout Page, no authentication is required. The path for files which do not require authentication is /+CSCOU+/<filename>. For the graphics/html files on the Portal Page, authentication is required. The path for these files is /+CSCOE+/<filename>. This table summarizes the upload and usage notes when using ASA as the web server: Logon Page Portal Page Authentication required? No Yes Full Path /+CSCOU+/<filename> /+CSCOE+/<filename> HTML File Type.inc.html 2012 Cisco and/or its affiliates. All rights reserved. This document is Cisco Public Information. Page 8 of 13

Example of a Fully Customized Cisco Adaptive Security Appliance (ASA) WebVPN Portal Figure 6. The Logon Page The sample page above has the following elements: Graphic which reads Custom Portal Example Graphic hyperlink for Cisco AnyConnect Secure Mobility Client Graphic hyperlink for Cisco Cisco code for the logon form HTML code: <html> <body onload="csco_showloginform('lform');csco_showlanguageselector('selector')"> <div align="center"> <img src=/+cscou+/banner_customportal.png><br> <table border=0> <tr><td> <a href=http://www.cisco.com/go/anyconnect><img src=/+cscou+/anyconnect.png width="150" height="150" border=0></a> </td><td> <a href=http://www.cisco.com><img src=/+cscou+/cisco.gif width="150" border=0></a> </td></tr> </table> <hr width=50%> 2012 Cisco and/or its affiliates. All rights reserved. This document is Cisco Public Information. Page 9 of 13

<table border=0> <tr><td colspan=3 height=20 align=right><div id="selector" style="width: 300px"></div></td></tr> <tr> <td align=middle valign=middle> <div id=lform > <p> </p> <p>loading...</p> </div> </td> </tr> </table> </div> </body> </html> Figure 7. The Portal Page 2012 Cisco and/or its affiliates. All rights reserved. This document is Cisco Public Information. Page 10 of 13

The sample page above has the following elements: Enabled toolbar panel Graphic which reads Custom Portal Example Graphic hyperlink for Cisco AnyConnect Secure Mobility Client Graphic hyperlink for Cisco Two links per bookmark; one for the graphic, the other for the text HTML code: <html> <head><style>table {display:inline}</style></head> <body> <div style="text-align:center"> <img src=/+cscoe+/banner_customportal.png><br> <table border=0><tr><td> <a href=http://www.cisco.com/go/anyconnect target="_blank"><img src=/+cscoe+/anyconnect.png width="150" height="150" border=0></a> </td><td> <a href=http://www.cisco.com target="_blank"><img src=/+cscoe+/cisco.gif width="150" border=0></a> </td></tr></table> <hr width=50%> <table border=0><tr><td> <a href="javascript: parent.dourl('6666753a2f2f3139322e3136382e312e35312f253353706670625f6666622533513 1',[{ 'l' : '4753BCE5C12C2DA5C96B663BB8547DC2', 'n' : 4}],'get',false,'no', false)"><img src=/+cscoe+/ssh.png width="125" border=0></a> <br> <center><a href="javascript: parent.dourl('6666753a2f2f3139322e3136382e312e35312f253353706670625f6666622533513 1',[{ 'l' : '4753BCE5C12C2DA5C96B663BB8547DC2', 'n' : 4}],'get',false,'no', false)">myssh</a> <br>ssh Java plug-in </td></tr></table> <table border=0><tr><td> <a href="http://www.webex.com" target="_blank"><img src=/+cscoe+/webex.gif width="125" border=0></a> <br> <center><a href="http://www.webex.com" target="_blank">webex</a> <br>direct </td></tr></table> <<< snipped the other links out >> <hr width=50%> </div> 2012 Cisco and/or its affiliates. All rights reserved. This document is Cisco Public Information. Page 11 of 13

</body> </html> Figure 8. The Logout Page The sample page above is automatically generated when we create the custom Logon Page. The text and the Logon button can be further customized in the Logout Page section on the Edit Customization Object page in ASDM. Other Useful Things to Know Since HTTP and HTTPS cannot coexist in the same browser window or tab, direct (not mangled) hyperlinks to HTTP websites in the custom Home Page should be forced to open in a new browser window or tab. This can be done using the target= _blank code in the a href HTML tag. Here is an example: <a href="http://www.webex.com" target="_blank">webex</a> Forcing mangled hyperlinks to open in a new browser windows is also possible. A parameter which is used by the parent.dourl() function needs to be changed from false to true. You will no longer see the following text: <a href="javascript: parent.dourl('756767633a2f2f7a6c63756261722e6f7265787279726c706279797274722e72716 8',[{ 'l' : 'BBFE958449D2E2E8A60228AE861969F7', 'n' : 4}],'get',false,'no', false)"> 2012 Cisco and/or its affiliates. All rights reserved. This document is Cisco Public Information. Page 12 of 13

Instead, you will have: <a href="javascript: parent.dourl('756767633a2f2f7a6c63756261722e6f7265787279726c706279797274722e72716 8',[{ 'l' : 'BBFE958449D2E2E8A60228AE861969F7', 'n' : 4}],'get',false,'no', true)"> Printed in USA C07-713765-00 08/12 2012 Cisco and/or its affiliates. All rights reserved. This document is Cisco Public Information. Page 13 of 13