Advanced NetScaler Gateway 11 Customizations

Now with NetScaler Gateway 11 customizations became super easy using the built in portal themes! However, the portal themes have their limits and sometimes you need more flexibility and the ability to go deeper and customize the login page further.

1. Background
2. NetScaler Gateway 11 Customizations
3. Customization Examples
   1. Customize Footer: Add helpdesk information
   2. Customize Login Mask: Add password reset link

Background

If you’ve dealt with earlier versions of NetScaler you’ll know the struggle with customizing the files on the file system. But even in the old days you were able to also apply the customizations with NetScaler Rewrite policies but these had their limits. You couldn’t upload pictures and if you wanted to completely redesign the login page (GreenBubble, X1, etc.) it was just too much for the rewrite feature.

• Customize NetScaler Gateway Logon Page for Various NetScaler Versions
• Create Custom Theme for Logon Page of NetScaler Gateway 10.1 and 10.5
• Retain Changes and Customizations in NetScaler Appliance When NetScaler Appliance Restarts

With NetScaler 11 and the Portal Themes a majority of this can be done through the theme configuration. That’s why I’d highly recommend you to stick to the Rewrite feature for all customizations you apply on top of these themes.

Using the Rewrite feature keeps your customizations update-proof and more important, your overall NetScaler in a supported state. Yes, despite being advertised on Citrix articles, customizing your login page on the file system is and always was technically unsupported.

NetScaler Gateway 11 Customizations

Now what would you actually want to further customize since the themes take care of the visuals? I can think of hundreds of scenarios like:

• Adding links
• Insert helpdesk information
• Display target datacenter information in a GSLB scenario
• etc.

And how can we customize those? Previous NetScaler versions basically had one index.html page that took care of everything and could be customized.

Starting with NetScaler Gateway 11 the index.html is basically empty and the whole login page is dynamically generated on the fly by two JavaScripts. This is mainly due to the nFactor enhancements introduced later within the releases which obviously require a dynamic generation. I might write a dedicated article  about nFactor in the future as it is a pretty cool feature!

Basically the two files to look at for advanced NetScaler Gateway 11 customizations are located in /netscaler/ns_gui:

• /vpn/js/gateway_login_view.js – Responsible for the basic login page layout
• /vpn/js/gateway_login_form_view.js – Responsible for the actual login form within the page

Both are heavily working with JQuery so I’d suggest you refresh your knowledge about that. But it is quite self explanatory once you get the hang of it. Basically how both files are structured:

• Define some building blocks and store them in variables
• Stitch the building blocks together to form the login mask

So in order to customize the login page you need to hook into the second stage where everything is getting stitched together.

Enough of the theory, without further ado I’ll just give you few samples I’ve used either used at customers. From there you can branch out and create your own.

Notes:

Rewrite supports only up to 250 characters to be inserted so keep your code compact

NetScaler caches the pages internally. Yes, even with disabled/unlicensed caching feature! So always flush your cache when trying changes:

flush cache contentGroup loginstaticobjects

 

Customization Examples

Customize Footer: Add helpdesk information

This adds a footer to the login page displaying a helpdesk number for the user in case of any issues.

add rewrite action ngw-footer.rw.act.insert-footer insert_after_all "HTTP.RES.BODY(10000)" q{"\n\tauthentication.append($(\"<div>Issues logging in? For assistance call +1 23 456 789</div>\").attr('id','logonbox-innerbox').attr('style','padding:5px;text-align:center;position:fixed;bottom:0px;').addClass('form_text'));"} -pattern "authentication.append(logonbelt_topshadow,logonbox_container,logonbelt_bottomshadow);"
add rewrite policy ngw-footer.rw.pol.insert-link.gateway_login_view.js "HTTP.REQ.URL.PATH.EQ(\"/vpn/js/gateway_login_view.js\")" ngw-footer.rw.act.insert-footer
bind vpn vserver ngw.ngw.vs.ssl.443 -policy ngw-footer.rw.pol.insert-link.gateway_login_view.js -priority 110 -gotoPriorityExpression NEXT -type RESPONSE

 

Customize Login Mask: Add password reset link

This adds a password reset link that could link to a user self service portal.

add rewrite action ngw-passreset.rw.act.insert-link insert_after_all "HTTP.RES.BODY(10000)" q{"\n\t$(\"<div></div>\").addClass('field').append($(\"<div style=\\\"height: 1px;\\\"></div>\").addClass('left')).append($(\"<div>Reset your password <a href=\\\"https://www.google.com\\\">here</a></div>\").addClass('right')).appendTo(form)"} -pattern "form.append(title,field_username,field_pass);"
add rewrite policy ngw-passreset.rw.pol.insert-link.gateway_login_form_view.js "HTTP.REQ.URL.PATH.EQ(\"/vpn/js/gateway_login_form_view.js\")" ngw-passreset.rw.act.insert-link
bind vpn vserver ngw.ngw.vs.ssl.443 -policy ngw-passreset.rw.pol.insert-link.gateway_login_form_view.js -priority 100 -gotoPriorityExpression NEXT -type RESPONSE