[Backport 2.x] Sanitize markdown when previewing report header/footer

public/components/report_definitions/report_settings/report_settings.tsx

@@ -3,6 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import createDOMPurify from 'dompurify';
 import React, { useEffect, useState } from 'react';
 import { i18n } from '@osd/i18n';
 import {
@@ -30,8 +31,8 @@
   REPORT_SOURCE_TYPES,
   SAVED_SEARCH_FORMAT_OPTIONS,
 } from './report_settings_constants';
 import Showdown from 'showdown';
 import ReactMde from 'react-mde';
 import 'react-mde/lib/styles/css/react-mde-all.css';
 import {
   reportDefinitionParams,
@@ -52,14 +53,14 @@
 } from './report_settings_helpers';
 import { TimeRangeSelect } from './time_range';
 import { converter } from '../utils';
 import { ReportDefinitionSchemaType } from 'server/model';
 import { ReportTrigger } from '../report_trigger';
 
 type ReportSettingProps = {
   edit: boolean;
   editDefinitionId: string;
   reportDefinitionRequest: reportDefinitionParams;
   httpClientProps: any;
   timeRange: timeRangeParams;
   showSettingsReportNameError: boolean;
   settingsReportNameErrorMessage: string;
@@ -90,22 +91,22 @@
   const [reportDescription, setReportDescription] = useState('');
   const [reportSourceId, setReportSourceId] = useState('dashboardReportSource');
 
   const [dashboardSourceSelect, setDashboardSourceSelect] = useState([] as any);
   const [dashboards, setDashboards] = useState([] as any);
 
   const [visualizationSourceSelect, setVisualizationSourceSelect] = useState(
     [] as any
   );
   const [visualizations, setVisualizations] = useState([] as any);
 
   const [savedSearchSourceSelect, setSavedSearchSourceSelect] = useState(
     [] as any
   );
   const [savedSearches, setSavedSearches] = useState([] as any);
   const [savedSearchRecordLimit, setSavedSearchRecordLimit] = useState(10000);
 
   const [notebooksSourceSelect, setNotebooksSourceSelect] = useState([] as any);
   const [notebooks, setNotebooks] = useState([] as any);
 
   const [fileFormat, setFileFormat] = useState('pdf');
 
@@ -185,7 +186,7 @@
     }
   };
 
   const handleDashboardSelect = (e: string | any[]) => {
     setDashboardSourceSelect(e);
 
     let fromInContext = false;
@@ -340,6 +341,8 @@
       setCheckboxIdSelectHeaderFooter(newCheckboxIdToSelectedMap);
     };
 
+    const DOMPurify = createDOMPurify(window);
+
     const showFooter = checkboxIdSelectHeaderFooter.footer ? (
       <EuiFormRow
         label={i18n.translate('opensearch.reports.reportSettingProps.footer', {
@@ -357,7 +360,7 @@
             ['unordered-list', 'ordered-list', 'checked-list'],
           ]}
           generateMarkdownPreview={(markdown) =>
-            Promise.resolve(converter.makeHtml(markdown))
+            Promise.resolve(DOMPurify.sanitize(converter.makeHtml(markdown)))
           }
         />
       </EuiFormRow>
@@ -380,7 +383,7 @@
             ['unordered-list', 'ordered-list', 'checked-list'],
           ]}
           generateMarkdownPreview={(markdown) =>
-            Promise.resolve(converter.makeHtml(markdown))
+            Promise.resolve(DOMPurify.sanitize(converter.makeHtml(markdown)))
           }
         />
       </EuiFormRow>
@@ -396,7 +399,7 @@
               response.report_definition;
             const {
               report_params: {
                 core_params: { header, footer },
               },
             } = reportDefinition;
             // set header/footer default
@@ -497,7 +500,7 @@
     }
   };
 
   const setDefaultFileFormat = (fileFormat) => {
     let index = 0;
     for (index = 0; index < PDF_PNG_FILE_FORMAT_OPTIONS.length; ++index) {
       if (
@@ -603,7 +606,7 @@
       }
     });
 
     if (reportSource == REPORT_SOURCE_TYPES.savedSearch) {
       setSavedSearchRecordLimit(
         response.report_definition.report_params.core_params.limit
       );
@@ -619,7 +622,7 @@
     );
   };
 
   const defaultConfigurationEdit = async (httpClientProps) => {
     let editData = {};
     await httpClientProps
       .get(`../api/reporting/reportDefinitions/${editDefinitionId}`)