Redirect with subdomain resolution for IPFS hosting

package.json

@@ -229,6 +229,7 @@
     "make-plural": "^7.0.0",
     "ms": "^2.1.3",
     "multicodec": "^3.0.1",
+    "multiformats": "13.0.1",
     "multihashes": "^4.0.2",
     "nock": "^13.3.3",
     "node-vibrant": "^3.2.1-alpha.1",
@@ -276,5 +277,6 @@
     "npm": "please-use-yarn",
     "node": "18.x",
     "yarn": ">=1.22"
-  }
+  },
+  "homepage": "./"
 }

src/components/IpfsSubpathRedirect.tsx

@@ -0,0 +1,38 @@
+import { CID } from 'multiformats'
+import { useEffect } from 'react'
+
+export const IpfsSubpathRedirect = () => {
+  useEffect(() => {
+    const hashFromBase = extractIpfsHashFromBasePath()
+
+    if (!hashFromBase) return
+
+    const redirectUrl = generateIpfsSubdomainUrl(hashFromBase)
+
+    // redirect to IPFS subdomain url
+    try {
+      window.location.href = redirectUrl
+    } catch (e) {
+      console.error(e)
+      throw new Error(
+        'Failed to redirect to a safe page. IPFS hosted websites should always be browsed with the content hash in the subdomain, not in the path. This is to protect you, the user, from cache poising attacks.'
+      )
+    }
+  }, [])
+
+  return null
+}
+
+function extractIpfsHashFromBasePath() {
+  const htmlBase = document.querySelector('base')
+  if (!htmlBase) return
+  const cidRegex =
+    /\/ipfs\/(Qm[1-9A-HJ-NP-Za-km-z]{44,}|b[A-Za-z2-7]{58,}|B[A-Z2-7]{58,}|z[1-9A-HJ-NP-Za-km-z]{48,}|F[0-9A-F]{50,})/
+  return htmlBase.href.match(cidRegex)?.at(1)
+}
+
+function generateIpfsSubdomainUrl(cidHash: string) {
+  const cidV1String = CID.parse(cidHash).toV1().toString()
+  const host = window.location.hostname === '127.0.0.1' ? `localhost:${location.port}` : location.host
+  return `${location.protocol}//${cidV1String}.ipfs.${host}`
+}

src/pages/App.tsx

@@ -1,5 +1,6 @@
 import ErrorBoundary from 'components/ErrorBoundary'
 import Loader from 'components/Icons/LoadingSpinner'
+import { IpfsSubpathRedirect } from 'components/IpfsSubpathRedirect'
 import NavBar, { PageTabs } from 'components/NavBar'
 import { lazy, Suspense, useEffect, useState } from 'react'
 import { Navigate, Route, Routes, useLocation } from 'react-router-dom'
@@ -100,6 +101,7 @@ export default function App() {
 
   return (
     <ErrorBoundary>
+      <IpfsSubpathRedirect />
       <DarkModeQueryParamReader />
       <HeaderWrapper transparent={isHeaderTransparent} scrollY={scrollY}>
         <NavBar blur={isHeaderTransparent} />