From b89c11336514d541ad25de564dcf0561c0b24e58 Mon Sep 17 00:00:00 2001
From: Will Norris <will@tailscale.com>
Date: Thu, 11 Jan 2024 13:58:25 -0800
Subject: [PATCH] client/web: skip connectivity check on https

The manage client always listens on http (non-secure) port 5252.  If the
login client is loaded over https, then the connectivity check to `/ok`
will fail with a mixed-content error. Mixed-content enforcement is a
browser setting that we have no control over, so there's no way around
this.

In this case of the login client being loaded over https, we skip the
connectivity check entirely.  We will always render the sign-in button,
though we don't know for sure if the user has connectivity, so we
provide some additional help text in case they have trouble signing in.

Updates hassio-addons/addon-tailscale#314

Signed-off-by: Will Norris <will@tailscale.com>
---
 client/web/src/components/login-toggle.tsx | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/client/web/src/components/login-toggle.tsx b/client/web/src/components/login-toggle.tsx
index 79bc9efed..4fe416509 100644
--- a/client/web/src/components/login-toggle.tsx
+++ b/client/web/src/components/login-toggle.tsx
@@ -95,9 +95,16 @@ function LoginPopoverContent({
   const [canConnectOverTS, setCanConnectOverTS] = useState<boolean>(false)
   const [isRunningCheck, setIsRunningCheck] = useState<boolean>(false)
 
+  // Whether the current page is loaded over HTTPS.
+  // If it is, then the connectivity check to the management client
+  // will fail with a mixed-content error.
+  const isHTTPS = window.location.protocol === "https:"
+
   const checkTSConnection = useCallback(() => {
-    if (auth.viewerIdentity) {
-      setCanConnectOverTS(true) // already connected over ts
+    if (auth.viewerIdentity || isHTTPS) {
+      // Skip the connectivity check if we either already know we're connected over Tailscale,
+      // or know the connectivity check will fail because the current page is loaded over HTTPS.
+      setCanConnectOverTS(true)
       return
     }
     // Otherwise, test connection to the ts IP.
@@ -111,7 +118,7 @@ function LoginPopoverContent({
         setIsRunningCheck(false)
       })
       .catch(() => setIsRunningCheck(false))
-  }, [auth.viewerIdentity, isRunningCheck, node.IPv4])
+  }, [auth.viewerIdentity, isRunningCheck, node.IPv4, isHTTPS])
 
   /**
    * Checking connection for first time on page load.
@@ -193,6 +200,14 @@ function LoginPopoverContent({
                     You can see most of this device's details. To make changes,
                     you need to sign in.
                   </p>
+                  {isHTTPS && (
+                    // we don't know if the user can connect over TS, so
+                    // provide extra tips in case they have trouble.
+                    <p className="text-gray-500 text-xs font-semibold pt-2">
+                      Make sure you are connected to your tailnet, and that your
+                      policy file allows access.
+                    </p>
+                  )}
                   <SignInButton auth={auth} onClick={handleSignInClick} />
                 </>
               )}