Sanitize comment content before rendering

Author: ruibaby

packages/comment-widget/package.json

@@ -48,12 +48,14 @@
     "javascript-time-ago": "^2.5.11",
     "lit": "^3.3.1",
     "ofetch": "^1.4.1",
+    "sanitize-html": "^2.17.0",
     "tiptap-extension-code-block-shiki": "^0.6.0",
     "ua-parser-js": "^2.0.4"
   },
   "devDependencies": {
     "@iconify/json": "^2.2.367",
     "@lit/localize-tools": "^0.8.0",
+    "@types/sanitize-html": "^2.16.0",
     "@unocss/reset": "^66.4.2",
     "lit-analyzer": "^2.0.3",
     "unocss": "^66.4.1"

packages/comment-widget/src/base-comment-item.ts

@@ -9,6 +9,7 @@ import contentStyles from './styles/content.css?inline';
 import { formatDate, timeAgo } from './utils/date';
 import './commenter-ua-bar';
 import { consume } from '@lit/context';
+import sanitizeHtml from 'sanitize-html';
 import { configMapDataContext } from './context';
 import type { ConfigMapData } from './types';
 
@@ -120,7 +121,7 @@ export class BaseCommentItem extends LitElement {
         </div>
 
         <div class="item-content mt-2 content">
-          <slot name="pre-content"></slot>${unsafeHTML(this.content)}
+          <slot name="pre-content"></slot>${unsafeHTML(sanitizeHtml(this.content))}
         </div>
 
         <div class="item-actions mt-2 flex items-center gap-3">