diff --git a/assets/js/src/form_editor/components/preview/preview.tsx b/assets/js/src/form_editor/components/preview/preview.tsx index a8a9e11dd4..b03213ba1a 100644 --- a/assets/js/src/form_editor/components/preview/preview.tsx +++ b/assets/js/src/form_editor/components/preview/preview.tsx @@ -43,6 +43,11 @@ const FormPreview = () => { [] ); + const editorUrl = useSelect( + (select) => select('mailpoet-form-editor').getEditorUrl(), + [] + ); + useEffect(() => { setIframeLoaded(false); }, [isPreview]); @@ -72,6 +77,7 @@ const FormPreview = () => { const urlData = { id: formId, form_type: previewSettings.formType, + editor_url: editorUrl, }; let iframeSrc = `${(window as any).mailpoet_form_preview_page}&data=${btoa(JSON.stringify(urlData))}`; // Add anchor to scroll to certain types of form diff --git a/assets/js/src/form_editor/form_preview.ts b/assets/js/src/form_editor/form_preview.ts index e9a8e82a49..fd4c2b0959 100644 --- a/assets/js/src/form_editor/form_preview.ts +++ b/assets/js/src/form_editor/form_preview.ts @@ -13,6 +13,12 @@ jQuery(($) => { if (!event.data) { return; } + // Allow message processing only when send from editor's origin + const editorUrl = new URL(previewForm.data('editor-url')); + if (editorUrl.origin !== event.origin) { + return; + } + let width = null; const formType = event.data.formType; // Get width settings based on type diff --git a/assets/js/src/form_editor/store/selectors.jsx b/assets/js/src/form_editor/store/selectors.jsx index 9a917ca389..944a84189a 100644 --- a/assets/js/src/form_editor/store/selectors.jsx +++ b/assets/js/src/form_editor/store/selectors.jsx @@ -110,6 +110,9 @@ export default { hasUnsavedChanges(state) { return state.hasUnsavedChanges; }, + getEditorUrl(state) { + return state.editorUrl; + }, /** * Goes thru all parents of the block and return diff --git a/assets/js/src/form_editor/store/store.jsx b/assets/js/src/form_editor/store/store.jsx index 1f23b1c8f8..fa7ff9824a 100644 --- a/assets/js/src/form_editor/store/store.jsx +++ b/assets/js/src/form_editor/store/store.jsx @@ -59,6 +59,7 @@ export default () => { openedPanels: ['basic-settings'], }, previewSettings, + editorUrl: window.location.href, }; const config = { diff --git a/lib/Form/PreviewPage.php b/lib/Form/PreviewPage.php index 25127cc673..0fb23631fa 100644 --- a/lib/Form/PreviewPage.php +++ b/lib/Form/PreviewPage.php @@ -39,7 +39,7 @@ class PreviewPage { $this->assetsController = $assetsController; } - public function renderPage(int $formId, string $formType): string { + public function renderPage(int $formId, string $formType, string $editorUrl): string { $this->assetsController->setupFormPreviewDependencies(); $formData = $this->fetchFormData($formId); if (!is_array($formData)) { @@ -49,7 +49,7 @@ class PreviewPage { 'form/form_preview.html', [ 'post' => $this->getPostContent(), - 'form' => $this->getFormContent($formData, $formId, $formType), + 'form' => $this->getFormContent($formData, $formId, $formType, $editorUrl), 'formType' => $formType, ] ); @@ -81,10 +81,11 @@ class PreviewPage { return null; } - private function getFormContent(array $formData, int $formId, string $formDisplayType): string { + private function getFormContent(array $formData, int $formId, string $formDisplayType, string $editorUrl): string { $htmlId = 'mailpoet_form_preview_' . $formId; $templateData = [ 'is_preview' => true, + 'editor_url' => $editorUrl, 'form_html_id' => $htmlId, 'form_id' => $formId, 'form_success_message' => $formData['settings']['success_message'] ?? null, diff --git a/lib/Router/Endpoints/FormPreview.php b/lib/Router/Endpoints/FormPreview.php index 8c84f8b3f6..c462278274 100644 --- a/lib/Router/Endpoints/FormPreview.php +++ b/lib/Router/Endpoints/FormPreview.php @@ -45,6 +45,10 @@ class FormPreview { if (!isset($this->data['id']) || !isset($this->data['form_type'])) { return ''; } - return $this->formPreviewPage->renderPage((int)$this->data['id'], (string)$this->data['form_type']); + return $this->formPreviewPage->renderPage( + (int)$this->data['id'], + (string)$this->data['form_type'], + (string)$this->data['editor_url'] + ); } } diff --git a/views/form/front_end_form.html b/views/form/front_end_form.html index 5d820a3b94..bf49e2a4a1 100644 --- a/views/form/front_end_form.html +++ b/views/form/front_end_form.html @@ -13,6 +13,7 @@ class="mailpoet_form mailpoet_form_<%= form_type %>" <% if(is_preview) %> data-is-preview="1" + data-editor-url="<%= editor_url %>" <% endif %> > <% if form_type == 'popup' or form_type == 'fixed_bar' or form_type == 'slide_in' %>