feat: migrate to hash fragments (#760)

* tmp: fixing unrelated histories

* chore: cleaning up merging of main

* chore: cleaning up merge some more

* chore: more merge fixes, tests pass

* test: config page viewing on subdomain

* chore: revert main.go changes, fix safari test

Author: SgtPooki

src/lib/constants.ts

@@ -1,22 +1,29 @@
 /**
- * This file is an attempt to consolidate all the query params that are used in the service worker.
+ * This file is an attempt to consolidate all the query params and hash fragments that are used in the service worker.
  *
  * This will allow us a single location to define and describe all the query params that are used in the service worker.
  */
 
 export const QUERY_PARAMS = {
   /**
-   * The query param that is used to send the config to the subdomain service worker.
+   * The path that is used to request content from the IPFS network.
+   */
+  HELIA_SW: 'helia-sw'
+}
+
+export const HASH_FRAGMENTS = {
+  /**
+   * The hash fragment that is used to send the config to the subdomain service worker.
    */
   IPFS_SW_CFG: 'ipfs-sw-cfg',
 
   /**
-   * The query param that is used to request the config from the root domain service worker.
+   * The hash fragment that is used to request the config from the root domain service worker.
    */
   IPFS_SW_SUBDOMAIN_REQUEST: 'ipfs-sw-subdomain-request',
 
   /**
-   * The path that is used to request content from the IPFS network.
+   * The hash fragment that is used to request the origin isolation warning page.
    */
-  HELIA_SW: 'helia-sw'
+  IPFS_SW_ORIGIN_ISOLATION_WARNING: 'ipfs-sw-origin-isolation-warning'
 }

src/lib/first-hit-helpers.ts

@@ -1,7 +1,8 @@
 import { checkSubdomainSupport } from './check-subdomain-support.js'
 import { isConfigSet } from './config-db.js'
-import { QUERY_PARAMS } from './constants.js'
+import { HASH_FRAGMENTS, QUERY_PARAMS } from './constants.js'
 import { getSubdomainParts } from './get-subdomain-parts.js'
+import { deleteHashFragment, getHashFragment, hasHashFragment, setHashFragment } from './hash-fragments.js'
 import { uiLogger } from './logger.js'
 import { findOriginIsolationRedirect, isPathGatewayRequest, isPathOrSubdomainRequest, isSubdomainGatewayRequest } from './path-or-subdomain.js'
 import type { UrlParts } from './get-subdomain-parts.js'
@@ -150,7 +151,7 @@ function isRequestForContentAddressedData (url: URL): boolean {
 export async function getStateFromUrl (url: URL): Promise<NavigationState> {
   const { parentDomain, id, protocol } = getSubdomainParts(url.href)
   const isIsolatedOrigin = isSubdomainGatewayRequest(url)
-  const urlHasSubdomainConfigRequest = url.searchParams.get(QUERY_PARAMS.IPFS_SW_SUBDOMAIN_REQUEST) != null && url.searchParams.get(QUERY_PARAMS.HELIA_SW) != null
+  const urlHasSubdomainConfigRequest = hasHashFragment(url, HASH_FRAGMENTS.IPFS_SW_SUBDOMAIN_REQUEST) && url.searchParams.get(QUERY_PARAMS.HELIA_SW) != null
   let hasConfig = false
   const supportsSubdomains = await checkSubdomainSupport(url)
 
@@ -165,7 +166,7 @@ export async function getStateFromUrl (url: URL): Promise<NavigationState> {
     urlHasSubdomainConfigRequest,
     url,
     subdomainParts: { parentDomain, id, protocol },
-    compressedConfig: url.searchParams.get(QUERY_PARAMS.IPFS_SW_CFG),
+    compressedConfig: getHashFragment(url, HASH_FRAGMENTS.IPFS_SW_CFG),
     supportsSubdomains,
     requestForContentAddressedData: isRequestForContentAddressedData(url)
   } satisfies NavigationState
@@ -185,7 +186,7 @@ export async function getConfigRedirectUrl ({ url, isIsolatedOrigin, urlHasSubdo
     targetUrl.pathname = '/'
     targetUrl.hash = url.hash
     targetUrl.search = url.search
-    targetUrl.searchParams.set(QUERY_PARAMS.IPFS_SW_SUBDOMAIN_REQUEST, 'true')
+    setHashFragment(targetUrl, HASH_FRAGMENTS.IPFS_SW_SUBDOMAIN_REQUEST, 'true')
 
     // helia-sw may already be in the query parameters from the go binary or cloudflare or other service, so we need to add it to the target URL
     const heliaSw = url.searchParams.get(QUERY_PARAMS.HELIA_SW)
@@ -212,10 +213,10 @@ export async function getUrlWithConfig ({ url, isIsolatedOrigin, urlHasSubdomain
     const { translateIpfsRedirectUrl } = await import('./translate-ipfs-redirect-url.js')
     // we are on the root domain, and have been requested by a subdomain to fetch the config and pass it back to them.
     const redirectUrl = url
-    redirectUrl.searchParams.delete(QUERY_PARAMS.IPFS_SW_SUBDOMAIN_REQUEST)
+    deleteHashFragment(redirectUrl, HASH_FRAGMENTS.IPFS_SW_SUBDOMAIN_REQUEST)
     const config = await getConfig(uiLogger)
     const compressedConfig = await compressConfig(config)
-    redirectUrl.searchParams.set(QUERY_PARAMS.IPFS_SW_CFG, compressedConfig)
+    setHashFragment(redirectUrl, HASH_FRAGMENTS.IPFS_SW_CFG, compressedConfig)
 
     // translate the url with helia-sw to a path based URL, and then to the proper subdomain URL
     return toSubdomainRequest(translateIpfsRedirectUrl(redirectUrl))
@@ -237,7 +238,7 @@ export async function loadConfigFromUrl ({ url, compressedConfig }: Pick<Navigat
 
   try {
     const config = await decompressConfig(compressedConfig)
-    url.searchParams.delete(QUERY_PARAMS.IPFS_SW_CFG)
+    deleteHashFragment(url, HASH_FRAGMENTS.IPFS_SW_CFG)
     await setConfig(config, uiLogger)
     await registerServiceWorker()
     return translateIpfsRedirectUrl(url).toString()

src/lib/hash-fragments.ts

@@ -0,0 +1,88 @@
+interface HashFragments {
+  [key: string]: string | null
+}
+
+/**
+ * Parse hash fragments from a URL hash string
+ *
+ * @returns An object with key-value pairs from the hash fragments
+ */
+export function parseHashFragments (hash: string): HashFragments {
+  const fragments: HashFragments = {}
+
+  if (!hash || hash === '') {
+    return fragments
+  }
+
+  // remove the leading # if present
+  const hashString = hash.startsWith('#') ? hash.slice(1) : hash
+
+  // split by & and parse each fragment
+  const pairs = hashString.split('&')
+  for (const pair of pairs) {
+    const [key, value = null] = pair.split('=')
+    if (key != null) {
+      fragments[decodeURIComponent(key)] = value === null ? null : decodeURIComponent(value)
+    }
+  }
+
+  return fragments
+}
+
+/**
+ * Get a specific hash fragment value from a URL
+ *
+ * @returns The value of the hash fragment, or null if not found
+ */
+export function getHashFragment (url: URL, key: string): string | null {
+  const fragments = parseHashFragments(url.hash)
+  if (fragments[key] != null) {
+    return decodeURIComponent(fragments[key])
+  }
+
+  return null
+}
+
+/**
+ * Convert a hash fragment object to a string
+ */
+export function hashFragmentsToString (fragments: HashFragments): string {
+  const pairs = Object.entries(fragments).map(([k, v]) => {
+    if (v != null) {
+      return `${k}=${encodeURIComponent(v)}`
+    }
+
+    return `${k}`
+  })
+  return pairs.length > 0 ? `#${pairs.join('&')}` : ''
+}
+
+/**
+ * Set a hash fragment on a URL. Modifies the URL in place.
+ */
+export function setHashFragment (url: URL, key: string, value: string | null): void {
+  const fragments = parseHashFragments(url.hash)
+  fragments[key] = value
+
+  url.hash = hashFragmentsToString(fragments)
+}
+
+/**
+ * Delete a hash fragment from a URL. Modifies the URL in place.
+ */
+export function deleteHashFragment (url: URL, key: string): void {
+  const fragments = parseHashFragments(url.hash)
+  delete fragments[key]
+
+  url.hash = hashFragmentsToString(fragments)
+}
+
+/**
+ * Check if a hash fragment exists in a URL
+ *
+ * @returns true if the hash fragment exists
+ */
+export function hasHashFragment (url: URL, key: string): boolean {
+  const fragments = parseHashFragments(url.hash)
+  return key in fragments
+}

src/sw.ts

@@ -1,9 +1,10 @@
 import { getConfig } from './lib/config-db.js'
-import { QUERY_PARAMS } from './lib/constants.js'
+import { HASH_FRAGMENTS, QUERY_PARAMS } from './lib/constants.js'
 import { getHeliaSwRedirectUrl } from './lib/first-hit-helpers.js'
 import { GenericIDB } from './lib/generic-db.js'
 import { getSubdomainParts } from './lib/get-subdomain-parts.js'
 import { getVerifiedFetch } from './lib/get-verified-fetch.js'
+import { hasHashFragment } from './lib/hash-fragments.js'
 import { isConfigPage } from './lib/is-config-page.js'
 import { swLogger } from './lib/logger.js'
 import { findOriginIsolationRedirect, isPathGatewayRequest, isSubdomainGatewayRequest } from './lib/path-or-subdomain.js'
@@ -323,7 +324,7 @@ function isConfigPageRequest (url: URL): boolean {
 
 function isSubdomainConfigRequest (event: FetchEvent): boolean {
   const url = new URL(event.request.url)
-  return url.searchParams.has(QUERY_PARAMS.IPFS_SW_SUBDOMAIN_REQUEST)
+  return hasHashFragment(url, HASH_FRAGMENTS.IPFS_SW_SUBDOMAIN_REQUEST)
 }
 
 function isValidRequestForSW (event: FetchEvent): boolean {

test-e2e/config-loading.test.ts

@@ -1,4 +1,5 @@
 import { compressConfig } from '../src/lib/config-db.js'
+import { HASH_FRAGMENTS } from '../src/lib/constants.js'
 import { 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'
@@ -76,6 +77,11 @@ test.describe('ipfs-sw configuration', () => {
   })
 
   test('config can be injected from an untrusted source', async ({ page, baseURL, rootDomain, protocol }) => {
+    if (['webkit', 'safari'].includes(test.info().project.name)) {
+      // @see https://github.com/ipfs/in-web-browsers/issues/206
+      test.skip()
+      return
+    }
     const newConfig: ConfigDbWithoutPrivateFields = {
       ...testConfig,
       gateways: [
@@ -102,7 +108,7 @@ test.describe('ipfs-sw configuration', () => {
     page.on('response', (response) => {
       responses.push(response)
     })
-    await page.goto(`${protocol}//bafkqablimvwgy3y.ipfs.${rootDomain}/?ipfs-sw-cfg=${compressedConfig}`)
+    await page.goto(`${protocol}//bafkqablimvwgy3y.ipfs.${rootDomain}/#${HASH_FRAGMENTS.IPFS_SW_CFG}=${compressedConfig}`)
     await waitForServiceWorker(page, `${protocol}//bafkqablimvwgy3y.ipfs.${rootDomain}`)
     await page.waitForLoadState('networkidle')
 

test-e2e/layout.test.ts

@@ -37,10 +37,12 @@ test.describe('smoketests', () => {
 
 testSubdomainRouting.describe('smoketests', () => {
   testSubdomainRouting.describe('config section on subdomains', () => {
+    // TODO: remove this test because we don't want to support config page on subdomains. See
     testSubdomainRouting('only config and header are visible on /#/ipfs-sw-config requests', async ({ page, baseURL, rootDomain, protocol }) => {
       await page.goto(baseURL, { waitUntil: 'networkidle' })
       await waitForServiceWorker(page, baseURL)
       await page.goto(`${protocol}//bafkqablimvwgy3y.ipfs.${rootDomain}/#/ipfs-sw-config`, { waitUntil: 'networkidle' })
+      await page.reload()
 
       await waitForServiceWorker(page, baseURL)