feat: add hotlink column, cross-domain redirect detection (#661)

- add hotlink column to test image embedding via <img src>
- detect cross-domain redirects with status indicator
- hotlink runs first for fast visual feedback
- redirect detection runs once per gateway, shared by all tests
- improved column tooltips
- use CSS Grid for column alignment across rows
- add mobile responsive breakpoints for gateway results table

Author: lidel

scripts/test-gateways.mjs

@@ -44,7 +44,9 @@ function trim (str) {
   return str.length > 7 ? str.slice(0, 7) + '...' : str
 }
 
-(async () => {
+const shouldPrune = process.argv.includes('--prune')
+
+;(async () => {
   const gateways = JSON.parse(await fs.readFile('./gateways.json'))
   const resolvableGateways = []
 
@@ -81,5 +83,8 @@ function trim (str) {
     }
   }
 
-  await fs.writeFile('./gateways.json', JSON.stringify(resolvableGateways, null, '  '))
+  if (shouldPrune) {
+    await fs.writeFile('./gateways.json', JSON.stringify(resolvableGateways, null, '  '))
+    console.log(`\nPruned gateways.json: ${gateways.length} → ${resolvableGateways.length}`)
+  }
 })()

src/Cors.ts

@@ -1,6 +1,7 @@
 import fetchPonyfill from 'fetch-ponyfill'
 import { CheckBase } from './CheckBase.js'
 import { Log } from './Log.js'
+import { checkCrossDomainRedirect } from './checkCrossDomainRedirect.js'
 import { HASH_STRING, HASH_TO_TEST } from './constants.js'
 import type { GatewayNode } from './GatewayNode.js'
 import type { Checkable } from './types.js'
@@ -20,25 +21,51 @@ class Cors extends CheckBase implements Checkable {
     const now = Date.now()
     const gatewayAndHash = `${this.parent.gateway}/ipfs/${HASH_TO_TEST}`
     const testUrl = `${gatewayAndHash}?now=${now}#x-ipfs-companion-no-redirect`
+
+    // Use shared redirect detection result from parent
+    const { confirmedTarget, possibleRedirect, errorStatus } = this.parent.redirectDetection
+    let redirectTarget = confirmedTarget
+
     // response body can be accessed only if fetch was executed when
     // liberal CORS is present (eg. '*')
     try {
       const response = await fetch(testUrl)
       const { status } = response
+      // Also check response.url for redirects that CORS allows
+      const redirect = checkCrossDomainRedirect(response.url, this.parent.gateway)
+      if (redirect != null) {
+        redirectTarget = redirect
+        this.parent.crossDomainRedirect = redirect
+      }
       const text = await response.text()
-      this.tag.title = `Response code: ${status}`
+      this.tag.title = redirectTarget != null
+        ? `Response code: ${status}, redirected to ${redirectTarget}`
+        : `Response code: ${status}`
       if (HASH_STRING === text.trim()) {
-        // this.parent.checked()
-        this.tag.asterisk()
+        this.tag.win()
         this.parent.tag.classList.add('cors')
-      } else {
-        log.debug('The response text did not match the expected string')
-        this.onerror()
-        throw new Error(`URL '${testUrl} does not support CORS`)
+        return
       }
+      // Content mismatch - test failed, don't throw (catch is for fetch failures)
+      log.debug('The response text did not match the expected string')
+      this.onerror()
     } catch (err) {
+      // Only reaches here if fetch itself failed (network/CORS error)
       log.error(err)
-      this.onerror()
+      // Check detection results in priority order (redirect takes precedence over error)
+      if (redirectTarget != null) {
+        this.tag.redirect()
+        this.tag.title = `Redirected to ${redirectTarget}`
+      } else if (possibleRedirect) {
+        this.parent.crossDomainRedirect = 'another gateway'
+        this.tag.redirect()
+        this.tag.title = 'HTTP redirect detected'
+      } else if (errorStatus != null) {
+        this.tag.lose()
+        this.tag.title = `HTTP ${errorStatus} error`
+      } else {
+        this.onerror()
+      }
       throw err
     }
   }
@@ -48,7 +75,8 @@ class Cors extends CheckBase implements Checkable {
   }
 
   onerror (): void {
-    this.tag.empty()
+    this.tag.lose()
+    this.tag.title = 'CORS fetch failed or content mismatch'
   }
 }
 

src/GatewayNode.ts

@@ -1,21 +1,25 @@
 import { URL } from 'url-ponyfill'
 import { Cors } from './Cors.js'
 import { Flag } from './Flag.js'
+import { Hotlink } from './Hotlink.js'
 import { IPNSCheck } from './Ipns.js'
 import { Log } from './Log.js'
 import { Origin } from './Origin.js'
 import { Status } from './Status.js'
 import { Trustless } from './Trustless.js'
 import { UiComponent } from './UiComponent.js'
-import { HASH_TO_TEST } from './constants.js'
+import { HASH_TO_TEST, SLOW_TESTS_DELAY } from './constants.js'
+import { detectCrossDomainRedirect } from './detectCrossDomainRedirect.js'
 import { gatewayHostname } from './gatewayHostname.js'
 import type { Results } from './Results.js'
+import type { RedirectDetectionResult } from './detectCrossDomainRedirect.js'
 
 const log = new Log('GatewayNode')
 
 class GatewayNode extends UiComponent /* implements Checkable */ {
   // tag: Tag
   status: Status
+  hotlink: Hotlink
   cors: Cors
   ipns: IPNSCheck
   origin: Origin
@@ -28,6 +32,9 @@ class GatewayNode extends UiComponent /* implements Checkable */ {
   checkingTime: number
 
   atLeastOneSuccess = false
+  crossDomainRedirect: string | null = null
+  // Shared redirect detection result (run once, used by all tests)
+  redirectDetection: RedirectDetectionResult = { confirmedTarget: null, possibleRedirect: false, errorStatus: null }
 
   constructor (readonly parent: Results, gateway: string, index: unknown) {
     super(parent, 'div', 'Node')
@@ -39,6 +46,9 @@ class GatewayNode extends UiComponent /* implements Checkable */ {
     this.status = new Status(this)
     this.tag.append(this.status.tag)
 
+    this.hotlink = new Hotlink(this)
+    this.tag.append(this.hotlink.tag)
+
     this.cors = new Cors(this)
     this.tag.append(this.cors.tag)
 
@@ -73,42 +83,54 @@ class GatewayNode extends UiComponent /* implements Checkable */ {
 
   public async check (): Promise<void> {
     this.checkingTime = Date.now()
-    // const onFailedCheck = () => { this.status.down = true }
-    // const onSuccessfulCheck = () => { this.status.up = true }
+    const onSuccess = this.onSuccessfulCheck.bind(this)
+
     void this.flag.check().then(() => { log.debug(this.gateway, 'Flag success') })
-    const onlineChecks = [
-      // this.flag.check().then(() => log.debug(this.gateway, 'Flag success')),
-      this.status.check().then(() => { log.debug(this.gateway, 'Status success') }).then(this.onSuccessfulCheck.bind(this)),
-      this.cors.check().then(() => { log.debug(this.gateway, 'CORS success') }).then(this.onSuccessfulCheck.bind(this)),
-      this.ipns.check().then(() => { log.debug(this.gateway, 'IPNS success') }).then(this.onSuccessfulCheck.bind(this)),
-      this.origin.check().then(() => { log.debug(this.gateway, 'Origin success') }).then(this.onSuccessfulCheck.bind(this)),
-      this.trustless.check().then(
-        () => { log.debug(this.gateway, 'Trustless success') }).then(this.onSuccessfulCheck.bind(this))
-    ]
-
-    // we care only about the fastest method to return a success
-    // Promise.race(onlineChecks).catch((err) => {
-    //   log.error('Promise race error', err)
-    // })
-
-    // await Promise.all(onlineChecks).catch(onFailedCheck)
-    await Promise.allSettled(onlineChecks).then((results) => results.map((result) => {
-      return result.status
-    })).then((statusArray) => {
-      if (statusArray.includes('fulfilled')) {
-        // At least promise was successful, which means the gateway is online
-        log.debug(`For gateway '${this.gateway}', at least one promise was successfully fulfilled`)
-        log.debug(this.gateway, 'this.status.up: ', this.status.up)
-        log.debug(this.gateway, 'this.status.down: ', this.status.down)
-        this.status.up = true
-        log.debug(this.gateway, 'this.status.up: ', this.status.up)
-        log.debug(this.gateway, 'this.status.down: ', this.status.down)
-      } else {
-        // No promise was successful, the gateway is down.
-        this.status.down = true
-        log.debug(`For gateway '${this.gateway}', all promises were rejected`)
-      }
+
+    // Start Hotlink immediately (fastest, lightest test - browser-native img loading)
+    const hotlinkPromise = this.hotlink.check()
+      .then(() => { log.debug(this.gateway, 'Hotlink success') })
+      .then(onSuccess)
+      .catch(() => { log.debug(this.gateway, 'Hotlink failed') })
+
+    // Delay other tests to give Hotlink exclusive network access
+    const delayedTestsPromise = new Promise<void>((resolve) => {
+      setTimeout(() => {
+        // Run redirect detection once, share result with all tests
+        const testUrl = `${this.gateway}/ipfs/${HASH_TO_TEST}?now=${Date.now()}#x-ipfs-companion-no-redirect`
+        void detectCrossDomainRedirect(testUrl, this.gateway).then((result) => {
+          this.redirectDetection = result
+          if (result.confirmedTarget != null) {
+            this.crossDomainRedirect = result.confirmedTarget
+          }
+          // Now start all tests (they use this.redirectDetection)
+          const otherTests = [
+            this.cors.check()
+              .then(() => { log.debug(this.gateway, 'CORS success') })
+              .then(onSuccess),
+            this.ipns.check()
+              .then(() => { log.debug(this.gateway, 'IPNS success') })
+              .then(onSuccess),
+            this.origin.check()
+              .then(() => { log.debug(this.gateway, 'Origin success') })
+              .then(onSuccess),
+            this.trustless.check()
+              .then(() => { log.debug(this.gateway, 'Trustless success') })
+              .then(onSuccess)
+          ]
+          void Promise.allSettled(otherTests).then(() => { resolve() })
+        })
+      }, SLOW_TESTS_DELAY)
     })
+
+    // Wait for both Hotlink and delayed tests to complete
+    await Promise.allSettled([hotlinkPromise, delayedTestsPromise])
+
+    // Set status.down only if ALL tests failed
+    if (!this.atLeastOneSuccess) {
+      this.status.down = true
+      log.debug(`Gateway '${this.gateway}' - all tests failed`)
+    }
   }
 
   private onSuccessfulCheck (): void {
@@ -119,21 +141,18 @@ class GatewayNode extends UiComponent /* implements Checkable */ {
       const url = this.link.url
       if (url != null) {
         const host = gatewayHostname(url)
-        // const anchor = document.createElement('a')
-        // anchor.title = host
-        // anchor.href = `${url.toString()}#x-ipfs-companion-no-redirect`
-        // anchor.target = '_blank'
-        // anchor.textContent = host
-        // this.flag.tag.element.remove()
-        // this.link.textContent = ''
-        // this.link.append(this.flag.tag.element, anchor)
         this.link.innerHTML = `<a title="${host}" href="${url.toString()}#x-ipfs-companion-no-redirect" target="_blank">${host}</a>`
       }
       const ms = Date.now() - this.checkingTime
       this.tag.style.order = ms.toString()
       const s = (ms / 1000).toFixed(2)
       this.took.textContent = `${s}s`
     }
+    // Update status if a later test detected a redirect
+    // (e.g., Hotlink succeeded first, then CORS detected redirect)
+    if (this.crossDomainRedirect != null) {
+      this.status.updateForRedirect()
+    }
   }
 
   // private checked () {

src/Hotlink.ts

@@ -0,0 +1,44 @@
+import { URL } from 'url-ponyfill'
+import { CheckBase } from './CheckBase.js'
+import { Log } from './Log.js'
+import { checkViaImgSrc } from './checkViaImgSrc.js'
+import { IMG_HASH } from './constants.js'
+import type { GatewayNode } from './GatewayNode.js'
+import type { Checkable } from './types.js'
+
+const log = new Log('Hotlink')
+
+class Hotlink extends CheckBase implements Checkable {
+  _className = 'Hotlink'
+  _tagName = 'div'
+  constructor (protected parent: GatewayNode) {
+    super(parent, 'div', 'Hotlink')
+  }
+
+  // Hotlink test is optimized for speed - no redirect detection.
+  // Other tests (CORS, IPNS, etc.) detect redirects and update Status.
+  async check (): Promise<void> {
+    const gwUrl = new URL(this.parent.gateway)
+    const imgPathUrl = new URL(`${gwUrl.protocol}//${gwUrl.hostname}/ipfs/${IMG_HASH}?now=${Date.now()}&filename=1x1.png#x-ipfs-companion-no-redirect`)
+
+    try {
+      await checkViaImgSrc(imgPathUrl)
+      this.tag.win()
+    } catch (err) {
+      log.error(err)
+      this.onerror()
+      throw err
+    }
+  }
+
+  checked (): void {
+    log.warn('Not implemented yet')
+  }
+
+  onerror (): void {
+    this.tag.lose()
+    this.tag.title = 'Failed to load image via path gateway'
+  }
+}
+
+export { Hotlink }

src/Ipns.ts

@@ -1,6 +1,7 @@
 import fetchPonyfill from 'fetch-ponyfill'
 import { CheckBase } from './CheckBase.js'
 import { Log } from './Log.js'
+import { checkCrossDomainRedirect } from './checkCrossDomainRedirect.js'
 import { IPNS_PATH_TO_TEST } from './constants.js'
 import type { GatewayNode } from './GatewayNode.js'
 import type { Checkable } from './types.js'
@@ -22,17 +23,48 @@ class IPNSCheck extends CheckBase implements Checkable {
     const gatewayUrl = new URL(this.parent.gateway)
     gatewayUrl.pathname = IPNS_PATH_TO_TEST
     const testUrl = `${gatewayUrl.href}?now=${now}#x-ipfs-companion-no-redirect`
+
+    // Use shared redirect detection result from parent
+    const { confirmedTarget, possibleRedirect, errorStatus } = this.parent.redirectDetection
+    let redirectTarget = confirmedTarget
+
     try {
       const response = await fetch(testUrl)
+      // Also check response.url for redirects that CORS allows
+      const redirect = checkCrossDomainRedirect(response.url, this.parent.gateway)
+      if (redirect != null) {
+        redirectTarget = redirect
+        this.parent.crossDomainRedirect = redirect
+      }
       if (response.status === 200) {
-        this.tag.win()
-      } else {
-        log.debug(`${this.parent.gateway} does not support IPNS`)
-        throw new Error(`URL '${testUrl} is not reachable`)
+        if (redirectTarget != null) {
+          this.tag.redirect()
+          this.tag.title = `Redirected to ${redirectTarget}`
+        } else {
+          this.tag.win()
+        }
+        return
       }
+      // Non-200 status - test failed, don't throw (catch is for fetch failures)
+      log.debug(`${this.parent.gateway} does not support IPNS`)
+      this.onerror()
     } catch (err) {
+      // Only reaches here if fetch itself failed (network/CORS error)
       log.error(err)
-      this.onerror()
+      // Check detection results in priority order (redirect takes precedence over error)
+      if (redirectTarget != null) {
+        this.tag.redirect()
+        this.tag.title = `Redirected to ${redirectTarget}`
+      } else if (possibleRedirect) {
+        this.parent.crossDomainRedirect = 'another gateway'
+        this.tag.redirect()
+        this.tag.title = 'HTTP redirect detected'
+      } else if (errorStatus != null) {
+        this.tag.lose()
+        this.tag.title = `HTTP ${errorStatus} error`
+      } else {
+        this.onerror()
+      }
       throw err
     }
   }
@@ -42,7 +74,8 @@ class IPNSCheck extends CheckBase implements Checkable {
   }
 
   onerror (): void {
-    this.tag.err()
+    this.tag.lose()
+    this.tag.title = 'IPNS resolution failed (non-200 response)'
   }
 }