fix: prevent endless loops (#911)

If the service worker code doesn't intercept a request  properly
we can end up redirecting back to the current page endlessly.

Instead use local storage to count the number of times we have
redirected to the current page and show an error message if it's
too many.

Author: achingbrain

build.js

@@ -306,20 +306,27 @@ const modifyBuiltFiles = {
       // Modify the redirects file last
       await modifyRedirects()
 
-      // create a CSS config file we will use to get the proper CSS filename
-      const indexCssFile = Object.keys(metafile.outputs).find(file => file.endsWith('.css') && file.includes('app'))
-      if (indexCssFile) {
-        const cssConfigContent = `export const CSS_FILENAME = '${path.basename(indexCssFile)}'`
-        await fs.writeFile(path.resolve('dist/ipfs-sw-css-config.js'), cssConfigContent)
-        console.log(`Created dist/ipfs-sw-css-config.js with CSS filename: ${path.basename(indexCssFile)}`)
-      }
+      for (const [file, meta] of Object.entries(metafile.outputs)) {
+        if (meta.entryPoint != null) {
+          console.info(meta.entryPoint, '->', file)
+        }
 
-      // create an app chunk config file we will use to get the proper app chunk filename for importing all the UI dynamically
-      const appChunkFile = Object.keys(metafile.outputs).find(file => file.endsWith('.js') && file.includes('app'))
-      if (appChunkFile) {
-        const appConfigContent = `export const APP_FILENAME = '${path.basename(appChunkFile)}'`
-        await fs.writeFile(path.resolve('dist/ipfs-sw-app-config.js'), appConfigContent)
-        console.log(`Created dist/ipfs-sw-app-config.js with app chunk filename: ${path.basename(appChunkFile)}`)
+        // create an app chunk config file we will use to get the proper app
+        // chunk filename for importing all the UI dynamically
+        if (meta.entryPoint === 'src/ui/index.tsx') {
+          const appConfigContent = `export const APP_FILENAME = '${path.basename(file)}'`
+          await fs.writeFile(path.resolve('dist/ipfs-sw-app-config.js'), appConfigContent)
+          console.log(`Created dist/ipfs-sw-app-config.js with app chunk filename: ${path.basename(file)}`)
+        }
+
+        // create a CSS config file we will use to get the proper CSS filename
+        // TODO: this is too fragile, it only works because there is a only one
+        // css file in the output
+        if (file.endsWith('.css')) {
+          const cssConfigContent = `export const CSS_FILENAME = '${path.basename(file)}'`
+          await fs.writeFile(path.resolve('dist/ipfs-sw-css-config.js'), cssConfigContent)
+          console.log(`Created dist/ipfs-sw-css-config.js with CSS filename: ${path.basename(file)}`)
+        }
       }
     })
   }
@@ -369,7 +376,13 @@ export const buildOptions = {
   format: 'esm',
   entryNames: 'ipfs-sw-[name]-[hash]',
   assetNames: 'ipfs-sw-[name]-[hash]',
-  plugins: [replaceImports, renameSwPlugin, updateVersions, modifyBuiltFiles, excludeFilesPlugin(['.eot?#iefix', '.otf', '.woff', '.woff2'])]
+  plugins: [
+    replaceImports,
+    renameSwPlugin,
+    updateVersions,
+    modifyBuiltFiles,
+    excludeFilesPlugin(['.eot?#iefix', '.otf', '.woff', '.woff2'])
+  ]
 }
 
 const ctx = await esbuild.context(buildOptions)

src/index.tsx

@@ -165,6 +165,31 @@ async function main (): Promise<void> {
     return
   }
 
+  const href = url.toString()
+
+  // if we accidentally install an invalid service worker we will get stuck in
+  // an endless loop of redirects, so count the number of times we have
+  // redirected to this page and halt the redirects if we do it too many times
+  const storageKey = `ipfs-sw-${href}-redirects`
+  const redirects = Number(localStorage.getItem(storageKey) ?? 0)
+
+  if (redirects > 5) {
+    globalThis.serverError = {
+      url: href,
+      title: '502 Too many redirects',
+      error: {
+        name: 'TooManyRedirects',
+        message: 'The current page redirected too many times'
+      },
+      logs: []
+    }
+
+    await renderUi()
+    return
+  }
+
+  localStorage.setItem(storageKey, `${redirects + 1}`)
+
   // service worker is now installed so redirect to path or subdomain for data
   // so it can intercept the request
   window.location.href = url.toString()

src/lib/collecting-logger.ts

@@ -0,0 +1,31 @@
+import { TypedEventEmitter } from '@libp2p/interface'
+import { logger } from '@libp2p/logger'
+import { format } from 'weald/format'
+import type { ComponentLogger, TypedEventTarget } from '@libp2p/interface'
+
+export interface LogEvents {
+  log: CustomEvent<string>
+}
+
+/**
+ * Listen for 'log' events to collect logs for operations
+ */
+export const logEmitter: TypedEventTarget<LogEvents> = new TypedEventEmitter<LogEvents>()
+
+/**
+ * A log implementation that also emits all log lines as 'log' events on the
+ * exported `logEmitter`.
+ */
+export function collectingLogger (prefix?: string): ComponentLogger {
+  return {
+    forComponent (name: string) {
+      return logger(`${prefix == null ? '' : `${prefix}:`}${name}`, {
+        onLog (fmt: string, ...args: any[]): void {
+          logEmitter.safeDispatchEvent('log', {
+            detail: format(fmt.replaceAll('%c', ''), ...args.filter(arg => !`${arg}`.startsWith('color:')))
+          })
+        }
+      })
+    }
+  }
+}

src/lib/logger.ts

@@ -1,5 +1,5 @@
 import { prefixLogger } from '@libp2p/logger'
-import { collectingLogger } from './get-verified-fetch.js'
+import { collectingLogger } from './collecting-logger.js'
 import type { ComponentLogger, Logger } from '@libp2p/interface'
 
 export const uiLogger = prefixLogger('ui')

src/sw/handlers/asset-request-handler.ts

@@ -0,0 +1,48 @@
+import { CURRENT_CACHES } from '../../constants.js'
+import { getSwLogger } from '../../lib/logger.js'
+import { isSubdomainGatewayRequest } from '../../lib/path-or-subdomain.js'
+import type { Handler } from './index.js'
+
+export const assetRequestHandler: Handler = {
+  name: 'asset-request-handler',
+
+  canHandle (url, event) {
+    const isActualSwAsset = /^.+\/(?:ipfs-sw-).+$/.test(event.request.url)
+
+    // if path is not set, then it's a request for index.html which we should
+    // consider a sw asset
+
+    // but only if it's not a subdomain request (root index.html should not be
+    // returned for subdomains)
+    const isIndexHtmlRequest = url.pathname === '/' && !isSubdomainGatewayRequest(url)
+
+    return isActualSwAsset || isIndexHtmlRequest
+  },
+
+  async handle (url: URL, event: FetchEvent) {
+    const log = getSwLogger('asset-handler')
+
+    // return the asset from the cache if it exists, otherwise fetch it.
+    const cache = await caches.open(CURRENT_CACHES.swAssets)
+
+    try {
+      const cachedResponse = await cache.match(event.request)
+
+      if (cachedResponse != null) {
+        return cachedResponse
+      }
+    } catch (err) {
+      log.error('error matching cached response - %e', err)
+    }
+
+    const response = await fetch(event.request)
+
+    try {
+      await cache.put(event.request, response.clone())
+    } catch (err) {
+      log.error('error caching response - %e', err)
+    }
+
+    return response
+  }
+}

src/sw/handlers/config-reload-handler.ts

@@ -0,0 +1,19 @@
+import { QUERY_PARAMS } from '../../lib/constants.js'
+import { updateVerifiedFetch } from '../lib/verified-fetch.js'
+import type { Handler } from './index.js'
+
+export const configReloadHandler: Handler = {
+  name: 'config-reload-handler',
+
+  canHandle (url, event) {
+    return url.searchParams.has(QUERY_PARAMS.RELOAD_CONFIG)
+  },
+
+  async handle () {
+    await updateVerifiedFetch()
+
+    return new Response('Reloaded configuration', {
+      status: 200
+    })
+  }
+}

src/sw/handlers/config-update-handler.ts

@@ -0,0 +1,30 @@
+import { QUERY_PARAMS } from '../../lib/constants.js'
+import { createSearch } from '../../lib/first-hit-helpers.js'
+import { updateConfig } from '../lib/config.js'
+import type { Handler } from './index.js'
+
+export const configUpdateHandler: Handler = {
+  name: 'config-update-handler',
+
+  canHandle (url, event) {
+    return url.searchParams.has(QUERY_PARAMS.CONFIG)
+  },
+
+  async handle (url: URL, event: FetchEvent) {
+    // if there is compressed config in the request, apply it
+    await updateConfig(url, event.request.referrer)
+
+    // remove config param from url and redirect
+    const search = createSearch(url.searchParams, {
+      filter: (key) => key !== QUERY_PARAMS.CONFIG
+    })
+
+    return new Response('Redirecting after config update', {
+      status: 307,
+      headers: {
+        'Content-Type': 'text/plain',
+        Location: new URL(`${url.protocol}//${url.host}${url.pathname}${search}${url.hash}`).toString()
+      }
+    })
+  }
+}