Jump to content
Welcome to our new Citrix community!
  • Unleashing RfWebUI Potential: JavaScript-Powered Citrix Gateway Login Page Customization


    Juliano Reckziegel
    • Validation Status: Validated
      Summary: In this article, we explore the dynamic world of RfWebUI and how JavaScript can be harnessed to elevate your Citrix Gateway login page. This article provides a comprehensive guide on how to enhance user experience, impart additional information, and integrate guidance seamlessly. By delving into the capabilities of RfWebUI and JavaScript, you can create a personalized login portal that not only reflects your organization's unique identity but also guides users effectively through the authentication process. The power to tailor your Citrix Gateway is in your hands, and this article equips you with the knowledge and tools to unlock its full potential.
      Has Video?: No

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

    image.jpg

    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.

    image.jpg

    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:

    flush contentGroup loginstaticobjects

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

    image.jpg

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

    image.jpg

     

    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:

    image.jpg

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

    const HTML1 = '<div style="color: lightgrey; margin: 0 auto; font-size: 12px; text-align: center"><BR><BR>TEXT1<BR><BR> </div>';
    element = document.getElementById("customExplicitAuthHeader");
    element.insertAdjacentHTML('afterend',HTML1);

    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:

    image.jpg

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

    const HTML2 = '<span style="color: lightgrey; margin: 0 auto; font-size: 12px; text-align: center; position: absolute; top: 50%">TEXT2</span>';
    const HTML3 = '<span style="color: lightgrey; margin: 0 auto; font-size: 12px; text-align: center; position: absolute; top: 50%">TEXT3</span>';
    elements = document.getElementsByClassName('logon-spacer');
    elements[0].insertAdjacentHTML('afterbegin',HTML2);
    elements[1].insertAdjacentHTML('afterbegin',HTML3);

    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.

    image.jpg

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

    const HTML4 = '<div style="color: lightgrey; margin: 0 auto; font-size: 12px; text-align: left"><BR><BR>TEXT4<BR><BR> </div>';
    const HTML5 = '<div style="color: lightgrey; margin: 0 auto; font-size: 12px; text-align: left"><BR><BR>TEXT5<BR><BR> </div>';
    elements = document.getElementsByClassName('form-container');
    elements[0].insertAdjacentHTML('beforebegin',HTML4);
    elements[0].insertAdjacentHTML('afterend',HTML5);

    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:

    image.jpg

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

    const HTML6 = '<div style="color: lightgrey; margin: 0 auto; font-size: 12px; text-align: center"><BR><BR>TEXT6<BR><BR> </div>';
    const HTML7 = '<div style="color: lightgrey; margin: 0 auto; font-size: 12px; text-align: center"><BR><BR>TEXT7<BR><BR> </div>';
    element = document.getElementById("pluginExplicitAuthTop").parentNode;
    element.insertAdjacentHTML('beforebegin',HTML6);
    element.insertAdjacentHTML('afterend',HTML7);

    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: 

    image.jpg

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

    const HTML8 = '<div style="color: lightgrey; margin: 0 auto; font-size: 12px; text-align: center"><BR><BR>TEXT8<BR><BR> </div>';
    Items = document.getElementById('customExplicitAuthFooter');
    Items.insertAdjacentHTML('beforebegin',HTML8);

    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.

    image.jpg

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

    const HTML9 = '<div class="field CredentialTypenone"><div><span style="display: block; color: lightgrey; margin: 0 auto; font-size: 12px; text-align: center">TEXT9</span></div></div>';
    const HTML10 = '<div class="field CredentialTypenone"><div><span style="display: block; color: lightgrey; margin: 0 auto; font-size: 12px; text-align: right">TEXT10</span></div></div>';

    checkForm();

    function checkForm () {
      if ( document.forms[0] ) { //Check if form exists
          div = document.getElementById("passwd").parentNode.parentNode;
          div.insertAdjacentHTML('beforebegin',HTML9);
          div.insertAdjacentHTML('afterend',HTML10);
      } else {
        setTimeout(checkForm, 50); //wait 50 ms, then try again
      }
    }

    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.

     


    User Feedback

    Recommended Comments

    There are no comments to display.



    Create an account or sign in to comment

    You need to be a member in order to leave a comment

    Create an account

    Sign up for a new account in our community. It's easy!

    Register a new account

    Sign in

    Already have an account? Sign in here.

    Sign In Now

×
×
  • Create New...