fix(webclient): Remove restrictive cert validation

Author: blongs-nv

deps/cloudxr/webxr_client/helpers/utils.ts

@@ -362,45 +362,24 @@ 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 Certificate link controller with cleanup and verification helpers
+ * @returns Cleanup function that removes listeners created by this helper
  */
-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,
-  onStatusChange?: (status: CertStatusInfo) => void,
   location: Location = window.location,
   fetchFn: typeof fetch = globalThis.fetch
-): CertLinkController {
+): () => void {
   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 pendingVerification: Promise<void> | null = null;
   let pendingVerificationUrl: string | null = null;
 
-  function notifyStatus(): void {
-    onStatusChange?.({ accepted, required: certRequired, verified });
-  }
-
   function markAccepted(url: string): void {
     if (url !== activeCertUrl) {
       return;
@@ -409,35 +388,17 @@ export function setupCertificateAcceptanceLink(
       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> {
@@ -459,7 +420,7 @@ export function setupCertificateAcceptanceLink(
       if (err instanceof DOMException && err.name === 'AbortError') {
         return;
       }
-      markPending(url);
+      markUnverified(url);
       console.warn(
         '[CloudXR] Certificate not yet accepted — cert polling errors for %s are expected.',
         url
@@ -471,7 +432,7 @@ export function setupCertificateAcceptanceLink(
    * Updates the certificate acceptance link based on current configuration
    * Shows link only when in HTTPS mode without proxy (direct WSS)
    */
-  const updateCertLink = (runCertCheck: boolean) => {
+  const updateCertLink = () => {
     const isHttps = location.protocol === 'https:';
     const hasProxy = proxyUrlInput.value.trim().length > 0;
     const portValue = parseInt(portInput.value, 10);
@@ -490,20 +451,13 @@ export function setupCertificateAcceptanceLink(
       activeCertUrl = url;
       certAcceptanceLink.style.display = 'block';
       certLink.href = url;
-      // 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();
     }
   };
 
@@ -514,13 +468,13 @@ export function setupCertificateAcceptanceLink(
   };
 
   const onInput = () => {
-    updateCertLink(false);
+    updateCertLink();
   };
   const onCommittedChange = () => {
     void startVerification();
   };
   const onProxyCommittedChange = () => {
-    updateCertLink(false);
+    updateCertLink();
     if (certRequired && activeCertUrl) {
       void startVerification();
     }
@@ -541,29 +495,16 @@ export function setupCertificateAcceptanceLink(
   // 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);
+  function startVerification(): Promise<void> {
+    updateCertLink();
     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;
@@ -575,18 +516,7 @@ export function setupCertificateAcceptanceLink(
     });
   }
 
-  function waitForPendingVerification(): Promise<CertStatusInfo> {
-    if (pendingVerification) {
-      return pendingVerification;
-    }
-    if (certRequired && !verified) {
-      return startVerification();
-    }
-    return Promise.resolve({ accepted, required: certRequired, verified });
-  }
-
-  // Return callable controller with cleanup and verification helpers.
-  const cleanup = () => {
+  return () => {
     serverIpInput.removeEventListener('input', onInput);
     portInput.removeEventListener('input', onInput);
     proxyUrlInput.removeEventListener('input', onInput);
@@ -599,9 +529,4 @@ export function setupCertificateAcceptanceLink(
     window.removeEventListener('focus', onFocus);
     if (abortController) abortController.abort();
   };
-  const controller = Object.assign(cleanup, {
-    verifyNow,
-    waitForPendingVerification,
-  }) as CertLinkController;
-  return controller;
 }

deps/cloudxr/webxr_client/src/CloudXR2DUI.tsx

@@ -48,8 +48,6 @@ import {
   getResolutionFromInputs,
   setSelectValueIfAvailable,
   setupCertificateAcceptanceLink,
-  type CertLinkController,
-  type CertStatusInfo,
 } from '@helpers/utils';
 import {
   getGridValidationError,
@@ -162,9 +160,8 @@ export class CloudXR2DUI {
     event: string;
     handler: EventListener;
   }> = [];
-  /** Certificate link controller (cleanup + verification helpers) */
-  private certLinkController: CertLinkController | null = null;
-  private certStatus: CertStatusInfo = { accepted: true, required: false, verified: true };
+  /** Certificate link cleanup function */
+  private certLinkCleanup: (() => void) | null = null;
 
   /**
    * Creates a new CloudXR2DUI instance
@@ -444,16 +441,12 @@ export class CloudXR2DUI {
     });
 
     // Set up certificate acceptance link and store cleanup function
-    this.certLinkController = setupCertificateAcceptanceLink(
+    this.certLinkCleanup = setupCertificateAcceptanceLink(
       this.serverIpInput,
       this.portInput,
       this.proxyUrlInput,
       this.certAcceptanceLink,
-      this.certLink,
-      (status: CertStatusInfo) => {
-        this.certStatus = status;
-        this.updateConnectButtonState();
-      }
+      this.certLink
     );
   }
 
@@ -522,12 +515,7 @@ export class CloudXR2DUI {
       reprojectionGridCols,
       reprojectionGridRows
     );
-    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]
+    const combinedConnectMessage = [connectMessage, gridConnectMessage]
       .filter(Boolean)
       .join('\n');
     if (combinedConnectMessage) {
@@ -539,7 +527,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 && !certPending;
+      const shouldEnable = !resolutionError && !gridError;
       this.setStartButtonState(!shouldEnable, 'CONNECT');
     }
   }
@@ -762,24 +750,6 @@ 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;
@@ -858,9 +828,9 @@ export class CloudXR2DUI {
     }
 
     // Clean up certificate acceptance link listeners
-    if (this.certLinkController) {
-      this.certLinkController();
-      this.certLinkController = null;
+    if (this.certLinkCleanup) {
+      this.certLinkCleanup();
+      this.certLinkCleanup = null;
     }
   }
 }

deps/cloudxr/webxr_client/src/index.html

@@ -449,8 +449,8 @@
 
         /* Certificate Acceptance Link */
         .cert-acceptance-link {
-            background: #fdecea;
-            border: 2px solid #f44336;
+            background: #e3f2fd;
+            border: 2px solid #2196f3;
             border-radius: 4px;
             padding: 12px 16px;
             margin: 8px 0 16px 0;
@@ -461,18 +461,19 @@
         .cert-acceptance-link .cert-icon {
             display: inline-block;
             margin-right: 8px;
+            color: #1565c0;
         }
 
         .cert-acceptance-link a {
-            color: #c62828;
+            color: #1565c0;
             text-decoration: none;
             font-weight: 600;
-            border-bottom: 1px solid #c62828;
+            border-bottom: 1px solid #1565c0;
         }
 
         .cert-acceptance-link a:hover {
-            color: #b71c1c;
-            border-bottom-color: #b71c1c;
+            color: #0d47a1;
+            border-bottom-color: #0d47a1;
         }
 
         .cert-acceptance-link.cert-accepted {
@@ -494,25 +495,6 @@
             border-bottom-color: #1b5e20;
         }
 
-        .cert-acceptance-link.cert-unverified {
-            background: #e3f2fd;
-            border-color: #2196f3;
-        }
-
-        .cert-acceptance-link.cert-unverified .cert-icon {
-            color: #1565c0;
-        }
-
-        .cert-acceptance-link.cert-unverified a {
-            color: #1565c0;
-            border-bottom-color: #1565c0;
-        }
-
-        .cert-acceptance-link.cert-unverified a:hover {
-            color: #0d47a1;
-            border-bottom-color: #0d47a1;
-        }
-
         /* Hide 2D UI when in XR mode */
         body.xr-mode #2d-ui {
             display: none;