replace sanitize-html with xss

prabhuignoto · Jan 6, 2024 · 0378546 · 0378546
1 parent 4034d24
commit 0378546
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 65 deletions.
diff --git a/package.json b/package.json
@@ -42,9 +42,8 @@
     "classnames": "^2.5.1",
     "dayjs": "^1.11.10",
     "focus-visible": "^5.2.0",
-    "sanitize-html": "^2.11.0",
     "styled-components": "^6.1.6",
-    "stylis": "^4.3.1"
+    "xss": "^1.0.14"
   },
   "peerDependencies": {
     "react": "^18.1.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/rollup.config.mjs b/rollup.config.mjs
@@ -12,6 +12,7 @@ import PeerDepsExternalPlugin from 'rollup-plugin-peer-deps-external';
 import postcss from 'rollup-plugin-postcss';
 import typescript from 'rollup-plugin-typescript2';
 import pkg from './package.json' assert { type: 'json' };
+import buble from '@rollup/plugin-buble';
 
 const banner = `/*
  * ${pkg.name}
@@ -72,15 +73,12 @@ export default {
         ],
       ],
     }),
-    // buble({
-    //   objectAssign: true,
-    //   transforms: {
-    //     dangerousForOf: false,
-    //     forOf: false,
-    //     generator: false,
-    //     templateString: false,
-    //   },
-    // }),
+    buble({
+      objectAssign: true,
+      transforms: {
+        templateString: false,
+      },
+    }),
     postcss({
       plugins: [
         postCSSPreset({

diff --git a/src/components/timeline-elements/timeline-card-content/text-or-content.tsx b/src/components/timeline-elements/timeline-card-content/text-or-content.tsx
@@ -1,6 +1,6 @@
 import { TimelineContentModel } from '@models/TimelineContentModel';
 import { ForwardRefExoticComponent, forwardRef, useContext } from 'react';
-import sanitizeHtml from 'sanitize-html';
+import xss from 'xss';
 import { GlobalContext } from '../../GlobalContext';
 import {
   TimelineContentDetails,
@@ -38,9 +38,7 @@ const getTextOrContent: (
             const props = parseDetailsTextHTML
               ? {
                   dangerouslySetInnerHTML: {
-                    __html: sanitizeHtml(text, {
-                      parseStyleAttributes: true,
-                    }),
+                    __html: xss(text),
                   },
                 }
               : null;
@@ -57,20 +55,14 @@ const getTextOrContent: (
             );
           });
         } else {
-          textContent = parseDetailsTextHTML
-            ? sanitizeHtml(detailedText, {
-                parseStyleAttributes: true,
-              })
-            : detailedText;
+          textContent = parseDetailsTextHTML ? xss(detailedText) : detailedText;
         }
 
         const textContentProps =
           parseDetailsTextHTML && !isTextArray
             ? {
                 dangerouslySetInnerHTML: {
-                  __html: sanitizeHtml(textContent, {
-                    parseStyleAttributes: true,
-                  }),
+                  __html: xss(textContent),
                 },
               }
             : {};

diff --git a/src/demo/data.tsx b/src/demo/data.tsx
@@ -16,25 +16,25 @@ const items: TimelineItemModel[] = [
     // date: '1945-05-01',
     cardSubtitle:
       'Men of the British Expeditionary Force (BEF) wade out to a destroyer during the evacuation from Dunkirk.',
-    cardDetailedText: [
-      `On 10 May 1940, Hitler began his long-awaited offensive in the west by invading neutral Holland and Belgium and attacking northern France.`,
-      `Holland capitulated after only five days of fighting, and the Belgians surrendered on 28 May. With the success of the German ‘Blitzkrieg’, the British Expeditionary Force and French troops were in danger of being cut off and destroyed.`,
-    ],
     // cardDetailedText: [
-    //   `On 10 May 1940, <a href="http://www.google.com">Hitler</a> began his <strong>long-awaited</strong> offensive in the west by invading neutral Holland and Belgium and attacking northern France.
-    //   <br>`,
-    //   `<ul>
-    //     <li>Holland capitulated after only five days of fighting, and the Belgians surrendered on 28 May.</li>
-    //     <li>With the success of the German ‘Blitzkrieg’, the British Expeditionary Force and French troops were in danger of being cut off and destroyed.</li>
-    //     <li>
-    //     Germany’s armoured spearheads reached the Channel coast on 20 May, and the British began to evacuate their troops from Dunkirk.
-    //     </li>
-    //     <li>
-    //     The evacuation was codenamed ‘Operation Dynamo’ and was directed by Admiral Bertram Ramsay from his headquarters deep in the cliffs at Dover.
-    //     </li>
-    //   </ul>
-    //   `,
+    //   `On 10 May 1940, Hitler began his long-awaited offensive in the west by invading neutral Holland and Belgium and attacking northern France.`,
+    //   `Holland capitulated after only five days of fighting, and the Belgians surrendered on 28 May. With the success of the German ‘Blitzkrieg’, the British Expeditionary Force and French troops were in danger of being cut off and destroyed.`,
     // ],
+    cardDetailedText: [
+      `On 10 May 1940, <a href="http://www.google.com">Hitler</a> began his <strong>long-awaited</strong> offensive in the west by invading neutral Holland and Belgium and attacking northern France.
+      <br>`,
+      `<ul>
+        <li>Holland capitulated after only five days of fighting, and the Belgians surrendered on 28 May.</li>
+        <li>With the success of the German ‘Blitzkrieg’, the British Expeditionary Force and French troops were in danger of being cut off and destroyed.</li>
+        <li>
+        Germany’s armoured spearheads reached the Channel coast on 20 May, and the British began to evacuate their troops from Dunkirk.
+        </li>
+        <li>
+        The evacuation was codenamed ‘Operation Dynamo’ and was directed by Admiral Bertram Ramsay from his headquarters deep in the cliffs at Dover.
+        </li>
+      </ul>
+      `,
+    ],
   },
   {
     title: '25 July 1941',

diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -1,6 +1,6 @@
 import { SlideShowType, TimelineMode } from '@models/TimelineModel';
 import { darkTheme, defaultTheme } from '../components/common/themes';
-import santizeHtml from 'sanitize-html';
+import xss from 'xss';
 
 export const uniqueID = () => {
   const chars =
@@ -73,7 +73,7 @@ export const isTextArray = (text: string | string[]): text is string[] => {
 
 export const sanitizeHtmlText = (text: string | string[]) => {
   if (isTextArray(text)) {
-    return text.map((t) => santizeHtml(t));
+    return text.map((t) => xss(t));
   }
-  return santizeHtml(text);
+  return xss(text);
 };