Refactor HTML sanitization into utility function

Author: ruibaby

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

@@ -106,7 +106,7 @@ export class BaseCommentItem extends LitElement {
         }
       }
 
-        @unocss-placeholder;
+      @unocss-placeholder;
     `,
   ];
 }

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

@@ -22,6 +22,7 @@ import type { ConfigMapData } from './types';
 import './comment-editor';
 import { ofetch } from 'ofetch';
 import type { CommentEditor } from './comment-editor';
+import { cleanHtml } from './utils/html';
 
 export class BaseForm extends LitElement {
   @consume({ context: baseUrlContext })
@@ -278,7 +279,7 @@ export class BaseForm extends LitElement {
   }
 
   private debouncedSubmit = debounce((data: Record<string, unknown>) => {
-    const content = this.editorRef.value?.editor?.getHTML() || '';
+    const content = cleanHtml(this.editorRef.value?.editor?.getHTML());
     const characterCount =
       this.editorRef.value?.editor?.storage.characterCount.characters();
 

packages/comment-widget/src/comment-content.ts

@@ -1,9 +1,9 @@
 import { css, html, LitElement, type PropertyValues, unsafeCSS } from 'lit';
 import { property } from 'lit/decorators.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
-import sanitizeHtml from 'sanitize-html';
 import baseStyles from './styles/base';
 import contentStyles from './styles/content.css?inline';
+import { cleanHtml } from './utils/html';
 
 export class CommentContent extends LitElement {
   @property({ type: String })
@@ -55,14 +55,7 @@ export class CommentContent extends LitElement {
 
   protected override render() {
     return html`
-      <div class="content">${unsafeHTML(
-        sanitizeHtml(this.content, {
-          allowedAttributes: {
-            ...sanitizeHtml.defaults.allowedAttributes,
-            code: ['class'],
-          },
-        })
-      )}</div>
+      <div class="content">${unsafeHTML(cleanHtml(this.content))}</div>
     `;
   }
 

packages/comment-widget/src/comment-editor.ts

@@ -8,6 +8,7 @@ import contentStyles from './styles/content.css?inline';
 import './comment-editor-skeleton';
 import { property } from 'lit/decorators.js';
 import baseStyles from './styles/base';
+import { cleanHtml } from './utils/html';
 
 interface ActionItem {
   name?: string;
@@ -137,7 +138,7 @@ export class CommentEditor extends LitElement {
       this.dispatchEvent(
         new CustomEvent('update', {
           detail: {
-            content: this.editor?.getHTML(),
+            content: cleanHtml(this.editor?.getHTML()),
             characterCount: this.editor?.storage.characterCount.characters(),
           },
         })

packages/comment-widget/src/utils/html.ts

@@ -0,0 +1,13 @@
+import sanitizeHtml from 'sanitize-html';
+export function cleanHtml(content?: string) {
+  if (!content) {
+    return '';
+  }
+
+  return sanitizeHtml(content, {
+    allowedAttributes: {
+      ...sanitizeHtml.defaults.allowedAttributes,
+      code: ['class'],
+    },
+  });
+}