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

Signed-off-by: Joshua Li <[email protected]>
opensearch-project · Dec 10, 2024 · 2973562 · 2973562
1 parent deb8b59
commit 2973562
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 14 deletions.
diff --git a/public/components/main/__tests__/__snapshots__/main.test.tsx.snap b/public/components/main/__tests__/__snapshots__/main.test.tsx.snap
@@ -73,7 +73,7 @@ exports[`<Main /> panel render component 1`] = `
     />
     <div>
       <div
-        class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
+        class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
       >
         <div
           class="euiFlexItem euiSearchBar__searchHolder"
@@ -212,7 +212,7 @@ exports[`<Main /> panel render component 1`] = `
         </div>
       </div>
       <div
-        class="euiSpacer euiSpacer--l"
+        class="euiSpacer euiSpacer--m"
       />
       <div
         class="euiBasicTable"
@@ -1017,7 +1017,7 @@ exports[`<Main /> panel render component after create success 1`] = `
     />
     <div>
       <div
-        class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
+        class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
       >
         <div
           class="euiFlexItem euiSearchBar__searchHolder"
@@ -1158,7 +1158,7 @@ exports[`<Main /> panel render component after create success 1`] = `
         </div>
       </div>
       <div
-        class="euiSpacer euiSpacer--l"
+        class="euiSpacer euiSpacer--m"
       />
       <div
         class="euiBasicTable"
@@ -2020,7 +2020,7 @@ exports[`<Main /> panel render component after delete success 1`] = `
     />
     <div>
       <div
-        class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
+        class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
       >
         <div
           class="euiFlexItem euiSearchBar__searchHolder"
@@ -2161,7 +2161,7 @@ exports[`<Main /> panel render component after delete success 1`] = `
         </div>
       </div>
       <div
-        class="euiSpacer euiSpacer--l"
+        class="euiSpacer euiSpacer--m"
       />
       <div
         class="euiBasicTable"
@@ -3024,7 +3024,7 @@ exports[`<Main /> panel render component after edit success 1`] = `
     />
     <div>
       <div
-        class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
+        class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
       >
         <div
           class="euiFlexItem euiSearchBar__searchHolder"
@@ -3165,7 +3165,7 @@ exports[`<Main /> panel render component after edit success 1`] = `
         </div>
       </div>
       <div
-        class="euiSpacer euiSpacer--l"
+        class="euiSpacer euiSpacer--m"
       />
       <div
         class="euiBasicTable"

diff --git a/public/components/main/__tests__/__snapshots__/reports_table.test.tsx.snap b/public/components/main/__tests__/__snapshots__/reports_table.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<ReportsTable /> panel render component 1`] = `
 <div>
   <div
-    class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
+    class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
   >
     <div
       class="euiFlexItem euiSearchBar__searchHolder"
@@ -142,7 +142,7 @@ exports[`<ReportsTable /> panel render component 1`] = `
     </div>
   </div>
   <div
-    class="euiSpacer euiSpacer--l"
+    class="euiSpacer euiSpacer--m"
   />
   <div
     class="euiBasicTable"
@@ -628,7 +628,7 @@ exports[`<ReportsTable /> panel render component 1`] = `
 exports[`<ReportsTable /> panel render empty component 1`] = `
 <div>
   <div
-    class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
+    class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
   >
     <div
       class="euiFlexItem euiSearchBar__searchHolder"
@@ -769,7 +769,7 @@ exports[`<ReportsTable /> panel render empty component 1`] = `
     </div>
   </div>
   <div
-    class="euiSpacer euiSpacer--l"
+    class="euiSpacer euiSpacer--m"
   />
   <div
     class="euiBasicTable"

diff --git a/public/components/report_definitions/report_settings/report_settings.tsx b/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 ? (
       <EuiCompressedFormRow
         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)))
           }
         />
       </EuiCompressedFormRow>
@@ -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)))
           }
         />
       </EuiCompressedFormRow>