Sanitize markdown when previewing report header/footer (#476)

Signed-off-by: Joshua Li <joshuali925@gmail.com>
(cherry picked from commit 2973562)
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

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 {
@@ -340,6 +341,8 @@ export function ReportSettings(props: ReportSettingProps) {
       setCheckboxIdSelectHeaderFooter(newCheckboxIdToSelectedMap);
     };
 
+    const DOMPurify = createDOMPurify(window);
+
     const showFooter = checkboxIdSelectHeaderFooter.footer ? (
       <EuiFormRow
         label={i18n.translate('opensearch.reports.reportSettingProps.footer', {
@@ -357,7 +360,7 @@ export function ReportSettings(props: ReportSettingProps) {
             ['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 @@ export function ReportSettings(props: ReportSettingProps) {
             ['unordered-list', 'ordered-list', 'checked-list'],
           ]}
           generateMarkdownPreview={(markdown) =>
-            Promise.resolve(converter.makeHtml(markdown))
+            Promise.resolve(DOMPurify.sanitize(converter.makeHtml(markdown)))
           }
         />
       </EuiFormRow>