feat: display origin isolation warnings (#615)

* feat: show origin isolation warning if subdomain not supported

* chore: some styling updates to origin warning

* test: add origin isolation warning test

* chore: apply self suggestions from code review

* chore: fix lint

Author: SgtPooki

src/context/router-context.tsx

@@ -1,10 +1,10 @@
-import React, { useCallback, useEffect, type ReactElement } from 'react'
+import React, { useCallback, useEffect, type ReactNode } from 'react'
 
 export interface Route {
   default?: boolean
   path?: string
   shouldRender?(): Promise<boolean>
-  component: React.LazyExoticComponent<(...args: any[]) => ReactElement | null>
+  component: React.LazyExoticComponent<(...args: any[]) => ReactNode>
 }
 
 export const RouteContext = React.createContext<{

src/index.tsx

@@ -14,6 +14,7 @@ const LazyHelperUi = React.lazy(async () => import('./pages/helper-ui.jsx'))
 const LazyRedirectPage = React.lazy(async () => import('./pages/redirect-page.jsx'))
 const LazyInterstitial = React.lazy(async () => import('./pages/redirects-interstitial.jsx'))
 const LazyServiceWorkerErrorPage = React.lazy(async () => import('./pages/errors/no-service-worker.jsx'))
+const LazySubdomainWarningPage = React.lazy(async () => import('./pages/subdomain-warning.jsx'))
 
 let ErrorPage: null | React.LazyExoticComponent<() => ReactElement> = LazyServiceWorkerErrorPage
 if ('serviceWorker' in navigator) {
@@ -23,6 +24,7 @@ if ('serviceWorker' in navigator) {
 const routes: Route[] = [
   { default: true, component: ErrorPage ?? LazyHelperUi },
   { shouldRender: async () => renderChecks.shouldRenderNoServiceWorkerError(), component: LazyServiceWorkerErrorPage },
+  { shouldRender: renderChecks.shouldRenderSubdomainWarningPage, component: LazySubdomainWarningPage },
   { shouldRender: async () => renderChecks.shouldRenderRedirectsInterstitial(), component: LazyInterstitial },
   { path: '#/ipfs-sw-config', shouldRender: async () => renderChecks.shouldRenderConfigPage(), component: LazyConfig },
   {

src/lib/path-or-subdomain.ts

@@ -28,7 +28,7 @@ export const findOriginIsolationRedirect = async (location: Pick<Location, 'prot
   const log = logger?.forComponent('find-origin-isolation-redirect')
   if (isPathGatewayRequest(location) && !isSubdomainGatewayRequest(location)) {
     log?.trace('checking for subdomain support')
-    if (await areSubdomainsSupported() === true) {
+    if (await areSubdomainsSupported(logger) === true) {
       log?.trace('subdomain support is enabled')
       return toSubdomainRequest(location)
     } else {

src/lib/routing-render-checks.ts

@@ -36,3 +36,11 @@ export function shouldRenderRedirectsInterstitial (): boolean {
 export function shouldRenderNoServiceWorkerError (): boolean {
   return !('serviceWorker' in navigator)
 }
+
+export async function shouldRenderSubdomainWarningPage (): Promise<boolean> {
+  if (window.location.hash.startsWith('#/ipfs-sw-origin-isolation-warning')) {
+    return true
+  }
+
+  return false
+}

src/pages/subdomain-warning.tsx

@@ -0,0 +1,108 @@
+import React, { useCallback, useEffect, useState, type ReactNode } from 'react'
+import Header from '../components/Header.jsx'
+import './default-page-styles.css'
+import './loading.css'
+import { ServiceWorkerReadyButton } from '../components/sw-ready-button.jsx'
+import { ServiceWorkerProvider } from '../context/service-worker-context.jsx'
+
+function IpAddressRecommendations ({ currentHost }: { currentHost: string }): ReactNode {
+  return (
+    <div>
+      <span>Current Host: {currentHost}</span>
+      <p>Ip addresses do not support origin isolation.</p>
+      <p>If you're the website administrator, please ensure your domain has proper DNS configuration</p>
+    </div>
+  )
+}
+
+function DefaultRecommendations ({ currentHost }: { currentHost: string }): ReactNode {
+  return (
+    <div>
+      <span>Current Host: {currentHost}</span>
+      <p>
+        For the best experience, this website should be accessed through a subdomain gateway
+        (e.g., <code>cid.ipfs.{currentHost}</code> instead of <code>{currentHost}/ipfs/cid</code>).
+      </p>
+
+      <p>
+        If you're the website administrator, please ensure your domain has proper DNS configuration
+        for wildcard subdomains (<code>*.ipfs.{currentHost}</code> and <code>*.ipns.{currentHost}</code>).
+      </p>
+    </div>
+  )
+}
+/**
+ * Warning page to display when subdomain setup is not available
+ * This UI is similar to browser security warnings and informs users about missing features
+ */
+export default function SubdomainWarningPage (): ReactNode {
+  const [acceptedRisk, setAcceptedRisk] = useState(sessionStorage.getItem('ipfs-sw-gateway-accepted-path-gateway-risk') != null ?? false)
+  const [isSaving, setIsSaving] = useState(false)
+  const originalUrl = new URL(window.location.href).searchParams.get('helia-sw')
+
+  const handleAcceptRisk = useCallback(async () => {
+    setIsSaving(true)
+    // Store the user's choice in sessionStorage so it persists during the session
+    sessionStorage.setItem('ipfs-sw-gateway-accepted-path-gateway-risk', 'true')
+    // post to SW to accept the risk
+    try {
+      await fetch('/#/ipfs-sw-accept-origin-isolation-warning').then(() => {
+        setAcceptedRisk(true)
+      })
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error('Error accepting risk', error)
+    } finally {
+      setIsSaving(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    if (acceptedRisk) {
+      window.location.href = originalUrl ?? '/'
+    }
+  }, [originalUrl, acceptedRisk])
+
+  const currentHost = window.location.host
+
+  const isCurrentHostAnIpAddress = /^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}/.test(currentHost)
+
+  let RecommendationsElement: (props: { currentHost: string }) => ReactNode = DefaultRecommendations
+  if (isCurrentHostAnIpAddress) {
+    RecommendationsElement = IpAddressRecommendations
+  }
+
+  return (
+    <ServiceWorkerProvider>
+      <Header />
+      <main className='pa4-l bg-red mw7 mb5 center pa4 e2e-subdomain-warning mt4'>
+        <div className="flex items-center mb3 bg-red">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="mr2">
+            <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"></path>
+            <line x1="12" y1="9" x2="12" y2="13"></line>
+            <line x1="12" y1="17" x2="12.01" y2="17"></line>
+          </svg>
+          <h1 className="ma0 f3">Warning: Subdomain Gateway Not Available</h1>
+        </div>
+
+        <div className="ba b--yellow-dark pa3 mb4 bg-red-muted">
+          <p className="ma0 mb2 b">This website is using a path-based IPFS gateway without proper origin isolation.</p>
+          <p className="ma0">
+            Without subdomain support, the following features will be missing:
+          </p>
+          <ul className="mt2">
+            <li>Origin isolation for security</li>
+            <li>Support for _redirects functionality</li>
+            <li>Proper web application functionality</li>
+          </ul>
+        </div>
+
+        <RecommendationsElement currentHost={currentHost} />
+
+        <div className="flex justify-center mt4">
+          <ServiceWorkerReadyButton id="accept-warning" label={isSaving ? 'Accepting...' : 'I understand the risks - Continue anyway'} waitingLabel='Waiting for service worker registration...' onClick={() => { void handleAcceptRisk() }} />
+        </div>
+      </main>
+    </ServiceWorkerProvider>
+  )
+}

src/sw.ts

@@ -5,7 +5,7 @@ import { getSubdomainParts } from './lib/get-subdomain-parts.js'
 import { getVerifiedFetch } from './lib/get-verified-fetch.js'
 import { isConfigPage } from './lib/is-config-page.js'
 import { swLogger } from './lib/logger.js'
-import { findOriginIsolationRedirect } from './lib/path-or-subdomain.js'
+import { findOriginIsolationRedirect, isPathGatewayRequest } from './lib/path-or-subdomain.js'
 import type { VerifiedFetch } from '@helia/verified-fetch'
 
 /**
@@ -42,6 +42,7 @@ interface StoreReponseInCacheOptions {
  */
 interface LocalSwConfig {
   installTimestamp: number
+  originIsolationWarningAccepted: boolean
 }
 
 /**
@@ -203,6 +204,13 @@ async function requestRouting (event: FetchEvent, url: URL): Promise<boolean> {
       log.error('sw-config reload request, error updating verifiedFetch', err)
     }))
     return false
+  } else if (isAcceptOriginIsolationWarningRequest(event)) {
+    event.waitUntil(setOriginIsolationWarningAccepted().then(() => {
+      log.trace('origin isolation warning accepted')
+    }).catch((err) => {
+      log.error('origin isolation warning accepted, error', err)
+    }))
+    return false
   } else if (isSwConfigGETRequest(event)) {
     log.trace('sw-config GET request')
     event.waitUntil(new Promise<void>((resolve) => {
@@ -301,6 +309,10 @@ function isSwConfigGETRequest (event: FetchEvent): boolean {
   return event.request.url.includes('/#/ipfs-sw-config-get')
 }
 
+function isAcceptOriginIsolationWarningRequest (event: FetchEvent): boolean {
+  return event.request.url.includes('/#/ipfs-sw-accept-origin-isolation-warning')
+}
+
 function isSwAssetRequest (event: FetchEvent): boolean {
   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
@@ -430,8 +442,9 @@ async function storeReponseInCache ({ response, isMutable, cacheKey, event }: St
 }
 
 async function fetchHandler ({ path, request, event }: FetchHandlerArg): Promise<Response> {
+  const originalUrl = new URL(request.url)
   // test and enforce origin isolation before anything else is executed
-  const originLocation = await findOriginIsolationRedirect(new URL(request.url), swLogger)
+  const originLocation = await findOriginIsolationRedirect(originalUrl, swLogger)
   if (originLocation !== null) {
     const body = 'Gateway supports subdomain mode, redirecting to ensure Origin isolation..'
     return new Response(body, {
@@ -441,6 +454,18 @@ async function fetchHandler ({ path, request, event }: FetchHandlerArg): Promise
         Location: originLocation
       }
     })
+  } else if (isPathGatewayRequest(originalUrl) && !(await getOriginIsolationWarningAccepted())) {
+    const newUrl = new URL(originalUrl.href)
+    newUrl.pathname = '/'
+    newUrl.hash = '/ipfs-sw-origin-isolation-warning'
+    newUrl.searchParams.set('helia-sw', request.url)
+    return new Response('Origin isolation is not supported, please accept the risk to continue.', {
+      status: 307,
+      headers: {
+        'Content-Type': 'text/plain',
+        Location: newUrl.href
+      }
+    })
   }
 
   /**
@@ -671,6 +696,30 @@ async function addInstallTimestampToConfig (): Promise<void> {
   }
 }
 
+async function setOriginIsolationWarningAccepted (): Promise<void> {
+  try {
+    const swidb = getSwConfig()
+    await swidb.open()
+    await swidb.put('originIsolationWarningAccepted', true)
+    swidb.close()
+  } catch (e) {
+    log.error('addInstallTimestampToConfig error: ', e)
+  }
+}
+
+async function getOriginIsolationWarningAccepted (): Promise<boolean> {
+  try {
+    const swidb = getSwConfig()
+    await swidb.open()
+    const accepted = await swidb.get('originIsolationWarningAccepted')
+    swidb.close()
+    return accepted ?? false
+  } catch (e) {
+    log.error('getOriginIsolationWarningAccepted error: ', e)
+    return false
+  }
+}
+
 /**
  * To be called on 'install' sw event. This will clear out the old swAssets cache,
  * which is used for storing the service worker's css,js, and html assets.

test-e2e/byte-range.test.ts

@@ -2,6 +2,16 @@ import { testPathRouting as test, expect } from './fixtures/config-test-fixtures
 import { doRangeRequest } from './fixtures/do-range-request.js'
 
 test.describe('byte-ranges', () => {
+  test.beforeEach(async ({ page }) => {
+    // we need to send a request to the service worker to accept the origin isolation warning
+    await page.evaluate(async () => {
+      const response = await fetch('/#/ipfs-sw-accept-origin-isolation-warning')
+      if (!response.ok) {
+        throw new Error('Failed to accept origin isolation warning')
+      }
+    })
+  })
+
   test('should be able to get a single character', async ({ page }) => {
     test.setTimeout(60000)
     const { text, byteSize, statusCode } = await doRangeRequest({ page, range: 'bytes=1-2', path: '/ipfs/bafkqaddimvwgy3zao5xxe3debi' })

test-e2e/first-hit.test.ts

@@ -19,6 +19,10 @@ test.describe('first-hit ipfs-hosted', () => {
       expect(response?.status()).toBe(200)
       const headers = await response?.allHeaders()
 
+      // accept the origin isolation warning
+      await expect(page).toHaveURL(/#\/ipfs-sw-origin-isolation-warning/)
+      await page.click('.e2e-subdomain-warning button')
+
       expect(headers?.['content-type']).toContain('text/html')
 
       // wait for loading page to finish '.loading-page' to be removed
@@ -68,12 +72,11 @@ test.describe('first-hit direct-hosted', () => {
 
       // first loads the root page
       expect(response?.status()).toBe(200)
-      const headers = await response?.allHeaders()
 
-      expect(headers?.['content-type']).toContain('text/html')
+      await expect(page).toHaveURL(/#\/ipfs-sw-origin-isolation-warning/)
+      await page.click('.e2e-subdomain-warning button')
 
-      // wait for loading page to finish '.loading-page' to be removed
-      await page.waitForSelector('.loading-page', { state: 'detached' })
+      await expect(page).toHaveURL('http://127.0.0.1:3333/ipfs/bafkqablimvwgy3y')
 
       // and we verify the content was returned
       await page.waitForSelector('text=hello', { timeout: 25000 })

test-e2e/fixtures/config-test-fixtures.ts

@@ -33,8 +33,13 @@ export const test = base.extend<{ rootDomain: string, baseURL: string, protocol:
 export const testPathRouting = test.extend<{ rootDomain: string, baseURL: string, protocol: string }>({
   rootDomain: [rootDomain, { scope: 'test' }],
   protocol: [baseURLProtocol, { scope: 'test' }],
+  // eslint-disable-next-line no-empty-pattern
+  baseURL: async ({ }, use) => {
+    // Override baseURL to always be http://127.0.0.1:3333 for path routing tests
+    await use('http://127.0.0.1:3333')
+  },
   page: async ({ page, rootDomain }, use) => {
-    if (!rootDomain.includes('localhost')) {
+    if (!rootDomain.includes('localhost') && !rootDomain.includes('127.0.0.1')) {
       // for non localhost tests, we skip path routing tests
       testPathRouting.skip()
       return

test-e2e/hamt-dir.test.ts

@@ -1,6 +1,15 @@
 import { testPathRouting as test, expect } from './fixtures/config-test-fixtures.js'
 
 test.describe('hamt-dir', () => {
+  test.beforeEach(async ({ page }) => {
+    // we need to send a request to the service worker to accept the origin isolation warning
+    await page.evaluate(async () => {
+      const response = await fetch('/#/ipfs-sw-accept-origin-isolation-warning')
+      if (!response.ok) {
+        throw new Error('Failed to accept origin isolation warning')
+      }
+    })
+  })
   test('can open UnixFS file from HAMT-sharded directory', async ({ page }) => {
     const response = await page.goto('http://127.0.0.1:3333/ipfs/bafybeidbclfqleg2uojchspzd4bob56dqetqjsj27gy2cq3klkkgxtpn4i/685.txt')