client/web: extract web client from cli package

move the tailscale web client out of the cmd/tailscale/cli package, into a new client/web package. The remaining cli/web.go file is still responsible for parsing CLI flags and such, and then calls into client/web. This will allow the web client to be hooked into from other contexts (for example, from a tsnet server), and provide a dedicated space to add more functionality to this client. Updates tailscale/corp#13775 Signed-off-by: Will Norris <will@tailscale.com>
2025-08-11 21:27:31 +00:00 · 2023-08-08 16:58:45 -07:00
parent 69f1324c9e
commit f9066ac1f4
8 changed files with 521 additions and 488 deletions
--- a/client/web/auth-redirect.html
+++ b/client/web/auth-redirect.html
@@ -0,0 +1,57 @@
+<html>
+<head>
+	<title>Redirecting...</title>
+	<style>
+		html,
+		body {
+			height: 100%;
+		}
+
+		html {
+			background-color: rgb(249, 247, 246);
+			font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+			line-height: 1.5;
+			-webkit-text-size-adjust: 100%;
+			-webkit-font-smoothing: antialiased;
+			-moz-osx-font-smoothing: grayscale;
+		}
+
+		body {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+		}
+
+		.spinner {
+			margin-bottom: 2rem;
+			border: 4px rgba(112, 110, 109, 0.5) solid;
+			border-left-color: transparent;
+			border-radius: 9999px;
+			width: 4rem;
+			height: 4rem;
+			-webkit-animation: spin 700ms linear infinite;
+      animation: spin 800ms linear infinite;
+		}
+
+		.label {
+			color: rgb(112, 110, 109);
+			padding-left: 0.4rem;
+		}
+
+		@-webkit-keyframes spin {
+			to {
+				transform: rotate(360deg);
+			}
+		}
+
+		@keyframes spin {
+			to {
+				transform: rotate(360deg);
+			}
+		}
+	</style>
+</head> <body>
+	<div class="spinner"></div>
+	<div class="label">Redirecting...</div>
+</body>
--- a/client/web/web.css
+++ b/client/web/web.css
--- a/client/web/web.go
+++ b/client/web/web.go
@@ -0,0 +1,446 @@
+// Copyright (c) Tailscale Inc & AUTHORS
+// SPDX-License-Identifier: BSD-3-Clause
+
+// Package web provides the Tailscale client for web.
+package web
+
+import (
+	"bytes"
+	"context"
+	"crypto/tls"
+	_ "embed"
+	"encoding/json"
+	"encoding/xml"
+	"fmt"
+	"html/template"
+	"io"
+	"log"
+	"net/http"
+	"net/netip"
+	"net/url"
+	"os"
+	"os/exec"
+	"strings"
+
+	"tailscale.com/client/tailscale"
+	"tailscale.com/envknob"
+	"tailscale.com/ipn"
+	"tailscale.com/ipn/ipnstate"
+	"tailscale.com/licenses"
+	"tailscale.com/net/netutil"
+	"tailscale.com/tailcfg"
+	"tailscale.com/util/groupmember"
+	"tailscale.com/version/distro"
+)
+
+//go:embed web.html
+var webHTML string
+
+//go:embed web.css
+var webCSS string
+
+//go:embed auth-redirect.html
+var authenticationRedirectHTML string
+
+var tmpl *template.Template
+
+var localClient tailscale.LocalClient
+
+func init() {
+	tmpl = template.Must(template.New("web.html").Parse(webHTML))
+	template.Must(tmpl.New("web.css").Parse(webCSS))
+}
+
+type tmplData struct {
+	Profile           tailcfg.UserProfile
+	SynologyUser      string
+	Status            string
+	DeviceName        string
+	IP                string
+	AdvertiseExitNode bool
+	AdvertiseRoutes   string
+	LicensesURL       string
+	TUNMode           bool
+	IsSynology        bool
+	DSMVersion        int // 6 or 7, if IsSynology=true
+	IsUnraid          bool
+	UnraidToken       string
+	IPNVersion        string
+}
+
+type postedData struct {
+	AdvertiseRoutes   string
+	AdvertiseExitNode bool
+	Reauthenticate    bool
+	ForceLogout       bool
+}
+
+// authorize returns the name of the user accessing the web UI after verifying
+// whether the user has access to the web UI. The function will write the
+// error to the provided http.ResponseWriter.
+// Note: This is different from a tailscale user, and is typically the local
+// user on the node.
+func authorize(w http.ResponseWriter, r *http.Request) (string, error) {
+	switch distro.Get() {
+	case distro.Synology:
+		user, err := synoAuthn()
+		if err != nil {
+			http.Error(w, err.Error(), http.StatusUnauthorized)
+			return "", err
+		}
+		if err := authorizeSynology(user); err != nil {
+			http.Error(w, err.Error(), http.StatusForbidden)
+			return "", err
+		}
+		return user, nil
+	case distro.QNAP:
+		user, resp, err := qnapAuthn(r)
+		if err != nil {
+			http.Error(w, err.Error(), http.StatusUnauthorized)
+			return "", err
+		}
+		if resp.IsAdmin == 0 {
+			http.Error(w, err.Error(), http.StatusForbidden)
+			return "", err
+		}
+		return user, nil
+	}
+	return "", nil
+}
+
+// authorizeSynology checks whether the provided user has access to the web UI
+// by consulting the membership of the "administrators" group.
+func authorizeSynology(name string) error {
+	yes, err := groupmember.IsMemberOfGroup("administrators", name)
+	if err != nil {
+		return err
+	}
+	if !yes {
+		return fmt.Errorf("not a member of administrators group")
+	}
+	return nil
+}
+
+type qnapAuthResponse struct {
+	AuthPassed int    `xml:"authPassed"`
+	IsAdmin    int    `xml:"isAdmin"`
+	AuthSID    string `xml:"authSid"`
+	ErrorValue int    `xml:"errorValue"`
+}
+
+func qnapAuthn(r *http.Request) (string, *qnapAuthResponse, error) {
+	user, err := r.Cookie("NAS_USER")
+	if err != nil {
+		return "", nil, err
+	}
+	token, err := r.Cookie("qtoken")
+	if err == nil {
+		return qnapAuthnQtoken(r, user.Value, token.Value)
+	}
+	sid, err := r.Cookie("NAS_SID")
+	if err == nil {
+		return qnapAuthnSid(r, user.Value, sid.Value)
+	}
+	return "", nil, fmt.Errorf("not authenticated by any mechanism")
+}
+
+// qnapAuthnURL returns the auth URL to use by inferring where the UI is
+// running based on the request URL. This is necessary because QNAP has so
+// many options, see https://github.com/tailscale/tailscale/issues/7108
+// and https://github.com/tailscale/tailscale/issues/6903
+func qnapAuthnURL(requestUrl string, query url.Values) string {
+	in, err := url.Parse(requestUrl)
+	scheme := ""
+	host := ""
+	if err != nil || in.Scheme == "" {
+		log.Printf("Cannot parse QNAP login URL %v", err)
+
+		// try localhost and hope for the best
+		scheme = "http"
+		host = "localhost"
+	} else {
+		scheme = in.Scheme
+		host = in.Host
+	}
+
+	u := url.URL{
+		Scheme:   scheme,
+		Host:     host,
+		Path:     "/cgi-bin/authLogin.cgi",
+		RawQuery: query.Encode(),
+	}
+
+	return u.String()
+}
+
+func qnapAuthnQtoken(r *http.Request, user, token string) (string, *qnapAuthResponse, error) {
+	query := url.Values{
+		"qtoken": []string{token},
+		"user":   []string{user},
+	}
+	return qnapAuthnFinish(user, qnapAuthnURL(r.URL.String(), query))
+}
+
+func qnapAuthnSid(r *http.Request, user, sid string) (string, *qnapAuthResponse, error) {
+	query := url.Values{
+		"sid": []string{sid},
+	}
+	return qnapAuthnFinish(user, qnapAuthnURL(r.URL.String(), query))
+}
+
+func qnapAuthnFinish(user, url string) (string, *qnapAuthResponse, error) {
+	// QNAP Force HTTPS mode uses a self-signed certificate. Even importing
+	// the QNAP root CA isn't enough, the cert doesn't have a usable CN nor
+	// SAN. See https://github.com/tailscale/tailscale/issues/6903
+	tr := &http.Transport{
+		TLSClientConfig: &tls.Config{InsecureSkipVerify: true},
+	}
+	client := &http.Client{Transport: tr}
+	resp, err := client.Get(url)
+	if err != nil {
+		return "", nil, err
+	}
+	defer resp.Body.Close()
+	out, err := io.ReadAll(resp.Body)
+	if err != nil {
+		return "", nil, err
+	}
+	authResp := &qnapAuthResponse{}
+	if err := xml.Unmarshal(out, authResp); err != nil {
+		return "", nil, err
+	}
+	if authResp.AuthPassed == 0 {
+		return "", nil, fmt.Errorf("not authenticated")
+	}
+	return user, authResp, nil
+}
+
+func synoAuthn() (string, error) {
+	cmd := exec.Command("/usr/syno/synoman/webman/modules/authenticate.cgi")
+	out, err := cmd.CombinedOutput()
+	if err != nil {
+		return "", fmt.Errorf("auth: %v: %s", err, out)
+	}
+	return strings.TrimSpace(string(out)), nil
+}
+
+func authRedirect(w http.ResponseWriter, r *http.Request) bool {
+	if distro.Get() == distro.Synology {
+		return synoTokenRedirect(w, r)
+	}
+	return false
+}
+
+func synoTokenRedirect(w http.ResponseWriter, r *http.Request) bool {
+	if r.Header.Get("X-Syno-Token") != "" {
+		return false
+	}
+	if r.URL.Query().Get("SynoToken") != "" {
+		return false
+	}
+	if r.Method == "POST" && r.FormValue("SynoToken") != "" {
+		return false
+	}
+	// We need a SynoToken for authenticate.cgi.
+	// So we tell the client to get one.
+	_, _ = fmt.Fprint(w, synoTokenRedirectHTML)
+	return true
+}
+
+const synoTokenRedirectHTML = `<html><body>
+Redirecting with session token...
+<script>
+var serverURL = window.location.protocol + "//" + window.location.host;
+var req = new XMLHttpRequest();
+req.overrideMimeType("application/json");
+req.open("GET", serverURL + "/webman/login.cgi", true);
+req.onload = function() {
+	var jsonResponse = JSON.parse(req.responseText);
+	var token = jsonResponse["SynoToken"];
+	document.location.href = serverURL + "/webman/3rdparty/Tailscale/?SynoToken=" + token;
+};
+req.send(null);
+</script>
+</body></html>
+`
+
+// Handle processes all requests for the Tailscale web client.
+func Handle(w http.ResponseWriter, r *http.Request) {
+	ctx := r.Context()
+	if authRedirect(w, r) {
+		return
+	}
+
+	user, err := authorize(w, r)
+	if err != nil {
+		return
+	}
+
+	if r.URL.Path == "/redirect" || r.URL.Path == "/redirect/" {
+		io.WriteString(w, authenticationRedirectHTML)
+		return
+	}
+
+	st, err := localClient.StatusWithoutPeers(ctx)
+	if err != nil {
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+		return
+	}
+	prefs, err := localClient.GetPrefs(ctx)
+	if err != nil {
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+		return
+	}
+
+	if r.Method == "POST" {
+		defer r.Body.Close()
+		var postData postedData
+		type mi map[string]any
+		if err := json.NewDecoder(r.Body).Decode(&postData); err != nil {
+			w.WriteHeader(400)
+			json.NewEncoder(w).Encode(mi{"error": err.Error()})
+			return
+		}
+
+		routes, err := netutil.CalcAdvertiseRoutes(postData.AdvertiseRoutes, postData.AdvertiseExitNode)
+		if err != nil {
+			w.WriteHeader(http.StatusInternalServerError)
+			json.NewEncoder(w).Encode(mi{"error": err.Error()})
+			return
+		}
+		mp := &ipn.MaskedPrefs{
+			AdvertiseRoutesSet: true,
+			WantRunningSet:     true,
+		}
+		mp.Prefs.WantRunning = true
+		mp.Prefs.AdvertiseRoutes = routes
+		log.Printf("Doing edit: %v", mp.Pretty())
+
+		if _, err := localClient.EditPrefs(ctx, mp); err != nil {
+			w.WriteHeader(http.StatusInternalServerError)
+			json.NewEncoder(w).Encode(mi{"error": err.Error()})
+			return
+		}
+
+		w.Header().Set("Content-Type", "application/json")
+		var reauth, logout bool
+		if postData.Reauthenticate {
+			reauth = true
+		}
+		if postData.ForceLogout {
+			logout = true
+		}
+		log.Printf("tailscaleUp(reauth=%v, logout=%v) ...", reauth, logout)
+		url, err := tailscaleUp(r.Context(), st, postData)
+		log.Printf("tailscaleUp = (URL %v, %v)", url != "", err)
+		if err != nil {
+			w.WriteHeader(http.StatusInternalServerError)
+			json.NewEncoder(w).Encode(mi{"error": err.Error()})
+			return
+		}
+		if url != "" {
+			json.NewEncoder(w).Encode(mi{"url": url})
+		} else {
+			io.WriteString(w, "{}")
+		}
+		return
+	}
+
+	profile := st.User[st.Self.UserID]
+	deviceName := strings.Split(st.Self.DNSName, ".")[0]
+	versionShort := strings.Split(st.Version, "-")[0]
+	data := tmplData{
+		SynologyUser: user,
+		Profile:      profile,
+		Status:       st.BackendState,
+		DeviceName:   deviceName,
+		LicensesURL:  licenses.LicensesURL(),
+		TUNMode:      st.TUN,
+		IsSynology:   distro.Get() == distro.Synology || envknob.Bool("TS_FAKE_SYNOLOGY"),
+		DSMVersion:   distro.DSMVersion(),
+		IsUnraid:     distro.Get() == distro.Unraid,
+		UnraidToken:  os.Getenv("UNRAID_CSRF_TOKEN"),
+		IPNVersion:   versionShort,
+	}
+	exitNodeRouteV4 := netip.MustParsePrefix("0.0.0.0/0")
+	exitNodeRouteV6 := netip.MustParsePrefix("::/0")
+	for _, r := range prefs.AdvertiseRoutes {
+		if r == exitNodeRouteV4 || r == exitNodeRouteV6 {
+			data.AdvertiseExitNode = true
+		} else {
+			if data.AdvertiseRoutes != "" {
+				data.AdvertiseRoutes += ","
+			}
+			data.AdvertiseRoutes += r.String()
+		}
+	}
+	if len(st.TailscaleIPs) != 0 {
+		data.IP = st.TailscaleIPs[0].String()
+	}
+
+	buf := new(bytes.Buffer)
+	if err := tmpl.Execute(buf, data); err != nil {
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+		return
+	}
+	w.Write(buf.Bytes())
+}
+
+func tailscaleUp(ctx context.Context, st *ipnstate.Status, postData postedData) (authURL string, retErr error) {
+	if postData.ForceLogout {
+		if err := localClient.Logout(ctx); err != nil {
+			return "", fmt.Errorf("Logout error: %w", err)
+		}
+		return "", nil
+	}
+
+	origAuthURL := st.AuthURL
+	isRunning := st.BackendState == ipn.Running.String()
+
+	forceReauth := postData.Reauthenticate
+	if !forceReauth {
+		if origAuthURL != "" {
+			return origAuthURL, nil
+		}
+		if isRunning {
+			return "", nil
+		}
+	}
+
+	// printAuthURL reports whether we should print out the
+	// provided auth URL from an IPN notify.
+	printAuthURL := func(url string) bool {
+		return url != origAuthURL
+	}
+
+	watchCtx, cancelWatch := context.WithCancel(ctx)
+	defer cancelWatch()
+	watcher, err := localClient.WatchIPNBus(watchCtx, 0)
+	if err != nil {
+		return "", err
+	}
+	defer watcher.Close()
+
+	go func() {
+		if !isRunning {
+			localClient.Start(ctx, ipn.Options{})
+		}
+		if forceReauth {
+			localClient.StartLoginInteractive(ctx)
+		}
+	}()
+
+	for {
+		n, err := watcher.Next()
+		if err != nil {
+			return "", err
+		}
+		if n.ErrMessage != nil {
+			msg := *n.ErrMessage
+			return "", fmt.Errorf("backend error: %v", msg)
+		}
+		if url := n.BrowseToURL; url != nil && printAuthURL(*url) {
+			return *url, nil
+		}
+	}
+}
--- a/client/web/web.html
+++ b/client/web/web.html
@@ -0,0 +1,210 @@
+<!doctype html>
+<html class="bg-gray-50">
+
+<head>
+	<meta charset="utf-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
+	<link rel="shortcut icon"
+		href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAQAAADZc7J/AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQflAx4QGA4EvmzDAAAA30lEQVRIx2NgGAWMCKa8JKM4A8Ovt88ekyLCDGOoyDBJMjExMbFy8zF8/EKsCAMDE8yAPyIwFps48SJIBpAL4AZwvoSx/r0lXgQpDN58EWL5x/7/H+vL20+JFxluQKVe5b3Ke5V+0kQQCamfoYKBg4GDwUKI8d0BYkWQkrLKewYBKPPDHUFiRaiZkBgmwhj/F5IgggyUJ6i8V3mv0kCayDAAeEsklXqGAgYGhgV3CnGrwVciYSYk0kokhgS44/JxqqFpiYSZbEgskd4dEBRk1GD4wdB5twKXmlHAwMDAAACdEZau06NQUwAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyMC0wNy0xNVQxNTo1Mzo0MCswMDowMCVXsDIAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjAtMDctMTVUMTU6NTM6NDArMDA6MDBUCgiOAAAAAElFTkSuQmCC" />
+	<title>Tailscale</title>
+	<style>{{template "web.css"}}</style>
+</head>
+
+<body class="py-14">
+<main class="container max-w-lg mx-auto mb-8 py-6 px-8 bg-white rounded-md shadow-2xl" style="width: 95%">
+	<header class="flex justify-between items-center min-width-0 py-2 mb-8">
+		<svg width="26" height="26" viewBox="0 0 23 23" title="Tailscale" fill="none" xmlns="http://www.w3.org/2000/svg"
+			class="flex-shrink-0 mr-4">
+			<circle opacity="0.2" cx="3.4" cy="3.25" r="2.7" fill="currentColor"></circle>
+			<circle cx="3.4" cy="11.3" r="2.7" fill="currentColor"></circle>
+			<circle opacity="0.2" cx="3.4" cy="19.5" r="2.7" fill="currentColor"></circle>
+			<circle cx="11.5" cy="11.3" r="2.7" fill="currentColor"></circle>
+			<circle cx="11.5" cy="19.5" r="2.7" fill="currentColor"></circle>
+			<circle opacity="0.2" cx="11.5" cy="3.25" r="2.7" fill="currentColor"></circle>
+			<circle opacity="0.2" cx="19.5" cy="3.25" r="2.7" fill="currentColor"></circle>
+			<circle cx="19.5" cy="11.3" r="2.7" fill="currentColor"></circle>
+			<circle opacity="0.2" cx="19.5" cy="19.5" r="2.7" fill="currentColor"></circle>
+		</svg>
+		<div class="flex items-center justify-end space-x-2 w-2/3">
+			{{ with .Profile }}
+			<div class="text-right w-full leading-4">
+				<h4 class="truncate leading-normal">{{.LoginName}}</h4>
+				<div class="text-xs text-gray-500 text-right">
+					<a href="#" class="hover:text-gray-700 js-loginButton">Switch account</a> | <a href="#"
+						class="hover:text-gray-700 js-loginButton">Reauthenticate</a> | <a href="#"
+						class="hover:text-gray-700 js-logoutButton">Logout</a>
+				</div>
+			</div>
+			{{ end }}
+			<div class="relative flex-shrink-0 w-8 h-8 rounded-full overflow-hidden">
+				{{ with .Profile.ProfilePicURL }}
+				<div class="w-8 h-8 flex pointer-events-none rounded-full bg-gray-200"
+					style="background-image: url('{{.}}'); background-size: cover;"></div>
+				{{ else }}
+				<div class="w-8 h-8 flex pointer-events-none rounded-full border border-gray-400 border-dashed"></div>
+				{{ end }}
+			</div>
+		</div>
+	</header>
+	{{ if .IP }}
+	<div
+		class="border border-gray-200 bg-gray-0 rounded-md p-2 pl-3 pr-3 width-full flex items-center justify-between">
+		<div class="flex items-center min-width-0">
+			<svg class="flex-shrink-0 text-gray-600 mr-3 ml-1" xmlns="http://www.w3.org/2000/svg" width="20" height="20"
+				viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+				stroke-linejoin="round">
+				<rect x="2" y="2" width="20" height="8" rx="2" ry="2"></rect>
+				<rect x="2" y="14" width="20" height="8" rx="2" ry="2"></rect>
+				<line x1="6" y1="6" x2="6.01" y2="6"></line>
+				<line x1="6" y1="18" x2="6.01" y2="18"></line>
+			</svg>
+			<div>
+				<h4 class="font-semibold truncate mr-2">{{.DeviceName}}</h4>
+			</div>
+		</div>
+		<h5>{{.IP}}</h5>
+	</div>
+	<p class="mt-1 ml-1 mb-6 text-xs text-gray-600">
+		Debug info: Tailscale {{ .IPNVersion }}, tun={{.TUNMode}}{{ if .IsSynology }}, DSM{{ .DSMVersion}}
+			{{if not .TUNMode}}
+			(<a href="https://tailscale.com/kb/1152/synology-outbound/" class="link-underline text-gray-600" target="_blank"
+				aria-label="Configure outbound synology traffic"
+				rel="noopener noreferrer">outgoing access not configured</a>)
+			{{end}}
+		{{end}}
+	</p>
+	{{ end }}
+	{{ if or (eq .Status "NeedsLogin") (eq .Status "NoState") }}
+	{{ if .IP }}
+	<div class="mb-6">
+		<p class="text-gray-700">Your device's key has expired. Reauthenticate this device by logging in again, or <a
+				href="https://tailscale.com/kb/1028/key-expiry" class="link" target="_blank">learn more</a>.</p>
+	</div>
+	<a href="#" class="mb-4 js-loginButton" target="_blank">
+		<button class="button button-blue w-full">Reauthenticate</button>
+	</a>
+	{{ else }}
+	<div class="mb-6">
+		<h3 class="text-3xl font-semibold mb-3">Log in</h3>
+		<p class="text-gray-700">Get started by logging in to your Tailscale network. Or,&nbsp;learn&nbsp;more at <a
+				href="https://tailscale.com/" class="link" target="_blank">tailscale.com</a>.</p>
+	</div>
+	<a href="#" class="mb-4 js-loginButton" target="_blank">
+		<button class="button button-blue w-full">Log In</button>
+	</a>
+	{{ end }}
+	{{ else if eq .Status "NeedsMachineAuth" }}
+	<div class="mb-4">
+		This device is authorized, but needs approval from a network admin before it can connect to the network.
+	</div>
+	{{ else }}
+	<div class="mb-4">
+		<p>You are connected! Access this device over Tailscale using the device name or IP address above.</p>
+	</div>
+	<div class="mb-4">
+	<a href="#" class="mb-4 js-advertiseExitNode">
+		{{if .AdvertiseExitNode}}
+		<button class="button button-red button-medium" id="enabled">Stop advertising Exit Node</button>
+		{{else}}
+		<button class="button button-blue button-medium" id="enabled">Advertise as Exit Node</button>
+		{{end}}
+	</a>
+	</div>
+	{{ end }}
+</main>
+<footer class="container max-w-lg mx-auto text-center">
+	<a class="text-xs text-gray-500 hover:text-gray-600" href="{{ .LicensesURL }}">Open Source Licenses</a>
+</footer>
+<script>(function () {
+const advertiseExitNode = {{ .AdvertiseExitNode }};
+const isUnraid = {{ .IsUnraid }};
+const unraidCsrfToken = "{{ .UnraidToken }}";
+let fetchingUrl = false;
+var data = {
+	AdvertiseRoutes: "{{ .AdvertiseRoutes }}",
+	AdvertiseExitNode: advertiseExitNode,
+	Reauthenticate: false,
+	ForceLogout: false
+};
+
+function postData(e) {
+	e.preventDefault();
+
+	if (fetchingUrl) {
+		return;
+	}
+
+	fetchingUrl = true;
+	const urlParams = new URLSearchParams(window.location.search);
+	const token = urlParams.get("SynoToken");
+	const nextParams = new URLSearchParams({ up: true });
+	if (token) {
+		nextParams.set("SynoToken", token)
+	}
+	const nextUrl = new URL(window.location);
+	nextUrl.search = nextParams.toString()
+
+	let body = JSON.stringify(data);
+	let contentType = "application/json";
+
+	if (isUnraid) {
+		const params = new URLSearchParams();
+		params.append("csrf_token", unraidCsrfToken);
+		params.append("ts_data", JSON.stringify(data));
+
+		body = params.toString();
+		contentType = "application/x-www-form-urlencoded;charset=UTF-8";
+	}
+
+	const url = nextUrl.toString();
+	fetch(url, {
+		method: "POST",
+		headers: {
+			"Accept": "application/json",
+			"Content-Type": contentType,
+		},
+		body: body
+	}).then(res => res.json()).then(res => {
+		fetchingUrl = false;
+		const err = res["error"];
+		if (err) {
+			throw new Error(err);
+		}
+		const url = res["url"];
+		if (url) {
+			if(isUnraid) {
+				window.open(url, "_blank");
+			} else {
+				document.location.href = url;
+			}
+		} else {
+			location.reload();
+		}
+	}).catch(err => {
+		alert("Failed operation: " + err.message);
+	});
+}
+
+document.querySelectorAll(".js-loginButton").forEach(function (el){
+	el.addEventListener("click", function(e) {
+		data.Reauthenticate = true;
+		postData(e);
+	});
+})
+document.querySelectorAll(".js-logoutButton").forEach(function(el) {
+	el.addEventListener("click", function (e) {
+		data.ForceLogout = true;
+		postData(e);
+	});
+})
+document.querySelectorAll(".js-advertiseExitNode").forEach(function (el) {
+	el.addEventListener("click", function(e) {
+		data.AdvertiseExitNode = !advertiseExitNode;
+		postData(e);
+	});
+})
+
+})();</script>
+</body>
+
+</html>
--- a/client/web/web_test.go
+++ b/client/web/web_test.go
@@ -0,0 +1,64 @@
+// Copyright (c) Tailscale Inc & AUTHORS
+// SPDX-License-Identifier: BSD-3-Clause
+
+package web
+
+import (
+	"net/url"
+	"testing"
+)
+
+func TestQnapAuthnURL(t *testing.T) {
+	query := url.Values{
+		"qtoken": []string{"token"},
+	}
+	tests := []struct {
+		name string
+		in   string
+		want string
+	}{
+		{
+			name: "localhost http",
+			in:   "http://localhost:8088/",
+			want: "http://localhost:8088/cgi-bin/authLogin.cgi?qtoken=token",
+		},
+		{
+			name: "localhost https",
+			in:   "https://localhost:5000/",
+			want: "https://localhost:5000/cgi-bin/authLogin.cgi?qtoken=token",
+		},
+		{
+			name: "IP http",
+			in:   "http://10.1.20.4:80/",
+			want: "http://10.1.20.4:80/cgi-bin/authLogin.cgi?qtoken=token",
+		},
+		{
+			name: "IP6 https",
+			in:   "https://[ff7d:0:1:2::1]/",
+			want: "https://[ff7d:0:1:2::1]/cgi-bin/authLogin.cgi?qtoken=token",
+		},
+		{
+			name: "hostname https",
+			in:   "https://qnap.example.com/",
+			want: "https://qnap.example.com/cgi-bin/authLogin.cgi?qtoken=token",
+		},
+		{
+			name: "invalid URL",
+			in:   "This is not a URL, it is a really really really really really really really really really really really really long string to exercise the URL truncation code in the error path.",
+			want: "http://localhost/cgi-bin/authLogin.cgi?qtoken=token",
+		},
+		{
+			name: "err != nil",
+			in:   "http://192.168.0.%31/",
+			want: "http://localhost/cgi-bin/authLogin.cgi?qtoken=token",
+		},
+	}
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			u := qnapAuthnURL(tt.in, query)
+			if u != tt.want {
+				t.Errorf("expected url: %q, got: %q", tt.want, u)
+			}
+		})
+	}
+}