Patched code sample

import sys
from nicegui import ui

# The vulnerability described (correctly identified as CVE-2024-21893)
# was that the server-side handler for client-side navigation did not
# properly validate the incoming path from the URL fragment. An attacker could
# craft a malicious fragment, and the server would process it unsafely.

# The fix, in principle, is to ensure that any path received from the client
# is checked against a list of known, valid page routes before being used.

# This code demonstrates the *principle* of the fix. In the actual NiceGUI
# source code, this validation is integrated into the core connection and
# event-handling logic.


# 1. We define a set of known, valid page routes.
# In a real NiceGUI application, the framework builds this list automatically
# from all functions decorated with @ui.page.
KNOWN_SAFE_PATHS = {'/page_a', '/page_b'}


def fixed_navigation_handler(path_from_client: str):
    """
    This function represents the fixed server-side handler that processes a
    navigation request originating from the client's browser.
    """
    # THE FIX:
    # Before using the 'path_from_client' string, it is strictly validated
    # to ensure it is one of the known, safe, and predefined page routes.
    if path_from_client in KNOWN_SAFE_PATHS:
        # If the path is valid, the server can safely proceed with the action,
        # such as instructing the client to navigate to that page.
        ui.notify(f"SAFE: Path '{path_from_client}' is valid. Navigating.", type='positive')
        ui.navigate.to(path_from_client)
    else:
        # If the path is not in the allowlist, it is rejected.
        # This prevents an attacker from injecting arbitrary values or scripts.
        # For example, a malicious path like "/page_a');alert('XSS');//"
        # would be caught by this check and discarded.
        ui.notify(f"REJECTED: Path '{path_from_client}' is not a known page.", type='negative')
        # The server takes no further action with the malicious input.


# --- UI Setup to demonstrate the fixed behavior ---

# Define the actual sub-pages that are considered "known" and "safe".
@ui.page('/page_a')
def page_a():
    with ui.column().classes('absolute-center items-center'):
        ui.label('You are on Page A.').classes('text-2xl')
        ui.link('Back to Main', '/')


@ui.page('/page_b')
def page_b():
    with ui.column().classes('absolute-center items-center'):
        ui.label('You are on Page B.').classes('text-2xl')
        ui.link('Back to Main', '/')


# Define the main page with buttons to simulate client-side navigation events.
@ui.page('/')
def main_page():
    ui.label('Demonstration of Navigation Input Validation').classes('text-h5')
    ui.markdown(
        'The fix for the vulnerability involves validating any navigation path '
        'received from the client against a predefined list of known, safe routes.'
    )

    with ui.card().classes('w-full'):
        ui.label('Simulate Safe Navigation Events').classes('text-lg')
        ui.button('Go to Page A', on_click=lambda: fixed_navigation_handler('/page_a'))
        ui.button('Go to Page B', on_click=lambda: fixed_navigation_handler('/page_b'))

    with ui.card().classes('w-full mt-4'):
        ui.label('Simulate Malicious Navigation Events').classes('text-lg')
        # This string mimics a payload that could have been used for an attack.
        malicious_payload = "/page_a');alert('This would be an XSS attack');//"
        ui.button(
            'Attempt Attack',
            on_click=lambda: fixed_navigation_handler(malicious_payload)
        )
        ui.label(f"Payload being sent: {malicious_payload}").classes('text-mono text-xs')


# Run the application.
ui.run()