WebXR client localhost bugfix and self-signed cert acceptance feedback (#379)

Author: blongs-nv

deps/cloudxr/webxr_client/helpers/utils.ts

@@ -362,21 +362,116 @@ export function isLocalServer(hostname: string): boolean {
  * @param certAcceptanceLink - Container element for the certificate link
  * @param certLink - Anchor element for the certificate URL
  * @param location - Optional location object (defaults to window.location)
- * @returns Cleanup function to remove event listeners
+ * @returns Certificate link controller with cleanup and verification helpers
  */
+export interface CertStatusInfo {
+  accepted: boolean;
+  required: boolean;
+  verified: boolean;
+}
+
+export interface CertLinkController {
+  /** Removes listeners created by setupCertificateAcceptanceLink(). */
+  (): void;
+  /** Forces a cert check for the current effective URL and updates status. */
+  verifyNow: () => Promise<CertStatusInfo>;
+  /** Waits for an in-flight cert check started elsewhere (if any). */
+  waitForPendingVerification: () => Promise<CertStatusInfo>;
+}
+
 export function setupCertificateAcceptanceLink(
   serverIpInput: HTMLInputElement,
   portInput: HTMLInputElement,
   proxyUrlInput: HTMLInputElement,
   certAcceptanceLink: HTMLElement,
   certLink: HTMLAnchorElement,
-  location: Location = window.location
-): () => void {
+  onStatusChange?: (status: CertStatusInfo) => void,
+  location: Location = window.location,
+  fetchFn: typeof fetch = globalThis.fetch
+): CertLinkController {
+  let abortController: AbortController | null = null;
+  let accepted = false;
+  let certRequired = false;
+  let verified = false;
+  let activeCertUrl: string | null = null;
+  let pendingVerification: Promise<CertStatusInfo> | null = null;
+  let pendingVerificationUrl: string | null = null;
+
+  function notifyStatus(): void {
+    onStatusChange?.({ accepted, required: certRequired, verified });
+  }
+
+  function markAccepted(url: string): void {
+    if (url !== activeCertUrl) {
+      return;
+    }
+    if (!accepted) {
+      console.warn('[CloudXR] Certificate accepted for %s', url);
+    }
+    accepted = true;
+    verified = true;
+    certAcceptanceLink.classList.remove('cert-unverified');
+    certAcceptanceLink.classList.add('cert-accepted');
+    certLink.textContent = `Certificate accepted (${url})`;
+    notifyStatus();
+  }
+
+  function markUnverified(url: string): void {
+    if (url !== activeCertUrl) {
+      return;
+    }
+    accepted = false;
+    verified = false;
+    certAcceptanceLink.classList.remove('cert-accepted');
+    certAcceptanceLink.classList.add('cert-unverified');
+    certLink.textContent = `Click ${url} to accept cert`;
+    notifyStatus();
+  }
+
+  function markPending(url: string): void {
+    if (url !== activeCertUrl) {
+      return;
+    }
+    accepted = false;
+    verified = true;
+    certAcceptanceLink.classList.remove('cert-unverified');
+    certAcceptanceLink.classList.remove('cert-accepted');
+    certLink.textContent = `Click ${url} to accept cert`;
+    notifyStatus();
+  }
+
+  async function checkCert(url: string): Promise<void> {
+    if (url !== activeCertUrl) {
+      return;
+    }
+    // Skip polling while an XR session is active to avoid unnecessary network requests
+    if (document.body.classList.contains('xr-mode')) {
+      return;
+    }
+    if (abortController) {
+      abortController.abort();
+    }
+    abortController = new AbortController();
+    try {
+      await fetchFn(url, { signal: abortController.signal, mode: 'no-cors' });
+      markAccepted(url);
+    } catch (err) {
+      if (err instanceof DOMException && err.name === 'AbortError') {
+        return;
+      }
+      markPending(url);
+      console.warn(
+        '[CloudXR] Certificate not yet accepted — cert polling errors for %s are expected.',
+        url
+      );
+    }
+  }
+
   /**
    * Updates the certificate acceptance link based on current configuration
    * Shows link only when in HTTPS mode without proxy (direct WSS)
    */
-  const updateCertLink = () => {
+  const updateCertLink = (runCertCheck: boolean) => {
     const isHttps = location.protocol === 'https:';
     const hasProxy = proxyUrlInput.value.trim().length > 0;
     const portValue = parseInt(portInput.value, 10);
@@ -388,29 +483,125 @@ export function setupCertificateAcceptanceLink(
 
     // Only show when we have a reasonable cert URL: either the user filled in
     // a server IP, or the page itself is on a local/dev host.
-    if (isHttps && !hasProxy && (serverIpPopulated || isLocalServer(location.hostname))) {
+    certRequired = isHttps && !hasProxy && (serverIpPopulated || isLocalServer(location.hostname));
+    if (certRequired) {
       const effectiveIp = serverIpPopulated ? serverIp : new URL(location.href).hostname;
       const url = `https://${effectiveIp}:${port}/`;
+      activeCertUrl = url;
       certAcceptanceLink.style.display = 'block';
       certLink.href = url;
-      certLink.textContent = `Click ${url} to accept cert`;
+      // Keep blue "unverified" until a probe result is known.
+      markUnverified(url);
+      if (runCertCheck) {
+        void checkCert(url);
+      }
     } else {
+      activeCertUrl = null;
+      accepted = false;
+      verified = false;
+      if (abortController) abortController.abort();
+      certAcceptanceLink.classList.remove('cert-unverified');
+      certAcceptanceLink.classList.remove('cert-accepted');
       certAcceptanceLink.style.display = 'none';
+      notifyStatus();
+    }
+  };
+
+  const onFocus = () => {
+    if (certRequired && activeCertUrl) {
+      void startVerification();
     }
   };
 
-  // Add event listeners to update link when inputs change
-  serverIpInput.addEventListener('input', updateCertLink);
-  portInput.addEventListener('input', updateCertLink);
-  proxyUrlInput.addEventListener('input', updateCertLink);
+  const onInput = () => {
+    updateCertLink(false);
+  };
+  const onCommittedChange = () => {
+    void startVerification();
+  };
+  const onProxyCommittedChange = () => {
+    updateCertLink(false);
+    if (certRequired && activeCertUrl) {
+      void startVerification();
+    }
+  };
 
-  // Initial update after localStorage values are restored
-  setTimeout(updateCertLink, 0);
+  // Typing updates displayed URL/state; committed IP/port changes trigger probes.
+  serverIpInput.addEventListener('input', onInput);
+  portInput.addEventListener('input', onInput);
+  proxyUrlInput.addEventListener('input', onInput);
+  serverIpInput.addEventListener('change', onCommittedChange);
+  serverIpInput.addEventListener('blur', onCommittedChange);
+  portInput.addEventListener('change', onCommittedChange);
+  portInput.addEventListener('blur', onCommittedChange);
+  proxyUrlInput.addEventListener('change', onProxyCommittedChange);
+  proxyUrlInput.addEventListener('blur', onProxyCommittedChange);
+  window.addEventListener('focus', onFocus);
+
+  // Run initial cert state after localStorage restoration.
+  void startVerification();
+
+  async function verifyNow(): Promise<CertStatusInfo> {
+    updateCertLink(false);
+    if (certRequired && activeCertUrl) {
+      await checkCert(activeCertUrl);
+    } else {
+      notifyStatus();
+    }
+    return { accepted, required: certRequired, verified };
+  }
+
+  function startVerification(): Promise<CertStatusInfo> {
+    updateCertLink(false);
+    const currentUrl = certRequired ? activeCertUrl : null;
+    if (pendingVerification && pendingVerificationUrl === currentUrl) {
+      return pendingVerification;
+    }
+    const run = (async () => {
+      if (currentUrl) {
+        await checkCert(currentUrl);
+      } else {
+        notifyStatus();
+      }
+      return { accepted, required: certRequired, verified };
+    })();
+    pendingVerification = run;
+    pendingVerificationUrl = currentUrl;
+    return run.finally(() => {
+      if (pendingVerification === run) {
+        pendingVerification = null;
+        pendingVerificationUrl = null;
+      }
+    });
+  }
+
+  function waitForPendingVerification(): Promise<CertStatusInfo> {
+    if (pendingVerification) {
+      return pendingVerification;
+    }
+    if (certRequired && !verified) {
+      return startVerification();
+    }
+    return Promise.resolve({ accepted, required: certRequired, verified });
+  }
 
-  // Return cleanup function to remove event listeners
-  return () => {
-    serverIpInput.removeEventListener('input', updateCertLink);
-    portInput.removeEventListener('input', updateCertLink);
-    proxyUrlInput.removeEventListener('input', updateCertLink);
+  // Return callable controller with cleanup and verification helpers.
+  const cleanup = () => {
+    serverIpInput.removeEventListener('input', onInput);
+    portInput.removeEventListener('input', onInput);
+    proxyUrlInput.removeEventListener('input', onInput);
+    serverIpInput.removeEventListener('change', onCommittedChange);
+    serverIpInput.removeEventListener('blur', onCommittedChange);
+    portInput.removeEventListener('change', onCommittedChange);
+    portInput.removeEventListener('blur', onCommittedChange);
+    proxyUrlInput.removeEventListener('change', onProxyCommittedChange);
+    proxyUrlInput.removeEventListener('blur', onProxyCommittedChange);
+    window.removeEventListener('focus', onFocus);
+    if (abortController) abortController.abort();
   };
+  const controller = Object.assign(cleanup, {
+    verifyNow,
+    waitForPendingVerification,
+  }) as CertLinkController;
+  return controller;
 }

deps/cloudxr/webxr_client/src/App.tsx

@@ -212,11 +212,11 @@ function App() {
       } else if (iwerWasLoaded) {
         // Include IWER status in the final success message
         cloudXR2DUI.showStatus(
-          'CloudXR.js SDK is supported. Ready to connect!\nUsing IWER (Immersive Web Emulator Runtime) - Emulating Meta Quest 3.',
+          'CloudXR.js SDK is supported.\nUsing IWER (Immersive Web Emulator Runtime) - Emulating Meta Quest 3.',
           'info'
         );
       } else {
-        cloudXR2DUI.showStatus('CloudXR.js SDK is supported. Ready to connect!', 'success');
+        cloudXR2DUI.showStatus('CloudXR.js SDK is supported.', 'success');
       }
 
       setCapabilitiesValid(true);

deps/cloudxr/webxr_client/src/CloudXR2DUI.tsx

@@ -48,6 +48,8 @@ import {
   getResolutionFromInputs,
   setSelectValueIfAvailable,
   setupCertificateAcceptanceLink,
+  type CertLinkController,
+  type CertStatusInfo,
 } from '@helpers/utils';
 import {
   getGridValidationError,
@@ -160,8 +162,9 @@ export class CloudXR2DUI {
     event: string;
     handler: EventListener;
   }> = [];
-  /** Cleanup function for certificate acceptance link */
-  private certLinkCleanup: (() => void) | null = null;
+  /** Certificate link controller (cleanup + verification helpers) */
+  private certLinkController: CertLinkController | null = null;
+  private certStatus: CertStatusInfo = { accepted: true, required: false, verified: true };
 
   /**
    * Creates a new CloudXR2DUI instance
@@ -279,7 +282,7 @@ export class CloudXR2DUI {
     // Default port: HTTP → 49100, HTTPS without proxy → 48322, HTTPS with proxy → 443
     const defaultPort = useSecure ? 48322 : 49100;
     return {
-      serverIP: '127.0.0.1',
+      serverIP: (typeof window !== 'undefined' && window.location.hostname) || '127.0.0.1',
       port: defaultPort,
       useSecureConnection: useSecure,
       perEyeWidth: 2048,
@@ -441,12 +444,16 @@ export class CloudXR2DUI {
     });
 
     // Set up certificate acceptance link and store cleanup function
-    this.certLinkCleanup = setupCertificateAcceptanceLink(
+    this.certLinkController = setupCertificateAcceptanceLink(
       this.serverIpInput,
       this.portInput,
       this.proxyUrlInput,
       this.certAcceptanceLink,
-      this.certLink
+      this.certLink,
+      (status: CertStatusInfo) => {
+        this.certStatus = status;
+        this.updateConnectButtonState();
+      }
     );
   }
 
@@ -515,7 +522,14 @@ export class CloudXR2DUI {
       reprojectionGridCols,
       reprojectionGridRows
     );
-    const combinedConnectMessage = [connectMessage, gridConnectMessage].filter(Boolean).join(' ');
+    const certPending =
+      this.certStatus.required && this.certStatus.verified === true && !this.certStatus.accepted;
+    const certMessage = certPending
+      ? 'Accept the certificate using the link below before connecting.'
+      : '';
+    const combinedConnectMessage = [connectMessage, gridConnectMessage, certMessage]
+      .filter(Boolean)
+      .join('\n');
     if (combinedConnectMessage) {
       this.validationMessageText.textContent = combinedConnectMessage;
       this.validationMessageBox.className = 'validation-message-box show';
@@ -525,7 +539,7 @@ export class CloudXR2DUI {
     }
     // Only update button when idle (don't override "CONNECT (starting...)" or "CONNECT (XR session active)")
     if (this.startButton && this.startButton.innerHTML === 'CONNECT') {
-      const shouldEnable = !resolutionError && !gridError;
+      const shouldEnable = !resolutionError && !gridError && !certPending;
       this.setStartButtonState(!shouldEnable, 'CONNECT');
     }
   }
@@ -747,6 +761,29 @@ export class CloudXR2DUI {
 
       // Create new handler
       this.handleConnectClick = async () => {
+        this.updateConnectButtonState();
+        if (this.certStatus.required && !this.certStatus.accepted && this.certLinkController) {
+          this.setStartButtonState(true, 'CONNECT (waiting for certificate check...)');
+          let certWaitTimeoutId: ReturnType<typeof setTimeout> | null = null;
+          try {
+            await Promise.race([
+              this.certLinkController.verifyNow(),
+              new Promise<void>(resolve => {
+                certWaitTimeoutId = setTimeout(resolve, 500);
+              }),
+            ]);
+          } finally {
+            if (certWaitTimeoutId !== null) {
+              clearTimeout(certWaitTimeoutId);
+            }
+          }
+          this.setStartButtonState(false, 'CONNECT');
+          this.updateConnectButtonState();
+        }
+        if (this.startButton?.disabled) {
+          this.updateConnectButtonState();
+          return;
+        }
         const cfg = this.getConfiguration();
         const resolutionError = getResolutionValidationError(cfg.perEyeWidth, cfg.perEyeHeight);
         const gridError = getGridValidationError(
@@ -821,9 +858,9 @@ export class CloudXR2DUI {
     }
 
     // Clean up certificate acceptance link listeners
-    if (this.certLinkCleanup) {
-      this.certLinkCleanup();
-      this.certLinkCleanup = null;
+    if (this.certLinkController) {
+      this.certLinkController();
+      this.certLinkController = null;
     }
   }
 }