Merge pull request #1155 from cultuurnet/feature/III-6955-more-dompurify-sanitization

III-6955: more dompurify sanitization

Author: alduya

src/pages/TranslateForm.tsx

@@ -18,17 +18,22 @@ import { FormElement } from '@/ui/FormElement';
 import { Inline } from '@/ui/Inline';
 import { Input } from '@/ui/Input';
 import { Page } from '@/ui/Page';
+import { Panel } from '@/ui/Panel';
 import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { getGlobalBorderRadius, getValueFromTheme } from '@/ui/theme';
 import { Title } from '@/ui/Title';
 import { Toast } from '@/ui/Toast';
+import { sanitizationPresets, sanitizeDom } from '@/utils/sanitizeDom';
+
+import { DescriptionPreview } from './events/[eventId]/preview/DescriptionPreview';
 
 const htmlToDraft =
   typeof window === 'object' && require('html-to-draftjs').default;
 
 const languageOptions = [...Object.values(SupportedLanguages), 'en'];
 const getGlobalValue = getValueFromTheme('global');
+const getTextValue = getValueFromTheme('text');
 
 const TranslateForm = () => {
   const { t } = useTranslation();
@@ -88,7 +93,10 @@ const TranslateForm = () => {
       const newEditorStates: Record<string, EditorState> = {};
 
       languageOptions.forEach((langValue) => {
-        const description = offer.description?.[langValue];
+        const description = sanitizeDom(
+          offer.description?.[langValue],
+          sanitizationPresets.EVENT_DESCRIPTION,
+        );
 
         if (description) {
           const draftState = htmlToDraft(description);
@@ -316,21 +324,30 @@ const TranslateForm = () => {
                   </Text>
                   {originalLanguage === language &&
                   !isEditingOriginalDescription ? (
-                    <Inline>
-                      <Text variant="muted">
-                        {descriptionEditorStates[language]
-                          ? descriptionEditorStates[language]
-                              .getCurrentContent()
-                              .getPlainText()
-                          : ''}
-                      </Text>
+                    <Stack spacing={3}>
+                      <Panel padding={3} color={getTextValue('muted.color')}>
+                        <DescriptionPreview
+                          description={
+                            descriptionEditorStates[language]
+                              ? draftToHtml(
+                                  convertToRaw(
+                                    descriptionEditorStates[
+                                      language
+                                    ].getCurrentContent(),
+                                  ),
+                                )
+                              : ''
+                          }
+                        />
+                      </Panel>
+
                       <Button
                         variant={ButtonVariants.LINK}
                         onClick={toggleEditOriginalDescription}
                       >
                         {t('translate.change')}
                       </Button>
-                    </Inline>
+                    </Stack>
                   ) : (
                     <div id={`description-editor-container-${language}`}>
                       <FormElement

src/pages/events/[eventId]/preview/DescriptionPreview.tsx

@@ -0,0 +1,49 @@
+import { Text } from '@/ui/Text';
+import { getValueFromTheme } from '@/ui/theme';
+import { sanitizationPresets, sanitizeDom } from '@/utils/sanitizeDom';
+
+type Props = {
+  description: string;
+};
+
+const DescriptionPreview = ({ description }: Props) => {
+  const getLinkThemeValue = getValueFromTheme('link');
+
+  return (
+    <Text
+      css={`
+        p {
+          margin: 7.5px 0;
+        }
+        a {
+          color: ${getLinkThemeValue('color')};
+          text-decoration: underline;
+          &:hover {
+            color: ${getLinkThemeValue('hoverColor')};
+          }
+        }
+        em {
+          font-style: italic;
+        }
+        strong {
+          font-weight: bold;
+        }
+        ul,
+        ol {
+          margin: 7.5px 0 7.5px 20px;
+        }
+        ul {
+          list-style-type: disc;
+        }
+        ol {
+          list-style-type: decimal;
+        }
+      `}
+      dangerouslySetInnerHTML={{
+        __html: sanitizeDom(description, sanitizationPresets.EVENT_DESCRIPTION),
+      }}
+    />
+  );
+};
+
+export { DescriptionPreview };

src/pages/events/[eventId]/preview/Preview.tsx

@@ -1,4 +1,3 @@
-import DOMPurify from 'isomorphic-dompurify';
 import { useRouter } from 'next/router';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -27,6 +26,7 @@ import { parseOfferId } from '@/utils/parseOfferId';
 
 import { BookingInfoPreview } from './BookingInfoPreview';
 import { ContactInfoPreview } from './ContactInfoPreview';
+import { DescriptionPreview } from './DescriptionPreview';
 import { LocationPreview } from './LocationPreview';
 
 const getGlobalValue = getValueFromTheme('global');
@@ -37,7 +37,6 @@ const Preview = () => {
   const router = useRouter();
   const { t } = useTranslation();
   const { eventId } = router.query;
-  const getLinkThemeValue = getValueFromTheme('link');
   const [activeTab, setActiveTab] = useState(() => {
     if (typeof window !== 'undefined') {
       const hash = window.location.hash.replace('#', '');
@@ -285,43 +284,7 @@ const Preview = () => {
     {
       field: t('preview.labels.description'),
       value: description ? (
-        <Text
-          css={`
-            p {
-              margin: 7.5px 0;
-            }
-            a {
-              color: ${getLinkThemeValue('color')};
-              text-decoration: underline;
-              &:hover {
-                color: ${getLinkThemeValue('hoverColor')};
-              }
-            }
-            ul {
-              list-style-type: disc;
-              margin: 7.5px 0 7.5px 20px;
-            }
-            ol {
-              list-style-type: decimal;
-              margin: 7.5px 0 7.5px 20px;
-            }
-          `}
-          dangerouslySetInnerHTML={{
-            __html: DOMPurify.sanitize(description, {
-              ALLOWED_TAGS: [
-                'ul',
-                'ol',
-                'li',
-                'span',
-                'p',
-                'em',
-                'strong',
-                'a',
-              ],
-              ALLOWED_ATTR: ['style', 'href'],
-            }),
-          }}
-        />
+        <DescriptionPreview description={description} />
       ) : (
         <EmptyValue>{t('preview.empty_value.description')}</EmptyValue>
       ),

src/pages/steps/AdditionalInformationStep/DescriptionStep.tsx

@@ -20,6 +20,7 @@ import { ProgressBar, ProgressBarVariants } from '@/ui/ProgressBar';
 import { getStackProps, Stack, StackProps } from '@/ui/Stack';
 import { Text, TextVariants } from '@/ui/Text';
 import { Breakpoints } from '@/ui/theme';
+import { sanitizationPresets, sanitizeDom } from '@/utils/sanitizeDom';
 
 import { TabContentProps, ValidationStatus } from './AdditionalInformationStep';
 
@@ -122,9 +123,13 @@ const DescriptionStep = ({
 
   useEffect(() => {
     const newDescription = entity?.description?.[i18n.language];
-    if (!newDescription) return;
+    const sanitizedDescription = sanitizeDom(
+      newDescription,
+      sanitizationPresets.EVENT_DESCRIPTION,
+    );
+    if (!sanitizedDescription) return;
 
-    const draftState = htmlToDraft(newDescription);
+    const draftState = htmlToDraft(sanitizedDescription);
     const contentState = ContentState.createFromBlockArray(
       draftState.contentBlocks,
       draftState.entityMap,

src/utils/sanitizeDom.ts

@@ -0,0 +1,24 @@
+import DOMPurify from 'isomorphic-dompurify';
+
+const sanitizationPresets = {
+  EVENT_DESCRIPTION: 'eventDescription',
+} as const;
+
+const sanitizationOptions = {
+  [sanitizationPresets.EVENT_DESCRIPTION]: {
+    ALLOWED_TAGS: ['ul', 'ol', 'li', 'span', 'p', 'em', 'strong', 'a'],
+    ALLOWED_ATTR: ['style', 'href'],
+  },
+};
+
+type SanitizationPreset =
+  (typeof sanitizationPresets)[keyof typeof sanitizationPresets];
+
+const sanitizeDom = (
+  html: string,
+  preset: SanitizationPreset = sanitizationPresets.EVENT_DESCRIPTION,
+): string => {
+  return DOMPurify.sanitize(html, sanitizationOptions[preset]);
+};
+
+export { sanitizationPresets, sanitizeDom };