In numerous instances, there's a need to customize the Citrix Gateway login page. Sometimes, it's crucial to include disclaimers, while in other cases, it's essential to direct users to a support link, among other requirements.

It has come to our attention that many companies have attempted to modify the built-in HTML/JS files for this purpose. However, this approach is neither supported nor sustainable because these customizations can be lost during system upgrades or even routine reboots, unless you utilize the 'rc.netscaler' file.

An alternative method is to employ rewrite policies or use a JavaScript file within a customized RfWebUI theme. These approaches ensure that your customizations persist through system reboots and upgrades, making them the preferred choice.

Personally, I prefer employing a JavaScript file because it's compatible with both Citrix Gateway virtual servers and AAA virtual servers, providing a remarkable level of versatility. This is primarily due to its ability to inject HTML code either before, after, or within specific elements or their parent elements. All that's required is the identification of a class name or an ID on the webpage to instruct the browser to insert extra elements precisely at that location.

Below is an example of a Citrix Gateway landing page with text additions incorporated into an RfWebUI theme without a logo."

Caching

Before I proceed to explain how to achieve the desired outcome, let's first address caching. NetScaler boasts an advanced caching feature that can optimize user access and reduce the amount of data downloads needed to render the authentication page. Interestingly, the Citrix Gateway login page employs this feature by default, even when it's not explicitly enabled, and it stores the landing page files within the "loginstaticobjects" content group.

To confirm this, you can access the NetScaler GUI and navigate to Optimization -> Integrated Caching -> View Cache Objects. Here, you'll notice that a variety of file types, such as .html, .js, .css, .gif, .png, and .json files, are automatically cached. Here are a few examples of the files that are cached without manual intervention.

Additionally, these types of objects are also cached by the end user's browser. Consequently, if you wish to modify messages and immediately see the changes, you'll need to clear both the NetScaler cache and the browser cache.

To clear the NetScaler cache, you can use the following command:

For browser cache clearance, there are multiple methods available. One approach I use on Chrome and Edge is to open the developer tools, right-click on the reload icon, and select "Empty cache and hard reset."

Finding the anchor element

The next step is to pinpoint the specific page element where we want to inject HTML code—whether it's before, after, or within that element. To accomplish this, you can use either Chrome or Edge. Simply right-click anywhere on the page and choose "Inspect" to identify the element that will serve as our anchor.

In the example below, I've identified a hidden div at the top of the login page with the ID "customExplicitAuthHeader."

No need to worry about this; I've already selected a couple of existing elements, and I'll share them here.

TEXT1

Let's proceed with the first customization and add TEXT1 to the page as followed:

To achieve this, create a new RfWebUI theme and modify the initially empty script.js file located at /var/netscaler/logon/themes/NAME_OF_YOUR_NEW_RfWebUI_THEME/:

In this example, we find the anchor element based on its id customExplicitAuthHeader and we add a new <div> after it.

TEXT2 and TEXT3

The next customizations involve adding TEXT2 and TEXT3:

Again, modify the script.js file from the new RfWebUI theme created located at /var/netscaler/logon/themes/NAME_OF_YOUR_NEW_RfWebUI_THEME/:

In this example, we find the anchor element based on class name logon-spacer, when we use class name, JavaScript will return an array, this is the reason we use [0] and [1] to indicate the first spaces located in the left of the authentication form and the second spaces located on the right of it. The HTML code added here is a <span> to be inside of the existing element.

TEXT4 and TEXT5

Now, let's add TEXT4 and TEXT5.

Modify the script.js file from the new RfWebUI theme created located at /var/netscaler/logon/themes/NAME_OF_YOUR_NEW_RfWebUI_THEME/:

In this example, we find the anchor element based on class name form-container and we inject a new <div> for TEXT4 before the element and a second <div> for TEXT5 after it.

TEXT6 and TEXT7

Moving on, now we will add TEXT6 and TEXT7:

Modify the script.js file from the new RfWebUI theme created located at /var/netscaler/logon/themes/NAME_OF_YOUR_NEW_RfWebUI_THEME/:

Here we select the parent element of the element with id pluginExplicitAuthTop and we create a <div> for TEXT6 before and another <div> for TEXT7 after.

TEXT8

Now, let's add TEXT8: 

Modify the script.js file from the new RfWebUI theme created located at /var/netscaler/logon/themes/NAME_OF_YOUR_NEW_RfWebUI_THEME/:

TEXT8 is very similar to TEXT1, the anchor element is select based on ID customExplicitAuthFooter and a new <div> is inserted before it.

TEXT9 and TEXT10

Finally, we have TEXT9 and TEXT10.

Modify the script.js file from the new RfWebUI theme created located at /var/netscaler/logon/themes/NAME_OF_YOUR_NEW_RfWebUI_THEME/:

If you need to insert HTML code within the authentication form, a slightly different approach is required due to its dynamic creation. In this scenario, we will first check if the authentication form already exists before injecting the new HTML code. If it doesn't exist, we will wait for 50 milliseconds before checking again.

Conclusion

In these instances, I applied a few styles to position the text as needed. However, it's essential to keep in mind that you have the option to utilize CSS for a cleaner separation of JS code and styling. To achieve this, simply make the necessary adjustments in the style.css file within the newly created RfWebUI theme.

Please exercise caution with the character ' because the HTML code is encapsulated within two single quotation marks. To use it correctly, insert a backslash () before the single quote character to escape it.

Remember that the objective here is not to offer JavaScript programming best practices but rather to showcase its capabilities and provide initial guidance to assist you in customizing your portal in a manner that ensures the changes endure through reboots and upgrades.

In conclusion, the power to enhance and tailor your Citrix Gateway login page lies in your hands. Armed with the knowledge of how to insert HTML code via JavaScript, you can seamlessly integrate links, provide additional information, or offer valuable guidance to your users during their authentication process. The ability to customize this crucial portal empowers you to create a more user-friendly and informative experience that aligns with your organization's specific needs. So, embrace this opportunity and embark on the journey to create a login page that truly reflects your vision and aids your users every step of the way. Your portal's potential is limited only by your imagination, so go ahead and make it your own.