client/web: add csrf protection to web client api

Adds csrf protection and hooks up an initial POST request from
the React web client.

Updates tailscale/corp#13775

Signed-off-by: Sonia Appasamy <sonia@tailscale.com>

client/web/src/api.ts

@@ -0,0 +1,32 @@
+let csrfToken: string
+
+// apiFetch wraps the standard JS fetch function
+// with csrf header management.
+export function apiFetch(
+  input: RequestInfo | URL,
+  init?: RequestInit | undefined
+): Promise<Response> {
+  return fetch(input, {
+    ...init,
+    headers: withCsrfToken(init?.headers),
+  }).then((r) => {
+    updateCsrfToken(r)
+    if (!r.ok) {
+      return r.text().then((err) => {
+        throw new Error(err)
+      })
+    }
+    return r
+  })
+}
+
+function withCsrfToken(h?: HeadersInit): HeadersInit {
+  return { ...h, "X-CSRF-Token": csrfToken }
+}
+
+function updateCsrfToken(r: Response) {
+  const tok = r.headers.get("X-CSRF-Token")
+  if (tok) {
+    csrfToken = tok
+  }
+}

client/web/src/components/app.tsx

@@ -3,7 +3,9 @@ import { Footer, Header, IP, State } from "src/components/legacy"
 import useNodeData from "src/hooks/node-data"
 
 export default function App() {
-  const data = useNodeData()
+  // TODO(sonia): use isPosting value from useNodeData
+  // to fill loading states.
+  const { data, updateNode } = useNodeData()
 
   return (
     <div className="py-14">
@@ -15,7 +17,7 @@ export default function App() {
           <main className="container max-w-lg mx-auto mb-8 py-6 px-8 bg-white rounded-md shadow-2xl">
             <Header data={data} />
             <IP data={data} />
-            <State data={data} />
+            <State data={data} updateNode={updateNode} />
           </main>
           <Footer data={data} />
         </>

client/web/src/components/legacy.tsx

@@ -1,5 +1,6 @@
+import cx from "classnames"
 import React from "react"
-import { NodeData } from "src/hooks/node-data"
+import { NodeData, NodeUpdate } from "src/hooks/node-data"
 
 // TODO(tailscale/corp#13775): legacy.tsx contains a set of components
 // that (crudely) implement the pre-2023 web client. These are implemented
@@ -162,9 +163,13 @@ export function IP(props: { data: NodeData }) {
   )
 }
 
-export function State(props: { data: NodeData }) {
-  const { data } = props
-
+export function State({
+  data,
+  updateNode,
+}: {
+  data: NodeData
+  updateNode: (update: NodeUpdate) => void
+}) {
   switch (data.Status) {
     case "NeedsLogin":
     case "NoState":
@@ -232,25 +237,20 @@ export function State(props: { data: NodeData }) {
               device name or IP address above.
             </p>
           </div>
-          <div className="mb-4">
-            <a href="#" className="mb-4 js-advertiseExitNode">
-              {data.AdvertiseExitNode ? (
-                <button
-                  className="button button-red button-medium"
-                  id="enabled"
-                >
-                  Stop advertising Exit Node
-                </button>
-              ) : (
-                <button
-                  className="button button-blue button-medium"
-                  id="enabled"
-                >
-                  Advertise as Exit Node
-                </button>
-              )}
-            </a>
-          </div>
+          <button
+            className={cx("button button-medium mb-4", {
+              "button-red": data.AdvertiseExitNode,
+              "button-blue": !data.AdvertiseExitNode,
+            })}
+            id="enabled"
+            onClick={() =>
+              updateNode({ AdvertiseExitNode: !data.AdvertiseExitNode })
+            }
+          >
+            {data.AdvertiseExitNode
+              ? "Stop advertising Exit Node"
+              : "Advertise as Exit Node"}
+          </button>
         </>
       )
   }

client/web/src/hooks/node-data.ts

@@ -1,4 +1,5 @@
-import { useEffect, useState } from "react"
+import { useCallback, useEffect, useState } from "react"
+import { apiFetch } from "src/api"
 
 export type NodeData = {
   Profile: UserProfile
@@ -22,16 +23,104 @@ export type UserProfile = {
   ProfilePicURL: string
 }
 
+export type NodeUpdate = {
+  AdvertiseRoutes?: string
+  AdvertiseExitNode?: boolean
+  Reauthenticate?: boolean
+  ForceLogout?: boolean
+}
+
 // useNodeData returns basic data about the current node.
 export default function useNodeData() {
   const [data, setData] = useState<NodeData>()
+  const [isPosting, setIsPosting] = useState<boolean>(false)
 
-  useEffect(() => {
-    fetch("/api/data")
-      .then((response) => response.json())
-      .then((json) => setData(json))
+  const fetchNodeData = useCallback(() => {
+    apiFetch("/api/data")
+      .then((r) => r.json())
+      .then((data) => setData(data))
       .catch((error) => console.error(error))
-  }, [])
+  }, [setData])
 
-  return data
+  const updateNode = useCallback(
+    (update: NodeUpdate) => {
+      // The contents of this function are mostly copied over
+      // from the legacy client's web.html file.
+      // It makes all data updates through one API endpoint.
+      // As we build out the web client in React,
+      // this endpoint will eventually be deprecated.
+
+      if (isPosting || !data) {
+        return
+      }
+      setIsPosting(true)
+
+      update = {
+        // Default to current data value for any unset fields.
+        AdvertiseRoutes:
+          update.AdvertiseRoutes !== undefined
+            ? update.AdvertiseRoutes
+            : data.AdvertiseRoutes,
+        AdvertiseExitNode:
+          update.AdvertiseExitNode !== undefined
+            ? update.AdvertiseExitNode
+            : data.AdvertiseExitNode,
+      }
+
+      const urlParams = new URLSearchParams(window.location.search)
+      const nextParams = new URLSearchParams({ up: "true" })
+      const token = urlParams.get("SynoToken")
+      if (token) {
+        nextParams.set("SynoToken", token)
+      }
+      const search = nextParams.toString()
+      const url = `/api/data${search ? `?${search}` : ""}`
+
+      var body, contentType: string
+
+      if (data.IsUnraid) {
+        const params = new URLSearchParams()
+        params.append("csrf_token", data.UnraidToken)
+        params.append("ts_data", JSON.stringify(update))
+        body = params.toString()
+        contentType = "application/x-www-form-urlencoded;charset=UTF-8"
+      } else {
+        body = JSON.stringify(update)
+        contentType = "application/json"
+      }
+
+      apiFetch(url, {
+        method: "POST",
+        headers: { Accept: "application/json", "Content-Type": contentType },
+        body: body,
+      })
+        .then((r) => r.json())
+        .then((r) => {
+          setIsPosting(false)
+          const err = r["error"]
+          if (err) {
+            throw new Error(err)
+          }
+          const url = r["url"]
+          if (url) {
+            if (data.IsUnraid) {
+              window.open(url, "_blank")
+            } else {
+              document.location.href = url
+            }
+          }
+          fetchNodeData()
+        })
+        .catch((err) => alert("Failed operation: " + err.message))
+    },
+    [data]
+  )
+
+  useEffect(
+    fetchNodeData,
+    // Initial data load.
+    []
+  )
+
+  return { data, updateNode, isPosting }
 }