fix: expected origin boundary works now with initial props

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

frontend/src/utils/determine-current-origin.ts

@@ -0,0 +1,33 @@
+/*
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import { isClientSideRendering } from './is-client-side-rendering'
+import type { NextPageContext } from 'next'
+
+/**
+ * Determines the location origin of the current request.
+ * Client side rendering will use the browsers window location.
+ * Server side rendering will use the http request.
+ *
+ * @param context The next page context that contains the http headers
+ * @return the determined request origin. Will be undefined if no origin could be determined.
+ */
+export const determineCurrentOrigin = (context: NextPageContext): string | undefined => {
+  if (isClientSideRendering()) {
+    return window.location.origin
+  }
+  const headers = context.req?.headers
+  if (headers === undefined) {
+    return undefined
+  }
+
+  const protocol = headers['x-forwarded-proto'] ?? 'http'
+  const host = headers['x-forwarded-host'] ?? headers['host']
+  if (host === undefined) {
+    return undefined
+  }
+
+  return `${protocol as string}://${host as string}`
+}

frontend/src/utils/expected-origin-boundary.tsx

@@ -1,25 +1,37 @@
 /*
- * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 import { useBaseUrl } from '../hooks/common/use-base-url'
-import { isClientSideRendering } from './is-client-side-rendering'
 import React, { Fragment, useMemo } from 'react'
 import type { PropsWithChildren } from 'react'
 
+export interface ExpectedOriginBoundaryProps {
+  currentOrigin?: string
+}
+
 /**
  * Checks if the url of the current browser window matches the expected origin.
  * This is necessary to ensure that the render endpoint is only opened from the rendering origin.
  *
  * @param children The children react element that should be rendered if the origin is correct
+ * @param currentOrigin the current origin from client or server side rendering context
  */
-export const ExpectedOriginBoundary: React.FC<PropsWithChildren> = ({ children }) => {
+export const ExpectedOriginBoundary: React.FC<PropsWithChildren<ExpectedOriginBoundaryProps>> = ({
+  children,
+  currentOrigin
+}) => {
   const baseUrl = useBaseUrl()
   const expectedOrigin = useMemo(() => new URL(baseUrl).origin, [baseUrl])
 
-  if (isClientSideRendering() && window.location.origin !== expectedOrigin) {
-    return <span>{`You can't open this page using this URL. For this endpoint "${expectedOrigin}" is expected.`}</span>
+  if (currentOrigin !== expectedOrigin) {
+    return (
+      <span
+        className={
+          'text-white bg-dark'
+        }>{`You can't open this page using this URL. For this endpoint "${expectedOrigin}" is expected.`}</span>
+    )
   } else {
     return <Fragment>{children}</Fragment>
   }