Fix image origins in posts

src/components/PageRenderer.module.scss

@@ -159,4 +159,9 @@
     background: var(--hr-color);
     height: 0.2rem;
   }
+
+  img {
+    width: 100%;
+    border-radius: 0.8rem;
+  }
 }

src/components/PageRenderer.tsx

@@ -1,28 +1,44 @@
 import DOMPurify from 'dompurify'
 import { Show, VoidComponent } from 'solid-js'
 import { isServer } from 'solid-js/web'
+import { IMAGE_ORIGIN } from '~/constants'
 import styles from './PageRenderer.module.scss'
 
-/* let DOM: any */
-/* if (isServer) { */
-/*   DOM = (await import('jsdom')).JSDOM */
-/* } */
+const imageOrigin = new URL(IMAGE_ORIGIN)
+
+const fixURLOrigin = (dom: Document) => {
+  const images = dom.getElementsByTagName('img')
+
+  for (const img of images) {
+    const url = new URL(img.src)
+
+    url.protocol = imageOrigin.protocol
+    url.host = imageOrigin.host
+    url.port = imageOrigin.port
+
+    img.src = url.href
+  }
+}
 
 type SanizerFn = (dirty: string) => string
 
 const getSanitizer = (): SanizerFn => {
   if (isServer) {
-    /* const window = new DOM('').window */
-    /* const window = new DOM.Window() */
-    /* const purify = DOMPurify(window) */
-    /* return purify.sanitize */
     // TODO: fix server side html sanitization
     return (x) => x
   } else {
-    return (dirty) =>
-      DOMPurify.sanitize(dirty, {
+    return (dirty) => {
+      const parser = new DOMParser()
+      const dom = parser.parseFromString(dirty, 'text/html')
+
+      fixURLOrigin(dom)
+
+      const clean = DOMPurify.sanitize(dom.body, {
         ADD_TAGS: ['iframe'],
       })
+
+      return clean
+    }
   }
 }
 

src/constants.ts

@@ -1,2 +1,3 @@
 export const VERSION = 'v0.0.0'
 export const GRAPHQL_BACKEND_URL = 'https://backend2.verseghy-gimnazium.net/graphql'
+export const IMAGE_ORIGIN = 'https://backend.verseghy-gimnazium.net'