fix(web-ui): resolve the base path at runtime for reverse proxies

src_assets/common/assets/web/Apps.vue

@@ -49,7 +49,7 @@
           <div class="app-poster-container">
             <img
               v-if="app['image-path']"
-              :src="'/api/covers/' + index"
+              :src="'./api/covers/' + index"
               class="app-poster"
               :alt="app.name"
               @error="handleImageError"

src_assets/common/assets/web/Navbar.vue

@@ -103,13 +103,13 @@ export default {
   methods: {
     logout() {
       const cacheBuster = Date.now().toString()
-      const logoutPageUrl = new URL('/logout', globalThis.location.href)
+      const logoutPageUrl = new URL('logout', document.baseURI)
       const request = new XMLHttpRequest()
       const finish = () => {
         globalThis.location.replace(logoutPageUrl.toString())
       }
 
-      request.open('GET', '/', true, 'sunshine-logout', cacheBuster)
+      request.open('GET', './', true, 'sunshine-logout', cacheBuster)
       request.setRequestHeader('Cache-Control', 'no-store')
       request.onload = finish
       request.onerror = finish

src_assets/common/assets/web/Troubleshooting.vue

@@ -805,7 +805,7 @@
       },
       created() {
         this._logsCopyTimeout = null;
-        fetch("/api/config")
+        fetch("./api/config")
           .then((r) => r.json())
           .then((r) => {
             this.platform = r.platform;
@@ -1003,7 +1003,7 @@
         },
         ddResetPersistence() {
           this.ddResetPressed = true;
-          apiFetch("/api/reset-display-device-persistence", {
+          apiFetch("./api/reset-display-device-persistence", {
             method: "POST",
             headers: {
               "Content-Type": "application/json"
@@ -1084,7 +1084,7 @@
             });
         },
         refreshVirtualInputStatus() {
-          fetch("/api/virtual-input/status")
+          fetch("./api/virtual-input/status")
             .then((r) => r.json())
             .then((r) => {
               const virtualhid = r.virtualhid || {};
@@ -1216,7 +1216,7 @@
         refreshLicenseStatus() {
           this.licenseBusy = true;
           this.licenseError = '';
-          fetch("/api/virtual-input/license")
+          fetch("./api/virtual-input/license")
             .then(async (response) => {
               const status = await response.json();
               if (!response.ok) {
@@ -1243,7 +1243,7 @@
             body.license_key = this.licenseKey.trim();
           }
 
-          apiFetch("/api/virtual-input/license", {
+          apiFetch("./api/virtual-input/license", {
             method: "POST",
             headers: {
               "Content-Type": "application/json",

src_assets/common/assets/web/index.html

@@ -4,7 +4,24 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <base href="/" />
+    <script>
+      // Resolve the web UI's base path from the current URL, so the UI also works when a reverse proxy
+      // serves it under a sub-path (for example https://example.com/sunshine/). Assets, API requests and
+      // vue-router resolve against this <base>. Keep the route names in sync with the routes in router.js.
+      (function () {
+        var routes = ['apps', 'clients', 'config', 'featured', 'logout', 'password', 'pin', 'troubleshooting', 'welcome'];
+        var segments = location.pathname.split('/');
+        // Drop the final path segment; it is empty when the path ends with a slash.
+        segments.pop();
+        // A route visited with a trailing slash (for example /logout/) leaves its name as the last segment.
+        if (segments.length > 1 && routes.indexOf(segments[segments.length - 1]) !== -1) {
+          segments.pop();
+        }
+        var base = document.createElement('base');
+        base.href = segments.join('/') + '/';
+        document.head.appendChild(base);
+      })();
+    </script>
     <title>Sunshine</title>
     <link rel="icon" type="image/x-icon" href="/images/sunshine.ico" />
   </head>

src_assets/common/assets/web/router.js

@@ -6,7 +6,7 @@ import { createRouter, createWebHistory } from 'vue-router'
  * Lazy page imports keep the source split into focused components while the
  * server serves the same index document for every browser route.
  */
-const routes = [
+export const routes = [
   { path: '/', component: () => import('./Home.vue') },
   { path: '/apps', component: () => import('./Apps.vue') },
   { path: '/clients', redirect: '/' },

tests/web/Troubleshooting.test.js

@@ -21,10 +21,10 @@ import en from '../../src_assets/common/assets/web/public/assets/locale/en.json'
  */
 async function mountTroubleshooting(platform, gamepadDriver, licenseStatus = {}, permissions = [], i18n = null) {
   vi.stubGlobal('fetch', vi.fn(async (url) => {
-    if (url === '/api/config') {
+    if (url === './api/config') {
       return { json: async () => ({ platform, gamepad_driver: gamepadDriver }) }
     }
-    if (url === '/api/virtual-input/status') {
+    if (url === './api/virtual-input/status') {
       return {
         json: async () => ({
           virtualhid: {
@@ -37,7 +37,7 @@ async function mountTroubleshooting(platform, gamepadDriver, licenseStatus = {},
         }),
       }
     }
-    if (url === '/api/virtual-input/license') {
+    if (url === './api/virtual-input/license') {
       return { ok: true, json: async () => ({ service_available: true, state: 'licensed', licensed: true, ...licenseStatus }) }
     }
     if (url === './api/permissions') {
@@ -243,7 +243,7 @@ describe('virtual input troubleshooting', () => {
     expect(status.attributes('title')).toBe('troubleshooting.driver_status_compatible')
     expect(status.attributes('role')).toBeUndefined()
     expect(status.attributes('tabindex')).toBeUndefined()
-    expect(fetch).toHaveBeenCalledWith('/api/virtual-input/status')
+    expect(fetch).toHaveBeenCalledWith('./api/virtual-input/status')
     wrapper.unmount()
   })
 

tests/web/base_path.test.js

@@ -0,0 +1,91 @@
+import { readdirSync, readFileSync } from 'node:fs'
+import { dirname, join, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { describe, expect, it } from 'vitest'
+
+import { routes } from '../../src_assets/common/assets/web/router.js'
+
+const webRoot = resolve(dirname(fileURLToPath(import.meta.url)), '../../src_assets/common/assets/web')
+const indexHtml = readFileSync(join(webRoot, 'index.html'), 'utf8')
+
+/**
+ * @brief Extract the classic inline script that resolves the base path from index.html.
+ *
+ * @return {string} Inline script source.
+ */
+function baseScriptSource() {
+  const match = /<script>([\s\S]*?)<\/script>/.exec(indexHtml)
+  expect(match).not.toBeNull()
+  return match[1]
+}
+
+/**
+ * @brief Run the index.html base path script for a URL path in an isolated document.
+ *
+ * @param {string} pathname Path the browser requested.
+ * @return {string|null} The href attribute of the inserted base element.
+ */
+function resolveBase(pathname) {
+  const doc = document.implementation.createHTMLDocument('Sunshine')
+  new Function('location', 'document', baseScriptSource())({ pathname }, doc)
+  return doc.querySelector('base')?.getAttribute('href') ?? null
+}
+
+/**
+ * @brief List web UI source files that are bundled by Vite.
+ *
+ * @param {string} dir Directory to scan.
+ * @return {string[]} Absolute paths of .js and .vue files outside public assets.
+ */
+function sourceFiles(dir) {
+  return readdirSync(dir, { withFileTypes: true }).flatMap(entry => {
+    const path = join(dir, entry.name)
+    if (entry.isDirectory()) {
+      return entry.name === 'public' ? [] : sourceFiles(path)
+    }
+    return /\.(js|vue)$/.test(entry.name) ? [path] : []
+  })
+}
+
+describe('web UI base path', () => {
+  it.each([
+    ['/', '/'],
+    ['/config', '/'],
+    ['/logout/', '/'],
+    ['/unknown', '/'],
+    ['/apps/unknown', '/'],
+    ['/sunshine/', '/sunshine/'],
+    ['/sunshine/config', '/sunshine/'],
+    ['/sunshine/troubleshooting/', '/sunshine/'],
+    ['/sunshine/unknown', '/sunshine/'],
+    ['/proxy/sunshine/pin', '/proxy/sunshine/'],
+  ])('resolves %s to base %s', (pathname, expected) => {
+    expect(resolveBase(pathname)).toBe(expected)
+  })
+
+  it('knows every top-level route defined in the router', () => {
+    const routeNames = routes
+      .map(route => route.path.split('/')[1])
+      .filter(name => name && !name.startsWith(':'))
+    const script = baseScriptSource()
+    const scriptRoutes = JSON.parse(/var routes = (\[[^\]]*\]);/.exec(script)[1].replaceAll("'", '"'))
+
+    expect(scriptRoutes.toSorted()).toEqual(routeNames.toSorted())
+  })
+
+  it('does not hard-code a root base element', () => {
+    expect(indexHtml).not.toMatch(/<base\s/)
+  })
+
+  // Vite rewrites public asset URLs such as /images/... relative to the bundle, but not API request URLs.
+  it('does not request the API from the domain root', () => {
+    const rootRelative = /["'`]\/api\//
+    const offenders = sourceFiles(webRoot)
+      .flatMap(file => readFileSync(file, 'utf8')
+        .split('\n')
+        .filter(line => rootRelative.test(line))
+        .map(line => `${file}: ${line.trim()}`))
+
+    expect(offenders).toEqual([])
+  })
+})

vite.config.js

@@ -60,7 +60,7 @@ export default defineConfig({
             vue: 'vue/dist/vue.esm-bundler.js'
         }
     },
-    base: '/',
+    base: './',
     plugins: [
         vue(),
         emitTrayIconsPlugin,