Added NEXT_PUBLIC_IGNORE_IFRAME_ORIGIN_CONFIG (#1738)

* Added NEXT_PUBLIC_IGNORE_IFRAME_ORIGIN_CONFIG

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

next.config.js

@@ -19,8 +19,12 @@ If you want to create a build that uses the mock api then use build:mock instead
   process.exit(1)
 }
 
+if (!!process.env.NEXT_PUBLIC_IGNORE_IFRAME_ORIGIN_CONFIG) {
+  console.warn("You have set NEXT_PUBLIC_IGNORE_IFRAME_ORIGIN_CONFIG. This flag is ONLY for testing purposes and will decrease the security of the editor if used in production!")
+}
+
 if (!!process.env.NEXT_PUBLIC_TEST_MODE) {
-  console.log('Built in test mode')
+  console.warn('This build runs in test mode. This means:\n - no sandboxed iframe\n - Additional data-attributes for e2e tests added to DOM')
 }
 
 const path = require('path')

src/components/application-loader/application-loader.tsx

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import React, { Suspense, useEffect } from 'react'
+import React, { Suspense } from 'react'
 import { useBackendBaseUrl } from '../../hooks/common/use-backend-base-url'
 import { createSetUpTaskList } from './initializers'
 import { LoadingScreen } from './loading-screen'
@@ -12,7 +12,6 @@ import { useCustomizeAssetsUrl } from '../../hooks/common/use-customize-assets-u
 import { Logger } from '../../utils/logger'
 import { useAsync } from 'react-use'
 import { ApplicationLoaderError } from './application-loader-error'
-import { isTestMode } from '../../utils/test-modes'
 
 const log = new Logger('ApplicationLoader')
 
@@ -32,12 +31,6 @@ export const ApplicationLoader: React.FC = ({ children }) => {
     }
   }, [])
 
-  useEffect(() => {
-    if (isTestMode()) {
-      log.warn('This build runs in test mode. This means:\n - no sandboxed iframe')
-    }
-  }, [])
-
   if (loading) {
     return <LoadingScreen failedTaskName={error?.message} />
   } else {

src/components/editor-page/render-context/renderer-to-editor-communicator-context-provider.tsx

@@ -5,10 +5,9 @@
  */
 
 import React, { createContext, useContext, useEffect, useMemo } from 'react'
-import { useSelector } from 'react-redux'
 import { RendererToEditorCommunicator } from '../../render-page/window-post-message-communicator/renderer-to-editor-communicator'
 import { CommunicationMessageType } from '../../render-page/window-post-message-communicator/rendering-message'
-import type { ApplicationState } from '../../../redux/application-state'
+import { ORIGIN_TYPE, useOriginFromConfig } from './use-origin-from-config'
 
 const RendererToEditorCommunicatorContext = createContext<RendererToEditorCommunicator | undefined>(undefined)
 
@@ -27,7 +26,7 @@ export const useRendererToEditorCommunicator: () => RendererToEditorCommunicator
 }
 
 export const RendererToEditorCommunicatorContextProvider: React.FC = ({ children }) => {
-  const editorOrigin = useSelector((state: ApplicationState) => state.config.iframeCommunication.editorOrigin)
+  const editorOrigin = useOriginFromConfig(ORIGIN_TYPE.EDITOR)
   const communicator = useMemo<RendererToEditorCommunicator>(() => {
     const newCommunicator = new RendererToEditorCommunicator()
     newCommunicator.setMessageTarget(window.parent, editorOrigin)

src/components/editor-page/render-context/use-origin-from-config.ts

@@ -0,0 +1,30 @@
+/*
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { useApplicationState } from '../../../hooks/common/use-application-state'
+import { useMemo } from 'react'
+
+export enum ORIGIN_TYPE {
+  EDITOR,
+  RENDERER
+}
+
+/**
+ * Returns the url origin of the editor or the renderer
+ */
+export const useOriginFromConfig = (originType: ORIGIN_TYPE): string => {
+  const originFromConfig = useApplicationState((state) =>
+    originType === ORIGIN_TYPE.EDITOR
+      ? state.config.iframeCommunication.editorOrigin
+      : state.config.iframeCommunication.rendererOrigin
+  )
+
+  return useMemo(() => {
+    return process.env.NEXT_PUBLIC_IGNORE_IFRAME_ORIGIN_CONFIG !== undefined
+      ? window.location.origin + '/'
+      : originFromConfig
+  }, [originFromConfig])
+}

src/components/editor-page/renderer-pane/render-iframe.tsx

@@ -23,10 +23,10 @@ import { useIsRendererReady } from '../../render-page/window-post-message-commun
 import { useSendDarkModeStatusToRenderer } from './hooks/use-send-dark-mode-status-to-renderer'
 import { useSendMarkdownToRenderer } from './hooks/use-send-markdown-to-renderer'
 import { useSendScrollState } from './hooks/use-send-scroll-state'
-import { useApplicationState } from '../../../hooks/common/use-application-state'
 import { Logger } from '../../../utils/logger'
 import { useEffectOnRenderTypeChange } from './hooks/use-effect-on-render-type-change'
 import { cypressAttribute, cypressId } from '../../../utils/cypress-attribute'
+import { ORIGIN_TYPE, useOriginFromConfig } from '../render-context/use-origin-from-config'
 
 export interface RenderIframeProps extends RendererProps {
   rendererType: RendererType
@@ -48,7 +48,7 @@ export const RenderIframe: React.FC<RenderIframeProps> = ({
   forcedDarkMode
 }) => {
   const frameReference = useRef<HTMLIFrameElement>(null)
-  const rendererOrigin = useApplicationState((state) => state.config.iframeCommunication.rendererOrigin)
+  const rendererOrigin = useOriginFromConfig(ORIGIN_TYPE.RENDERER)
   const iframeCommunicator = useEditorToRendererCommunicator()
   const resetRendererReady = useCallback(() => {
     log.debug('Reset render status')