Fix mobile toolbar and LAN websocket auth

Author: DjDeveloperr

client/src/features/simulators/SimulatorMenu.tsx

@@ -18,11 +18,16 @@ interface SimulatorMenuProps {
   isLoading: boolean;
   menuOpen: boolean;
   menuRef: RefObject<HTMLDivElement | null>;
+  onBoot: () => void;
   onChangeSearch: (value: string) => void;
   onCloseMenu: () => void;
   onDismissKeyboard: () => void;
+  onHome: () => void;
+  onOpenAppSwitcher: () => void;
   onOpenBundlePrompt: () => void;
   onOpenUrlPrompt: () => void;
+  onRotateRight: () => void;
+  onShutdown: () => void;
   onStreamEncoderChange: (encoder: StreamEncoder) => void;
   onStreamFpsChange: (fps: StreamFps) => void;
   onStreamQualityChange: (quality: StreamQualityPreset) => void;
@@ -35,6 +40,8 @@ interface SimulatorMenuProps {
   search: string;
   selectedSimulator: SimulatorMetadata | null;
   setSelectedUDID: (udid: string) => void;
+  showBootButton: boolean;
+  showStopButton: boolean;
   streamConfig: StreamConfig;
   streamTransport: StreamTransport;
   touchOverlayVisible: boolean;
@@ -47,11 +54,16 @@ export function SimulatorMenu({
   isLoading,
   menuOpen,
   menuRef,
+  onBoot,
   onChangeSearch,
   onCloseMenu,
   onDismissKeyboard,
+  onHome,
+  onOpenAppSwitcher,
   onOpenBundlePrompt,
   onOpenUrlPrompt,
+  onRotateRight,
+  onShutdown,
   onStreamEncoderChange,
   onStreamFpsChange,
   onStreamQualityChange,
@@ -64,6 +76,8 @@ export function SimulatorMenu({
   search,
   selectedSimulator,
   setSelectedUDID,
+  showBootButton,
+  showStopButton,
   streamConfig,
   streamTransport,
   touchOverlayVisible,
@@ -206,12 +220,61 @@ export function SimulatorMenu({
               </div>
               <div className="menu-divider" />
               <div className="menu-actions">
+                {showBootButton ? (
+                  <button
+                    className="menu-action mobile-menu-action"
+                    onClick={() => {
+                      onBoot();
+                      onCloseMenu();
+                    }}
+                  >
+                    Boot
+                  </button>
+                ) : null}
+                {showStopButton ? (
+                  <button
+                    className="menu-action mobile-menu-action"
+                    onClick={() => {
+                      onShutdown();
+                      onCloseMenu();
+                    }}
+                  >
+                    Stop
+                  </button>
+                ) : null}
                 <button className="menu-action" onClick={onOpenUrlPrompt}>
                   Open URL…
                 </button>
                 <button className="menu-action" onClick={onOpenBundlePrompt}>
                   Launch Bundle…
                 </button>
+                <button
+                  className="menu-action mobile-menu-action"
+                  onClick={() => {
+                    onHome();
+                    onCloseMenu();
+                  }}
+                >
+                  Home
+                </button>
+                <button
+                  className="menu-action mobile-menu-action"
+                  onClick={() => {
+                    onOpenAppSwitcher();
+                    onCloseMenu();
+                  }}
+                >
+                  App Switcher
+                </button>
+                <button
+                  className="menu-action mobile-menu-action"
+                  onClick={() => {
+                    onRotateRight();
+                    onCloseMenu();
+                  }}
+                >
+                  Rotate Right
+                </button>
                 <button
                   className="menu-action"
                   onClick={() => {

client/src/features/toolbar/Toolbar.tsx

@@ -142,11 +142,16 @@ export function Toolbar({
           isLoading={isLoading}
           menuOpen={menuOpen}
           menuRef={menuRef}
+          onBoot={onBoot}
           onChangeSearch={onChangeSearch}
           onCloseMenu={closeMenu}
           onDismissKeyboard={onDismissKeyboard}
+          onHome={onHome}
+          onOpenAppSwitcher={onOpenAppSwitcher}
           onOpenBundlePrompt={onOpenBundlePrompt}
           onOpenUrlPrompt={onOpenUrlPrompt}
+          onRotateRight={onRotateRight}
+          onShutdown={onShutdown}
           onStreamEncoderChange={onStreamEncoderChange}
           onStreamFpsChange={onStreamFpsChange}
           onStreamQualityChange={onStreamQualityChange}
@@ -159,6 +164,8 @@ export function Toolbar({
           search={search}
           selectedSimulator={selectedSimulator}
           setSelectedUDID={setSelectedUDID}
+          showBootButton={showBootButton}
+          showStopButton={showStopButton}
           streamConfig={streamConfig}
           streamTransport={streamTransport}
           touchOverlayVisible={touchOverlayVisible}
@@ -211,23 +218,23 @@ export function Toolbar({
             ) : null}
             <button
               aria-label="Open URL"
-              className="tbtn icon-btn"
+              className="tbtn icon-btn toolbar-mobile-hidden"
               onClick={onOpenUrlPrompt}
               title="Open URL"
             >
               <OpenUrlIcon />
             </button>
             <button
               aria-label="Home"
-              className="tbtn icon-btn"
+              className="tbtn icon-btn toolbar-mobile-hidden"
               onClick={onHome}
               title="Home"
             >
               <HomeIcon />
             </button>
             <button
               aria-label="App Switcher"
-              className="tbtn icon-btn"
+              className="tbtn icon-btn toolbar-mobile-hidden"
               onClick={onOpenAppSwitcher}
               title="App Switcher"
             >
@@ -243,7 +250,7 @@ export function Toolbar({
             </button>
             <button
               aria-label="Rotate Right"
-              className="tbtn icon-btn"
+              className="tbtn icon-btn toolbar-mobile-hidden"
               onClick={onRotateRight}
               title="Rotate Right"
             >

client/src/styles/layout.css

@@ -11,6 +11,9 @@
   align-items: center;
   justify-content: space-between;
   gap: 8px;
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
   height: 40px;
   padding: 0 8px;
   background: var(--toolbar-bg);
@@ -37,8 +40,10 @@
 .toolbar-sim-info {
   display: flex;
   align-items: center;
+  flex: 1 1 0;
   gap: 8px;
   min-width: 0;
+  max-width: 100%;
   overflow: hidden;
 }
 
@@ -59,6 +64,7 @@
 .toolbar-sim-name {
   font-weight: 600;
   font-size: 13px;
+  min-width: 0;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -122,7 +128,6 @@
 
   .toolbar-right {
     flex: 0 0 auto;
-    max-width: 58%;
     min-width: 0;
     overflow: visible;
   }
@@ -142,12 +147,12 @@
     max-width: 96px;
   }
 
-  .toolbar-mobile-hidden {
-    display: inline-flex;
+  .toolbar .toolbar-mobile-hidden {
+    display: none;
   }
 
-  .mobile-menu-action {
-    display: none;
+  .menu-actions .mobile-menu-action {
+    display: block;
   }
 
   .debug-grid {

server/src/auth.rs

@@ -177,15 +177,19 @@ fn origin_allowed_or_absent(config: &Config, headers: &HeaderMap) -> bool {
     headers
         .get(header::ORIGIN)
         .and_then(|value| value.to_str().ok())
-        .map(|origin| origin_is_allowed(config, origin))
+        .map(|origin| origin_is_allowed_for_request(config, headers, origin))
         .unwrap_or(true)
 }
 
 fn origin_allowed(config: &Config, headers: &HeaderMap) -> bool {
     headers
         .get(header::ORIGIN)
         .and_then(|value| value.to_str().ok())
-        .is_some_and(|origin| origin_is_allowed(config, origin))
+        .is_some_and(|origin| origin_is_allowed_for_request(config, headers, origin))
+}
+
+fn origin_is_allowed_for_request(config: &Config, headers: &HeaderMap, origin: &str) -> bool {
+    origin_is_allowed(config, origin) || origin_matches_request_host(headers, origin)
 }
 
 fn origin_is_allowed(config: &Config, origin: &str) -> bool {
@@ -204,6 +208,33 @@ fn origin_is_cors_allowed(config: &Config, origin: &str) -> bool {
     origin == "null" || origin_is_allowed(config, origin)
 }
 
+fn origin_matches_request_host(headers: &HeaderMap, origin: &str) -> bool {
+    let Some(origin_authority) = origin_authority(origin) else {
+        return false;
+    };
+    headers
+        .get(header::HOST)
+        .and_then(|value| value.to_str().ok())
+        .map(normalize_authority)
+        .is_some_and(|host| host == origin_authority)
+}
+
+fn origin_authority(origin: &str) -> Option<String> {
+    let without_scheme = origin
+        .strip_prefix("http://")
+        .or_else(|| origin.strip_prefix("https://"))?;
+    let authority = without_scheme
+        .split_once('/')
+        .map(|(authority, _)| authority)
+        .unwrap_or(without_scheme)
+        .trim();
+    (!authority.is_empty()).then(|| normalize_authority(authority))
+}
+
+fn normalize_authority(authority: &str) -> String {
+    authority.trim().trim_end_matches('.').to_ascii_lowercase()
+}
+
 fn extra_allowed_origins() -> impl Iterator<Item = String> {
     std::env::var("SIMDECK_ALLOWED_ORIGINS")
         .ok()
@@ -331,6 +362,38 @@ mod tests {
         ));
     }
 
+    #[test]
+    fn accepts_cookie_for_same_origin_tailscale_host() {
+        let config = Config::new(
+            4310,
+            PathBuf::from("client/dist"),
+            IpAddr::V4(Ipv4Addr::UNSPECIFIED),
+            Some("192.168.1.50".to_owned()),
+            "auto".to_owned(),
+            false,
+            Some("secret-token".to_owned()),
+            Some("123456".to_owned()),
+        );
+        let mut headers = HeaderMap::new();
+        headers.insert(
+            header::COOKIE,
+            HeaderValue::from_static("simdeck_token=secret-token"),
+        );
+        headers.insert(
+            header::ORIGIN,
+            HeaderValue::from_static("http://100.64.10.20:4310"),
+        );
+        headers.insert(header::HOST, HeaderValue::from_static("100.64.10.20:4310"));
+
+        assert!(api_request_authorized(
+            &config,
+            &Method::GET,
+            &headers,
+            false,
+            None
+        ));
+    }
+
     #[test]
     fn rejects_cross_origin_cookie_without_header_token() {
         let config = config();
@@ -353,6 +416,29 @@ mod tests {
         ));
     }
 
+    #[test]
+    fn rejects_cross_origin_cookie_when_origin_does_not_match_host() {
+        let config = config();
+        let mut headers = HeaderMap::new();
+        headers.insert(
+            header::COOKIE,
+            HeaderValue::from_static("simdeck_token=secret-token"),
+        );
+        headers.insert(
+            header::ORIGIN,
+            HeaderValue::from_static("http://100.64.10.20:4310"),
+        );
+        headers.insert(header::HOST, HeaderValue::from_static("127.0.0.1:4310"));
+
+        assert!(!api_request_authorized(
+            &config,
+            &Method::GET,
+            &headers,
+            false,
+            None
+        ));
+    }
+
     #[test]
     fn accepts_loopback_same_origin_without_existing_token() {
         let config = config();