Patched code sample

from nicegui import ui
import re

# The vulnerability existed because a client-side click handler might
# unsafely use a link's target for navigation, allowing 'javascript:' URIs
# to be executed.
#
# The fix involves ensuring that navigation is handled safely. The most robust
# approach, demonstrated here, is to handle navigation decisions on the
# server-side, where targets can be validated against a whitelist before
# instructing the client to navigate.

# A whitelist of safe URL schemes.
# An internal path (e.g., '/profile') is also considered safe.
SAFE_SCHEMES = {'http', 'https', 'mailto', 'ftp'}

def is_safe_url(url: str) -> bool:
    """
    Validates if a URL is safe for redirection.
    - Allows relative paths starting with '/'.
    - Allows absolute URLs with schemes from a whitelist.
    """
    if not isinstance(url, str):
        return False
    # Allow relative paths which are safe for internal navigation.
    if url.startswith('/'):
        return True
    # Check for a scheme and see if it is in the whitelist.
    match = re.match(r'^([a-zA-Z][a-zA-Z0-9+.-]*):', url)
    if match:
        scheme = match.group(1).lower()
        return scheme in SAFE_SCHEMES
    # If no scheme and not a relative path, it's considered unsafe.
    return False

def safe_navigation_handler(target_url: str):
    """
    This function represents the patched, secure navigation handler.
    It is called by the on_click event of UI elements. It validates the
    URL on the server side before initiating a client-side navigation.
    This prevents the execution of malicious 'javascript:' URIs.
    """
    if is_safe_url(target_url):
        ui.notify(f'SAFE: Navigating to {target_url}', type='positive')
        ui.open(target_url)
    else:
        ui.notify(f'UNSAFE: Blocked navigation to "{target_url}"', type='negative')
        # In a real application, this attempt would be logged as a security event.

@ui.page('/')
def main_page():
    ui.label('Demonstration of a Fixed XSS Vulnerability').classes('text-2xl')
    ui.markdown(
        'This example shows a secure implementation that prevents an XSS vulnerability. '
        'A vulnerable implementation might directly navigate to a link\'s target on the client side, '
        'allowing a `javascript:` URI to execute. '
        'The fixed version handles clicks on the server, validating the target URL before navigation.'
    )

    # This represents a link whose target might be controlled by an attacker
    # (e.g., saved in a user's profile and rendered on the page).
    malicious_target_from_user_input = "javascript:alert('XSS: This code should not execute!')"
    safe_target_internal = '/other_page'
    safe_target_external = 'https://nicegui.io'

    with ui.card():
        ui.label('Click the links below:').classes('font-bold')

        # SIMULATED VULNERABLE LINK (NOW SECURED)
        # In the vulnerable version, clicking this might have executed the JavaScript.
        # In the fixed version, the server-side handler `safe_navigation_handler` is called.
        ui.link(
            'Clicking this "malicious" link is now safe',
        ).on('click', lambda: safe_navigation_handler(malicious_target_from_user_input), [])

        # SAFE INTERNAL LINK
        # This demonstrates that legitimate internal navigation still works.
        ui.link(
            'Clicking this safe internal link works',
        ).on('click', lambda: safe_navigation_handler(safe_target_internal), [])

        # SAFE EXTERNAL LINK
        # This demonstrates that legitimate external navigation also still works.
        ui.link(
            'Clicking this safe external link works',
        ).on('click', lambda: safe_navigation_handler(safe_target_external), [])

@ui.page('/other_page')
def other_page():
    ui.label('Successfully navigated to a safe internal page.').classes('text-xl')
    ui.link('Go back', '/')

ui.run()