Add support for image-proxies by (optional) piping of image urls through the backend (#315)

* Added config property for image proxies

* Added API call and image url replacing

* Added comment explaining why a local function is needed inside the useEffect

* Added CHANGELOG entry

* Changed wording of the CHANGELOG sentence

* Changed CHANGELOG entry

Co-Authored-By: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>

* Removed fallback to original src

* Removed unnecessary API call for empty src URLs

* Simplify image url fetching

* Refactored imageframe to avoid rerendering of images

Co-Authored-By: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>

* Renamed config property to useImageProxy

Co-authored-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>

src/api/backend-config/types.ts

@@ -4,6 +4,7 @@ export interface BackendConfig {
   branding: BrandingConfig,
   banner: BannerConfig,
   customAuthNames: CustomAuthNames,
+  useImageProxy: boolean,
   specialLinks: SpecialLinks,
   version: BackendVersion,
 }

src/api/imageProxy.ts

@@ -0,0 +1,15 @@
+import { ImageProxyResponse } from '../components/editor/markdown-renderer/replace-components/image/types'
+import { expectResponseCode, getBackendUrl } from '../utils/apiUtils'
+import { defaultFetchConfig } from './default'
+
+export const getProxiedUrl = async (imageUrl: string): Promise<ImageProxyResponse> => {
+  const response = await fetch(getBackendUrl() + '/media/proxy', {
+    ...defaultFetchConfig,
+    method: 'POST',
+    body: JSON.stringify({
+      src: imageUrl
+    })
+  })
+  expectResponseCode(response)
+  return await response.json() as Promise<ImageProxyResponse>
+}