🐛 fix: sanitize innerHTML with dompurify (#176)

Co-authored-by: keni.yyb <[email protected]>

package.json

@@ -72,6 +72,7 @@
     "color": "^4.2.3",
     "copy-to-clipboard": "^3.3.3",
     "diff": "^5.1.0",
+    "dompurify": "^3.0.11",
     "fast-deep-equal": "^3.1.3",
     "immer": "^9.0.21",
     "lodash.flatten": "^4.4.0",

src/Highlight/hooks/useShiki.tsx

@@ -1,3 +1,4 @@
+import * as DOMPurify from 'dompurify';
 import { useEffect, useState } from 'react';
 import { getHighlighter, type Highlighter } from 'shiki/bundle/web';
 import { themeConfig } from '../theme';
@@ -42,9 +43,10 @@ export const useShiki = (language, theme) => {
         lang: language,
         theme,
       });
-      return result;
+      return DOMPurify.sanitize(result);
     } else {
-      return `<pre><code>${content}</code></pre>`;
+      // 在shiki加载完成之前，直接返回原始代码，同样需要进行xss过滤
+      return DOMPurify.sanitize(`<pre><code>${content}</code></pre>`);
     }
   };