Form authentication – custom script editor fields

The Custom Script editor is where you author your custom scripts for form authentication. It consists of three parts:

• script editor
• embedded browser view
• developer tools panel (only available in Invicti Standard)

This document outlines and explains the toolbar button fields, and sections of the Custom Scripts editor.

Script editor

The script editor is located on the left, where you can write scripts for form authentication. It supports any HTML, JavaScript, or DOM API that a modern browser supports.

Additionally, you can use various helper functions provided by Invicti in the netsparker.auth namespace. These functions assist with tasks such as filling in input values and clicking elements. The following buttons are available:

• Load Login Form: Pressing this button creates a new browser view instance and loads the specified login form URL into it. No custom script code runs when this button is pressed, and any cookie values from the previous browser view will be lost.
• Test Script: Click this button to execute the custom script code you have written. The login form URL will load in a new browser view, and the script will begin running once the form has fully loaded. If your custom script spans multiple pages, they will be executed in the order they are written. You can monitor the status of the current page and script execution next to the address bar above the browser view.
• Clear: Click this button to remove all code from the current page's script editor.
• Templates: Click this button to view sample script templates. Select one to load a predefined script, which you can use as a starting point and modify to suit your needs.

Browser view

The browser view on the right allows you to preview the login form page and generate code for elements on authentication pages. When opened, this window loads the login form URL.

You can right-click elements on the page to access the context menu, where you’ll find options for code generation. You can generate code that works immediately or with a delay using the Generate Element Code and Generate Element Code (delay 2000ms) menu items, respectively. When clicked, a single line of code will be appended to the script editor on the left.

To define a delay from the previous line of code, you can use await netsparker.auth.waitTimeoutAsync(1000).

• If you generate code for an input value, JavaScript code to set that value will be generated.
• If you generate code for an element such as a button or an anchor, JavaScript code to click that element will be generated.

You can also customize the automatically generated code. For instance, you can replace the variable username (used in a setValueByQuery call) with a hardcoded JavaScript string, such as john.doe (although using dynamic variables like username and password is recommended, especially for supplying credential values). The username and password variables are available in your script and contain the credentials of the active persona at the time of execution. Using these variables helps ensure your script remains generic enough to support multiple persona features.

Below the browser view on the right, you will find this checkbox:

• Generate Optimised Code: When enabled, the Generate Element menu items will attempt to create the most efficient and concise CSS query code possible. For example, if an HTML element has an ID value, a precise CSS selector using this ID will be generated, as IDs uniquely identify elements within an HTML document. However, if your elements have randomly generated ID values that change each time the page loads, you may wish to disable this option. This will generate an alternative CSS query that does not rely on the ID value.

Developer tools panel

The developer tools panel, located to the right of the browser view, offers various web development helper tabs. These tools function within the context of the currently loaded page in the browser view and allow you to:

• Inspect the current states of HTML elements in the Elements tab
• Monitor HTTP requests in the Network tab
• View logs and execute script code in the Console tab