The client has changed a bit since we introduced the path prefix. It is
now used for two things:
- its original purpose, of ensuring that when the client is run in CGI
mode at arbitrary paths, then relative paths for assets continue to
work
- we also now pass the path to the frontend and use wouter to manage
routes for the various subpages of the client.
When the client is run behind a reverse proxy (as it is in Home
Assistant), it is common for the proxy to rewrite the request so that
the backend application doesn't see the path it's being served at. In
this case, we don't need to call enforcePrefix, since it's already
stripped before it reaches us. However, wouter (or react router
library) still sees the original path in the browser, and needs to know
what part of it is the prefix that needs to be stripped off.
We're handling this by now only calling enforcePrefix when run in CGI
mode. For Home Assistant, or any other platform that runs the client
behind a reverse proxy with a custom path, they will still need to pass
the `-prefix` flag to `tailscale web`, but we will only use it for route
handling in the frontend.
Updates #10261
Signed-off-by: Will Norris <will@tailscale.com>
In Login mode, must first run system auth. But once authorized,
should be able to reach rest of auth logic to check whether the
user can manage the node. This results in showing/hiding the
sign in button in the frontend login toggle.
Updates #10261
Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
Calling DebugPacketFilterRules fails when the node is not logged
in, which was causing 500 errors on the node data endpoint after
logging the node out.
Updates #10261
Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
Add logging of device management type for the web client auth flow. Namely,
this differentiates between viewing a node you do not own, viewing a local
tagged node, viewing a remote tagged node, managing a local node, and
managing a remote node.
Updates https://github.com/tailscale/tailscale/issues/10261
Signed-off-by: Mario Minardi <mario@tailscale.com>
Even if connected to the login client over tailscale, still check
platform auth so the browser can obtain the tokens it needs to make
platform requests complete successfully.
Updates #10261
Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
Updates:
* Card component used throughout instead of custom card class
* SSH toggle changed to non-editable text/status icon in readonly
* Red error text on subnet route input when route post failed
Updates #10261
Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
Precompress webclient assets with precompress util. This cuts our
css and js build sizes to about 1/3 of non-compressed size. Similar
compression done on tsconnect and adminhttp assets.
Updates #10261
Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
This commit makes some restructural changes to how we handle api
posting from the web client frontend.
Now that we're using SWR, we have less of a need for hooks like
useNodeData that return a useSWR response alongside some mutation
callbacks. SWR makes it easy to mutate throughout the UI without
needing access to the original data state in order to reflect
updates. So, we can fetch data without having to tie it to post
callbacks that have to be passed around through components.
In an effort to consolidate our posting endpoints, and make it
easier to add more api handlers cleanly in the future, this change
introduces a new `useAPI` hook that returns a single `api` callback
that can make any changes from any component in the UI. The hook
itself handles using SWR to mutate the relevant data keys, which
get globally reflected throughout the UI.
As a concurrent cleanup, node types are also moved to their own
types.ts file, to consolidate data types across the app.
Updates #10261
Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
Remove padding on top of search bar, remove rounded corners of
bottom border of earch bar, and add auto focus.
Updates #10261
Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
Adds a footer to the device details page that mirrors license and
policy content on other Tailscale clients.
Updates #10261
Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
Add workflow to run yarn lint/test/format-check against the web
client on pull requests.
Updates #10261
Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
The IP property in node data was renamed to IPv4 but refactoring the usage
of the property was missed in this file.
Updates https://github.com/tailscale/tailscale/issues/10261
Signed-off-by: Mario Minardi <mario@tailscale.com>
Updates the IP address on home view to open a copyable list of node
addresses on click. And makes various values on the details view
copyable text items, mirroring the machine admin panel table.
As part of these changes, pulls the AddressCard, NiceIP and QuickCopy
components from the admin panel, with the AddressCard slightly modified
to avoid needing to also pull in the CommandLine component.
A new toaster interface is also added, allowing us to display success
and failure toasts throughout the UI. The toaster code is slightly
modified from it's admin form to avoid the need for some excess
libraries.
Updates #10261
Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
Add left and right padding around entire client so that the cards don't
run into the side of the screen. Also tighten up vertical spacing in
couple of places.
Updates #10261
Signed-off-by: Will Norris <will@tailscale.com>
Add metric logging logic for the web client frontend. This is an initial
pass of adding the base logic, plus a single point where it is used for
validation that the logging is working correctly. More metric logging
calls will follow in subsquent PRs.
Updates https://github.com/tailscale/tailscale/issues/10261
Signed-off-by: Mario Minardi <mario@tailscale.com>
If the login client is inside an iframe, open the management client in a
new window, since it can't be loaded in the frame.
Updates #10261
Signed-off-by: Will Norris <will@tailscale.com>
If the currently selected exit node is offline, render the exit node
selector in red with an error message. Update exit nodes in the dropdown
to indicate if they are offline, and don't allow them to be selected.
This also updates some older color values to use the new colors.
Updates #10261
Signed-off-by: Will Norris <will@tailscale.com>
Makes the following changes:
* Use “link” class in various spots
* Remove button appearance on Exit Node dropdown in readonly mode
* Update `-stone-` colors to `-gray-` (couple spots missed by
original color config commit)
* Pull full ui/button component from admin panel, and update
buttons throughout UI to use this component
* Remove various buttons in readonly view to match mocks
* Add route (and “pending approval”) highlights to Subnet router
settings card
* Delete legacy client button styles from index.css
* Fix overflow of IPv6 address on device details view
Updates #10261
Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
Use the packet filter rules to determine if any device is allowed to
connect on port 5252. This does not check whether a specific device can
connect (since we typically don't know the source device when this is
used). Nor does it specifically check for wide-open ACLs, which is
something we may provide a warning about in the future.
Update the login popover content to display information when the src
device is unable to connect to the dst device over its Tailscale IP. If
we know it's an ACL issue, mention that, otherwise list a couple of
things to check. In both cases, link to a placeholder URL to get more
information about web client connection issues.
Updates #10261
Signed-off-by: Will Norris <will@tailscale.com>
Fixes a TODO in web.authorizeRequest.
`getSession` calls `WhoIs` already. Call `getSession` earlier in
`authorizeRequest` so we can avoid the duplicate `WhoIs` check on
the same request.
Updates #10261
Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
client/web: skip check mode for non-tailscale.com control servers
Only enforce check mode if the control server URL ends in
".tailscale.com". This allows the web client to be used with headscale
(or other) control servers while we work with the project to add check
mode support (tracked in juanfont/headscale#1623).
Updates #10261
Co-authored-by: Sonia Appasamy <sonia@tailscale.com>
Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
Signed-off-by: Will Norris <will@tailscale.com>
6e30c9d1f added eslint to the web client. As a part of that change,
the existing yarn.lock file was removed and yarn install run to build
with a clean yarn dependencies set with latest versions. This caused
a change in the "vite-plugin-rewrite-all" package that fails at build
time with our existing vite config. This is a known bug with some
suggested fixes:
https://vitejs.dev/guide/troubleshooting.html#this-package-is-esm-only
Rather than editing our package.json type, this commit reverts back
the yarn.lock file to it's contents at the commit just before 6e30c9d1f
and then only runs yarn install to add the new eslint packages, rather
than installing the latest versions of all packages.
Updates #10261
Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
Add eslint to require stricter typescript rules, particularly around
required hook dependencies. This commit also updates any files that
were now throwing errors with eslint.
Updates #10261
Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
Enforcing inclusion of our OSS license at the top of .ts and .tsx
files. Also updates any relevant files in the repo that were
previously missing the license comment. An additional `@license`
comment is added to client/web/src/index.tsx to preserve the
license in generated Javascript.
Updates #10261
Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
This adds an expandable section of the login view to allow users to
specify an auth key and an alternate control URL.
Input and Collapsible components and accompanying styles were brought
over from the adminpanel.
Updates #10261
Signed-off-by: Will Norris <will@tailscale.com>
Adds Inter font and uses it as the default for the web UI.
Creates a new /assets folder to house the /fonts, and moves /icons
to live here too.
Updates #10261
Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
Add exit node selector (in full management client only) that allows
for advertising as an exit node, or selecting another exit node on
the Tailnet for use.
Updates #10261
Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
This creates a new /api/up endpoint which is exposed in the login
client, and is solely focused on logging in. Login has been removed from
the nodeUpdate endpoint.
This also adds support in the LoginClientView for a stopped node that
just needs to reconnect, but not necessarily reauthenticate. This
follows the same pattern in `tailscale up` of just setting the
WantRunning user pref.
Updates tailscale/corp#14335
Signed-off-by: Will Norris <will@tailscale.com>
This change removes the existing debug-web-client localapi endpoint
and replaces it with functions passed directly to the web.ServerOpts
when constructing a web.ManageServerMode client.
The debug-web-client endpoint previously handled making noise
requests to the control server via the /machine/webclient/ endpoints.
The noise requests must be made from tailscaled, which has the noise
connection open. But, now that the full client is served from
tailscaled, we no longer need to proxy this request over the localapi.
Updates tailscale/corp#14335
Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
When the viewing user is accessing a webclient not over Tailscale,
they must connect over Tailscale before being able to log into the
full management client, which is served over TS. This change adds
a check that the user is able to access the node's tailscale IP.
If not able to, the signin button is disabled. We'll also be adding
Copy here to help explain to the user that they must connect to
Tailscale before proceeding.
Updates #10261
Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
I don't believe this has ever worked, since we didn't allow POST
requests in the login client. But previously, we were primarily using
the legacy client, so it didn't really matter. Now that we've removed
the legacy client, we have no way to login.
This fixes the login client, allowing it to login, but it still needs to
be refactored to expose a dedicated login method, without exposing all
the node update functionality.
Updates tailscale/corp#14335
Signed-off-by: Will Norris <will@tailscale.com>
No longer using this! Readonly state fully managed via auth endpoint.
Also getting rid of old Legacy server mode.
A #cleanup
Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
We currently disable the exit-node drop down selector when the user is
in read-only mode, but we missed disabling the "Disable" button also.
Previously, it would display an error when clicked.
Updates tailscale/corp#14335
Signed-off-by: Will Norris <will@tailscale.com>
Move Header component inside Router so that links are relative to the
router base URL.
Updates tailscale/corp#14335
Signed-off-by: Will Norris <will@tailscale.com>
In production, the asset handler is receiving requests for pages like
/details, which results in a 404. Instead, if we know the requested file
does not exist, serve the main index page and let wouter route it
appropriately on the frontend.
Updates tailscale/corp/#14335
Signed-off-by: Will Norris <will@tailscale.com>
After logging in, the `?check=now` query string is still present if it
was passed. Reloading the page causes a new check mode to be triggered,
even though the user has an active session. Only trigger the automatic
check mode if the user is not already able to manage the device.
Updates tailscale/corp#14335
Signed-off-by: Will Norris <will@tailscale.com>
Fills /details page with real values, passed back from the /data
endpoint.
Updates tailscale/corp#14335
Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
Initial addition of device details view on the frontend. A little
more backend piping work to come to fill all of the detail fields,
for now using placeholders.
Updates tailscale/corp#14335
Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
We render the readonly view in two situations:
- the client is in login mode, and the device is connected
- the client is in manage mode, but the user does not yet have a session
If the user is not authenticated, and they are not currently on the
Tailscale IP address, render a "Manage" button that will take them to
the Tailcale IP of the device and immediately start check mode.
Still to do is detecting if they have connectivity to the Tailscale IP,
and disabling the button if not.
Updates tailscale/corp#14335
Signed-off-by: Will Norris <will@tailscale.com>
Previously had HMR websocket set to run from a different port
than the http proxy server. This was an old setting carried over
from the corp repo admin panel config. It's messing with hot
reloads when run from the tailscaled web client, as it keeps
causing the full page to refresh each time a connection is made.
Switching back to the default config here fixes things.
Updates tailscale/corp#14335
Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
Don't return CSP headers in dev mode, since that includes a bunch of
extra things like the vite server.
Allow images from any source, which is needed to load user profile
images.
Allow 'unsafe-inline' for various inline scripts and style react uses.
We can eliminate this by using CSP nonce or hash values, but we'll need
to look into the best way to handle that. There appear to be several
react plugins for this, but I haven't evaluated any of them.
Updates tailscale/corp#14335
Signed-off-by: Will Norris <will@tailscale.com>
Require that requests to servers in manage mode are made to the
Tailscale IP (either ipv4 or ipv6) or quad-100. Also set various
security headers on those responses. These might be too restrictive,
but we can relax them as needed.
Allow requests to /ok (even in manage mode) with no checks. This will be
used for the connectivity check from a login client to see if the
management client is reachable.
Updates tailscale/corp#14335
Signed-off-by: Will Norris <will@tailscale.com>
Splits auth session creation into two new endpoints:
/api/auth/session/new - to request a new auth session
/api/auth/session/wait - to block until user has completed auth url
Updates tailscale/corp#14335
Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
Avoids the need to pipe a web client dev flag through the tailscaled
command.
Updates tailscale/corp#14335
Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
Adds a new Mode to the web server, indicating the specific
scenario the constructed server is intended to be run in. Also
starts filling this from the cli/web and ipn/ipnlocal callers.
From cli/web this gets filled conditionally based on whether the
preview web client node cap is set. If not set, the existing
"legacy" client is served. If set, both a login/lobby and full
management client are started (in "login" and "manage" modes
respectively).
Updates tailscale/corp#14335
Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
This completes the migration to setting up authentication state in the
client first before fetching any node data or rendering the client view.
Notable changes:
- `authorizeRequest` is now only enforced on `/api/*` calls (with the
exception of /api/auth, which is handled early because it's needed to
initially setup auth, particularly for synology)
- re-separate the App and WebClient components to ensure that auth is
completed before moving on
- refactor platform auth (synology and QNAP) to fit into this new
structure. Synology no longer returns redirect for auth, but returns
authResponse instructing the client to fetch a SynoToken
Updates tailscale/corp#14335
Signed-off-by: Will Norris <will@tailscale.com>
When the /api/auth response indicates that synology auth is needed,
fetch the SynoToken and store it for future API calls. This doesn't yet
update the server-side code to set the new SynoAuth field.
Updates tailscale/corp#14335
Signed-off-by: Will Norris <will@tailscale.com>
For now this is effectively a noop, since only the ManagementClientView
uses the auth data. That will change soon.
Updates tailscale/corp#14335
Signed-off-by: Will Norris <will@tailscale.com>
This commit makes the following structural changes to the web
client interface. No user-visible changes.
1. Splits login, legacy, readonly, and full management clients into
their own components, and pulls them out into their own view files.
2. Renders the same Login component for all scenarios when the client
is not logged in, regardless of legacy or debug mode. Styling comes
from the existing legacy login, which is removed from legacy.tsx
now that it is shared.
3. Adds a ui folder to hold non-Tailscale-specific components,
starting with ProfilePic, previously housed in app.tsx.
Updates tailscale/corp#14335
Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
Allows for serving the web interface from tailscaled, with the
ability to start and stop the server via localapi endpoints
(/web/start and /web/stop).
This will be used to run the new full management web client,
which will only be accessible over Tailscale (with an extra auth
check step over noise) from the daemon. This switch also allows
us to run the web interface as a long-lived service in environments
where the CLI version is restricted to CGI, allowing us to manage
certain auth state in memory.
ipn/ipnlocal/web is stubbed out in ipn/ipnlocal/web_stub for
ios builds to satisfy ios restriction from adding "text/template"
and "html/template" dependencies.
Updates tailscale/corp#14335
Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
Previously returned errTaggedSource in the case that of any tagged
source. Now distinguishing whether the source was local or remote.
We'll be presenting the two cases with varying copy on the frontend.
Updates tailscale/corp#14335
Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
This commit makes two changes to the web client auth flow error
handling:
1. Properly passes back the error code from the noise request from
the localapi. Previously we were using io.Copy, which was always
setting a 200 response status code.
2. Clean up web client browser sessions on any /wait endpoint error.
This avoids the user getting in a stuck state if something goes
wrong with their auth path.
Updates tailscale/corp#14335
Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
Stores ID from tailcfg.WebClientAuthResponse in browser session
data, and uses ID to hit control server /wait endpoint.
No longer need the control url cached, so removed that from Server.
Also added optional timeNow field, initially to manage time from
tests.
Updates tailscale/corp#14335
Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
Connects serveTailscaleAuth to the localapi webclient endpoint
and pipes auth URLs and session cookies back to the browser to
redirect users from the frontend.
All behind debug flags for now.
Updates tailscale/corp#14335
Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
Moves request authorization back into Server.serve to be run at
the start of any request. Fixes Synology unstable track bug where
client would get stuck unable to auth due to not rendering the
Synology redirect auth html on index.html load.
Updates tailscale/corp#14335
Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
Adds `getTailscaleBrowserSession` to pull the user's session out of
api requests, and `serveTailscaleAuth` to provide the "/api/auth"
endpoint for browser to request auth status and new sessions.
Updates tailscale/corp#14335
Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
