feat: subdomain detection is resilient (#497)

SgtPooki · web-flow · commit 9c6e2df0b4ab · 2024-12-06T08:25:27.000-08:00
* chore: create 1x1.png

created with `magick -size 1x1 xc:"#ffffff" public/ipfs-sw-1x1.png`

* feat: subdomain detection is resilient

* fix: only check if subdomains are supported once

* chore: self pr suggestions

* fix: unhandled err
diff --git a/public/ipfs-sw-1x1.png b/public/ipfs-sw-1x1.png
diff --git a/src/app.tsx b/src/app.tsx
@@ -1,9 +1,15 @@
-import React, { Suspense } from 'react'
+import React, { Suspense, useEffect } from 'react'
 import { RouteContext } from './context/router-context.jsx'
+import { checkSubdomainSupport } from './lib/check-subdomain-support.js'
 import './app.css'
 
 function App (): JSX.Element {
   const { currentRoute } = React.useContext(RouteContext)
+
+  useEffect(() => {
+    void checkSubdomainSupport()
+  }, [])
+
   return (
     <Suspense fallback={<div>Loading...</div>}>
       {currentRoute?.component != null && <currentRoute.component />}
diff --git a/src/context/config-context.tsx b/src/context/config-context.tsx
@@ -1,5 +1,5 @@
 import React, { createContext, useCallback, useEffect, useState } from 'react'
-import { defaultDebug, defaultDnsJsonResolvers, defaultEnableGatewayProviders, defaultEnableRecursiveGateways, defaultEnableWebTransport, defaultEnableWss, defaultGateways, defaultRouters, getConfig, resetConfig, type ConfigDb } from '../lib/config-db.js'
+import { defaultDebug, defaultDnsJsonResolvers, defaultEnableGatewayProviders, defaultEnableRecursiveGateways, defaultEnableWebTransport, defaultEnableWss, defaultGateways, defaultRouters, defaultSupportsSubdomains, getConfig, resetConfig, type ConfigDb } from '../lib/config-db.js'
 import { getUiComponentLogger } from '../lib/logger.js'
 import type { ComponentLogger } from '@libp2p/logger'
 
@@ -20,7 +20,8 @@ export const ConfigContext = createContext<ConfigContextType>({
   enableWebTransport: defaultEnableWebTransport,
   enableGatewayProviders: defaultEnableGatewayProviders,
   enableRecursiveGateways: defaultEnableRecursiveGateways,
-  debug: defaultDebug
+  debug: defaultDebug(),
+  _supportsSubdomains: defaultSupportsSubdomains
 })
 
 export const ConfigProvider = ({ children }: { children: JSX.Element[] | JSX.Element, expanded?: boolean }): JSX.Element => {
@@ -31,7 +32,8 @@ export const ConfigProvider = ({ children }: { children: JSX.Element[] | JSX.Ele
   const [enableWebTransport, setEnableWebTransport] = useState(defaultEnableWebTransport)
   const [enableGatewayProviders, setEnableGatewayProviders] = useState(defaultEnableGatewayProviders)
   const [enableRecursiveGateways, setEnableRecursiveGateways] = useState(defaultEnableRecursiveGateways)
-  const [debug, setDebug] = useState(defaultDebug)
+  const [debug, setDebug] = useState(defaultDebug())
+  const [_supportsSubdomains, setSupportsSubdomains] = useState(defaultSupportsSubdomains)
   const logger = getUiComponentLogger('config-context')
   const log = logger.forComponent('main')
 
@@ -84,6 +86,9 @@ export const ConfigProvider = ({ children }: { children: JSX.Element[] | JSX.Ele
       case 'debug':
         setDebug(value)
         break
+      case '_supportsSubdomains':
+        setSupportsSubdomains(value)
+        break
       default:
         log.error(`Unknown config key: ${key}`)
         throw new Error(`Unknown config key: ${key}`)
@@ -96,7 +101,7 @@ export const ConfigProvider = ({ children }: { children: JSX.Element[] | JSX.Ele
   }
 
   return (
-    <ConfigContext.Provider value={{ setConfig: setConfigLocal, resetConfig: resetConfigLocal, gateways, routers, dnsJsonResolvers, enableWss, enableWebTransport, enableGatewayProviders, enableRecursiveGateways, debug }}>
+    <ConfigContext.Provider value={{ setConfig: setConfigLocal, resetConfig: resetConfigLocal, gateways, routers, dnsJsonResolvers, enableWss, enableWebTransport, enableGatewayProviders, enableRecursiveGateways, debug, _supportsSubdomains }}>
       {children}
     </ConfigContext.Provider>
   )
diff --git a/src/context/service-worker-context.tsx b/src/context/service-worker-context.tsx
@@ -28,7 +28,7 @@ export const ServiceWorkerProvider = ({ children }): React.JSX.Element => {
 
   useEffect(() => {
     if (isServiceWorkerRegistered) {
-      void findOriginIsolationRedirect(window.location).then((originRedirect) => {
+      void findOriginIsolationRedirect(window.location, uiLogger).then((originRedirect) => {
         if (originRedirect !== null) {
           window.location.replace(originRedirect)
         }
diff --git a/src/lib/check-subdomain-support.ts b/src/lib/check-subdomain-support.ts
@@ -0,0 +1,28 @@
+import { areSubdomainsSupported, setSubdomainsSupported } from './config-db.js'
+import { isSubdomainGatewayRequest } from './path-or-subdomain.js'
+
+/**
+ * Note that this function should only be used by the UI, as it relies on the
+ * loading images from the subdomain gateway to determine if subdomains are
+ * supported.
+ */
+export async function checkSubdomainSupport (): Promise<void> {
+  if (!isSubdomainGatewayRequest(location) && await areSubdomainsSupported() === null) {
+    const testUrl = `${location.protocol}//bafkqaaa.ipfs.${location.host}/ipfs-sw-1x1.png`
+    await new Promise<boolean>((resolve, reject) => {
+      const img = new Image()
+      img.onload = () => {
+        resolve(true)
+      }
+      img.onerror = () => {
+        resolve(false)
+      }
+      img.src = testUrl
+    }).then(async (supportsSubdomains) => {
+      await setSubdomainsSupported(supportsSubdomains)
+    }).catch(() => {
+      // eslint-disable-next-line no-console
+      console.error('Error checking for subdomain support')
+    })
+  }
+}
diff --git a/src/lib/config-db.ts b/src/lib/config-db.ts
@@ -1,7 +1,7 @@
 import { type ComponentLogger, enable } from '@libp2p/logger'
 import { GenericIDB, type BaseDbConfig } from './generic-db.js'
 
-export interface ConfigDb extends BaseDbConfig {
+export interface ConfigDbWithoutPrivateFields extends BaseDbConfig {
   gateways: string[]
   routers: string[]
   dnsJsonResolvers: Record<string, string>
@@ -12,6 +12,14 @@ export interface ConfigDb extends BaseDbConfig {
   debug: string
 }
 
+/**
+ * Private fields for app-only config.
+ * These are not configurable by the user, and are only for programmatic use and changing functionality.
+ */
+export interface ConfigDb extends ConfigDbWithoutPrivateFields {
+  _supportsSubdomains: null | boolean
+}
+
 export const defaultGateways = ['https://trustless-gateway.link']
 export const defaultRouters = ['https://delegated-ipfs.dev']
 export const defaultDnsJsonResolvers: Record<string, string> = {
@@ -21,11 +29,12 @@ export const defaultEnableRecursiveGateways = true
 export const defaultEnableWss = true
 export const defaultEnableWebTransport = false
 export const defaultEnableGatewayProviders = true
+export const defaultSupportsSubdomains: null | boolean = null
 
 /**
  * On dev/testing environments, (inbrowser.dev, localhost:${port}, or 127.0.0.1) we should set the default debug config to helia:sw-gateway*,helia:sw-gateway*:trace so we don't need to go set it manually
  */
-export const defaultDebug = self.location.hostname.search(/localhost|inbrowser\.dev|127\.0\.0\.1/) === -1 ? '' : 'helia:sw-gateway*,helia:sw-gateway*:trace'
+export const defaultDebug = (): string => self.location.hostname.search(/localhost|inbrowser\.dev|127\.0\.0\.1/) === -1 ? '' : 'helia:sw-gateway*,helia:sw-gateway*:trace'
 
 const configDb = new GenericIDB<ConfigDb>('helia-sw', 'config')
 
@@ -40,17 +49,18 @@ export async function resetConfig (logger: ComponentLogger): Promise<void> {
     await configDb.put('enableWebTransport', defaultEnableWebTransport)
     await configDb.put('enableRecursiveGateways', defaultEnableRecursiveGateways)
     await configDb.put('enableGatewayProviders', defaultEnableGatewayProviders)
-    await configDb.put('debug', defaultDebug)
+    await configDb.put('debug', defaultDebug())
+    // leave private/app-only fields as is
   } catch (err) {
     log('error resetting config in db', err)
   } finally {
     configDb.close()
   }
 }
 
-export async function setConfig (config: ConfigDb, logger: ComponentLogger): Promise<void> {
+export async function setConfig (config: ConfigDbWithoutPrivateFields, logger: ComponentLogger): Promise<void> {
   const log = logger.forComponent('set-config')
-  enable(config.debug ?? defaultDebug) // set debug level first.
+  enable(config.debug ?? defaultDebug()) // set debug level first.
   await validateConfig(config, logger)
   try {
     log('config-debug: setting config %O for domain %s', config, window.location.origin)
@@ -62,7 +72,8 @@ export async function setConfig (config: ConfigDb, logger: ComponentLogger): Pro
     await configDb.put('enableWss', config.enableWss)
     await configDb.put('enableWebTransport', config.enableWebTransport)
     await configDb.put('enableGatewayProviders', config.enableGatewayProviders)
-    await configDb.put('debug', config.debug ?? defaultDebug)
+    await configDb.put('debug', config.debug ?? defaultDebug())
+    // ignore private/app-only fields
   } catch (err) {
     log('error setting config in db', err)
   } finally {
@@ -79,8 +90,8 @@ export async function getConfig (logger: ComponentLogger): Promise<ConfigDb> {
   let enableWss
   let enableWebTransport
   let enableGatewayProviders
-
   let debug = ''
+  let _supportsSubdomains = defaultSupportsSubdomains
 
   try {
     await configDb.open()
@@ -96,8 +107,10 @@ export async function getConfig (logger: ComponentLogger): Promise<ConfigDb> {
     enableWebTransport = await configDb.get('enableWebTransport') ?? defaultEnableWebTransport
     enableGatewayProviders = await configDb.get('enableGatewayProviders') ?? defaultEnableGatewayProviders
 
-    debug = await configDb.get('debug') ?? defaultDebug
+    debug = await configDb.get('debug') ?? defaultDebug()
     enable(debug)
+
+    _supportsSubdomains ??= await configDb.get('_supportsSubdomains')
   } catch (err) {
     log('error loading config from db', err)
   } finally {
@@ -124,15 +137,44 @@ export async function getConfig (logger: ComponentLogger): Promise<ConfigDb> {
     enableWss,
     enableWebTransport,
     enableGatewayProviders,
-    debug
+    debug,
+    _supportsSubdomains
   }
 }
 
-export async function validateConfig (config: ConfigDb, logger: ComponentLogger): Promise<void> {
+export async function validateConfig (config: ConfigDbWithoutPrivateFields, logger: ComponentLogger): Promise<void> {
   const log = logger.forComponent('validate-config')
 
   if (!config.enableRecursiveGateways && !config.enableGatewayProviders && !config.enableWss && !config.enableWebTransport) {
     log.error('Config is invalid. At least one of the following must be enabled: recursive gateways, gateway providers, wss, or webtransport.')
     throw new Error('Config is invalid. At least one of the following must be enabled: recursive gateways, gateway providers, wss, or webtransport.')
   }
 }
+
+/**
+ * Private field setters/getters
+ */
+export async function setSubdomainsSupported (supportsSubdomains: boolean, logger?: ComponentLogger): Promise<void> {
+  const log = logger?.forComponent('set-subdomains-supported')
+  try {
+    await configDb.open()
+    await configDb.put('_supportsSubdomains', supportsSubdomains)
+  } catch (err) {
+    log?.('error setting subdomain support in db', err)
+  } finally {
+    configDb.close()
+  }
+}
+
+export async function areSubdomainsSupported (logger?: ComponentLogger): Promise<null | boolean> {
+  const log = logger?.forComponent('are-subdomains-supported')
+  try {
+    await configDb.open()
+    return await configDb.get('_supportsSubdomains') ?? defaultSupportsSubdomains
+  } catch (err) {
+    log?.('error loading subdomain support from db', err)
+  } finally {
+    configDb.close()
+  }
+  return false
+}
diff --git a/src/lib/path-or-subdomain.ts b/src/lib/path-or-subdomain.ts
@@ -1,8 +1,10 @@
 import { base32 } from 'multiformats/bases/base32'
 import { base36 } from 'multiformats/bases/base36'
 import { CID } from 'multiformats/cid'
+import { areSubdomainsSupported } from './config-db.js'
 import { dnsLinkLabelEncoder } from './dns-link-labels.js'
 import { pathRegex, subdomainRegex } from './regex.js'
+import type { ComponentLogger } from '@libp2p/logger'
 
 export const isPathOrSubdomainRequest = (location: Pick<Location, 'host' | 'pathname'>): boolean => {
   return isPathGatewayRequest(location) || isSubdomainGatewayRequest(location)
@@ -22,27 +24,21 @@ export const isPathGatewayRequest = (location: Pick<Location, 'host' | 'pathname
  * Origin isolation check and enforcement
  * https://github.com/ipfs-shipyard/helia-service-worker-gateway/issues/30
  */
-export const findOriginIsolationRedirect = async (location: Pick<Location, 'protocol' | 'host' | 'pathname' | 'search' | 'hash' >): Promise<string | null> => {
+export const findOriginIsolationRedirect = async (location: Pick<Location, 'protocol' | 'host' | 'pathname' | 'search' | 'hash' >, logger?: ComponentLogger): Promise<string | null> => {
+  const log = logger?.forComponent('find-origin-isolation-redirect')
   if (isPathGatewayRequest(location) && !isSubdomainGatewayRequest(location)) {
-    const redirect = await isSubdomainIsolationSupported(location)
-    if (redirect) {
+    log?.trace('checking for subdomain support')
+    if (await areSubdomainsSupported() === true) {
+      log?.trace('subdomain support is enabled')
       return toSubdomainRequest(location)
+    } else {
+      log?.trace('subdomain support is disabled')
     }
   }
+  log?.trace('no need to check for subdomain support', isPathGatewayRequest(location), isSubdomainGatewayRequest(location))
   return null
 }
 
-const isSubdomainIsolationSupported = async (location: Pick<Location, 'protocol' | 'host' | 'pathname'>): Promise<boolean> => {
-  // TODO: do this test once and expose it as cookie / config flag somehow
-  const testUrl = `${location.protocol}//bafkqaaa.ipfs.${location.host}`
-  try {
-    const response: Response = await fetch(testUrl)
-    return response.status === 200
-  } catch (_) {
-    return false
-  }
-}
-
 const toSubdomainRequest = (location: Pick<Location, 'protocol' | 'host' | 'pathname' | 'search' | 'hash'>): string => {
   const segments = location.pathname.split('/').filter(segment => segment !== '')
   const ns = segments[0]
diff --git a/src/pages/config.tsx b/src/pages/config.tsx
@@ -82,7 +82,7 @@ export interface ConfigPageProps extends React.HTMLProps<HTMLElement> {
 // Config Page can be loaded either as a page or as a component in the landing helper-ui page
 const ConfigPage: FunctionComponent<ConfigPageProps> = () => {
   const { gotoPage } = useContext(RouteContext)
-  const { setConfig, resetConfig, gateways, routers, dnsJsonResolvers, debug, enableGatewayProviders, enableRecursiveGateways, enableWss, enableWebTransport } = useContext(ConfigContext)
+  const { setConfig, resetConfig, gateways, routers, dnsJsonResolvers, debug, enableGatewayProviders, enableRecursiveGateways, enableWss, enableWebTransport, _supportsSubdomains } = useContext(ConfigContext)
   const [isSaving, setIsSaving] = useState(false)
   const [error, setError] = useState<Error | null>(null)
   const [resetKey, setResetKey] = useState(0)
@@ -95,7 +95,7 @@ const ConfigPage: FunctionComponent<ConfigPageProps> = () => {
     }
     // we get the iframe origin from a query parameter called 'origin', if this is loaded in an iframe
     const targetOrigin = decodeURIComponent(window.location.hash.split('@origin=')[1])
-    const config = { gateways, routers, dnsJsonResolvers, debug, enableGatewayProviders, enableRecursiveGateways, enableWss, enableWebTransport }
+    const config = { gateways, routers, dnsJsonResolvers, debug, enableGatewayProviders, enableRecursiveGateways, enableWss, enableWebTransport, _supportsSubdomains }
     log.trace('config-page: postMessage config to origin ', config, targetOrigin)
     /**
      * The reload page in the parent window is listening for this message, and then it passes a RELOAD_CONFIG message to the service worker
diff --git a/src/pages/redirects-interstitial.tsx b/src/pages/redirects-interstitial.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect } from 'react'
+import { checkSubdomainSupport } from '../lib/check-subdomain-support.js'
 import { findOriginIsolationRedirect } from '../lib/path-or-subdomain.js'
 import { translateIpfsRedirectUrl } from '../lib/translate-ipfs-redirect-url.js'
 import LoadingPage from './loading.jsx'
@@ -15,11 +16,12 @@ export default function RedirectsInterstitial (): React.JSX.Element {
   const [isSubdomainCheckDone, setIsSubdomainCheckDone] = React.useState<boolean>(false)
   useEffect(() => {
     async function doWork (): Promise<void> {
+      await checkSubdomainSupport()
       setSubdomainRedirectUrl(await findOriginIsolationRedirect(translateIpfsRedirectUrl(window.location.href)))
       setIsSubdomainCheckDone(true)
     }
     void doWork()
-  })
+  }, [])
 
   useEffect(() => {
     if (subdomainRedirectUrl != null && window.location.href !== subdomainRedirectUrl) {
diff --git a/src/sw.ts b/src/sw.ts
@@ -410,7 +410,7 @@ async function storeReponseInCache ({ response, isMutable, cacheKey, event }: St
 
 async function fetchHandler ({ path, request, event }: FetchHandlerArg): Promise<Response> {
   // test and enforce origin isolation before anything else is executed
-  const originLocation = await findOriginIsolationRedirect(new URL(request.url))
+  const originLocation = await findOriginIsolationRedirect(new URL(request.url), swLogger)
   if (originLocation !== null) {
     const body = 'Gateway supports subdomain mode, redirecting to ensure Origin isolation..'
     return new Response(body, {
diff --git a/test-e2e/config-loading.test.ts b/test-e2e/config-loading.test.ts
@@ -1,10 +1,10 @@
 import { testSubdomainRouting as test, expect } from './fixtures/config-test-fixtures.js'
 import { getConfig, setConfig } from './fixtures/set-sw-config.js'
 import { waitForServiceWorker } from './fixtures/wait-for-service-worker.js'
-import type { ConfigDb } from '../src/lib/config-db'
+import type { ConfigDbWithoutPrivateFields } from '../src/lib/config-db.js'
 
 test.describe('ipfs-sw configuration', () => {
-  const testConfig: ConfigDb = {
+  const testConfig: ConfigDbWithoutPrivateFields = {
     gateways: [process.env.KUBO_GATEWAY as string, 'http://example.com'],
     routers: [process.env.KUBO_GATEWAY as string, 'http://example.com/routing/v1'],
     dnsJsonResolvers: {
@@ -21,7 +21,7 @@ test.describe('ipfs-sw configuration', () => {
     await waitForServiceWorker(page)
 
     await setConfig({ page, config: testConfig })
-    expect(await getConfig({ page })).toEqual(testConfig)
+    expect(await getConfig({ page })).toMatchObject(testConfig)
   })
 
   test('root config is propagated to subdomain', async ({ page, baseURL, rootDomain, protocol }) => {
@@ -43,6 +43,6 @@ test.describe('ipfs-sw configuration', () => {
 
     // ensure it equals the root config
     expect(subdomainConfig).toEqual(rootConfig)
-    expect(subdomainConfig).toEqual(testConfig)
+    expect(subdomainConfig).toMatchObject(testConfig)
   })
 })
diff --git a/test-e2e/fixtures/set-sw-config.ts b/test-e2e/fixtures/set-sw-config.ts
@@ -41,7 +41,6 @@ export async function setConfigViaUi ({ page, config }: { page: Page, config: Pa
   await getConfigPage(page).isHidden()
 }
 
-// TODO: ensure that the config can be set on root and loaded properly by subdomains with playwright
 export async function setConfig ({ page, config }: { page: Page, config: Partial<ConfigDb> }): Promise<void> {
   // we can't pass through functions we already have defined, so many of these things are copied over from <root>/src/lib/generic-db.ts
   await page.evaluate(async (configInPage) => {
@@ -118,7 +117,8 @@ export async function getConfig ({ page }: { page: Page }): Promise<ConfigDb> {
       enableWebTransport: await get('enableWebTransport'),
       enableRecursiveGateways: await get('enableRecursiveGateways'),
       enableGatewayProviders: await get('enableGatewayProviders'),
-      debug: await get('debug')
+      debug: await get('debug'),
+      _supportsSubdomains: await get('_supportsSubdomains')
     }
 
     db.close()

Original file line number	Diff line number	Diff line change
`@@ -28,7 +28,7 @@ export const ServiceWorkerProvider = ({ children }): React.JSX.Element => {`
`28`	`28`
`29`	`29`	`useEffect(() => {`
`30`	`30`	`if (isServiceWorkerRegistered) {`
`31`		`- void findOriginIsolationRedirect(window.location).then((originRedirect) => {`
	`31`	`+ void findOriginIsolationRedirect(window.location, uiLogger).then((originRedirect) => {`
`32`	`32`	`if (originRedirect !== null) {`
`33`	`33`	`window.location.replace(originRedirect)`
`34`	`34`	`}`