From ca49eb957d5d153cadcd01b8649816bbb8c3fc9c Mon Sep 17 00:00:00 2001 From: Tilman Vatteroth Date: Fri, 31 Dec 2021 00:05:02 +0100 Subject: [PATCH] Added NEXT_PUBLIC_IGNORE_IFRAME_ORIGIN_CONFIG (#1738) * Added NEXT_PUBLIC_IGNORE_IFRAME_ORIGIN_CONFIG Signed-off-by: Tilman Vatteroth --- next.config.js | 6 +++- .../application-loader/application-loader.tsx | 9 +----- ...o-editor-communicator-context-provider.tsx | 5 ++-- .../render-context/use-origin-from-config.ts | 30 +++++++++++++++++++ .../renderer-pane/render-iframe.tsx | 4 +-- 5 files changed, 40 insertions(+), 14 deletions(-) create mode 100644 src/components/editor-page/render-context/use-origin-from-config.ts diff --git a/next.config.js b/next.config.js index e35d3cbd1..82e1eb578 100644 --- a/next.config.js +++ b/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') diff --git a/src/components/application-loader/application-loader.tsx b/src/components/application-loader/application-loader.tsx index cb8b90ccc..7519af3ff 100644 --- a/src/components/application-loader/application-loader.tsx +++ b/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 } else { diff --git a/src/components/editor-page/render-context/renderer-to-editor-communicator-context-provider.tsx b/src/components/editor-page/render-context/renderer-to-editor-communicator-context-provider.tsx index a24aae8c2..ba82b37d8 100644 --- a/src/components/editor-page/render-context/renderer-to-editor-communicator-context-provider.tsx +++ b/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(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(() => { const newCommunicator = new RendererToEditorCommunicator() newCommunicator.setMessageTarget(window.parent, editorOrigin) diff --git a/src/components/editor-page/render-context/use-origin-from-config.ts b/src/components/editor-page/render-context/use-origin-from-config.ts new file mode 100644 index 000000000..36e29f630 --- /dev/null +++ b/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]) +} diff --git a/src/components/editor-page/renderer-pane/render-iframe.tsx b/src/components/editor-page/renderer-pane/render-iframe.tsx index ad6dd824d..6f42211b7 100644 --- a/src/components/editor-page/renderer-pane/render-iframe.tsx +++ b/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 = ({ forcedDarkMode }) => { const frameReference = useRef(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')