fix(comments): xss filter issue and blockquate styles

components/poll/Comments.vue

@@ -1,8 +1,5 @@
 <script setup lang="ts">
 import dayjs from 'dayjs'
-
-// FilterXSS
-import { filterXSS } from 'xss'
 import type { PollDetailRes } from '@/composables/api'
 import { getAvatarURLByHash } from '~/utils/avatar'
 import { PollMethod } from '~/enums/poll'
@@ -31,9 +28,9 @@ const render = (record: PollDetailRes['records'][0]): string => {
     } 票。`
   }
   if (record.comment) {
-    tpl += `  \n${filterXSS(formatPollComment(record.comment))}`
+    tpl += `  \n${formatPollComment(record.comment)}`
   }
-  return renderMarkdown(tpl)
+  return filterXSS(renderMarkdown(tpl))
 }
 // watch(records, (val) => console.log(val))
 </script>
@@ -108,6 +105,10 @@ const render = (record: PollDetailRes['records'][0]): string => {
         img {
           @apply rounded-md w-fit block mx-auto w-full h-auto my-2 cursor-pointer;
         }
+
+        blockquote {
+          @apply m-0 my-1.5 pl-2.5 py-1.5 border-0 border-l-4 border-solid border-gray-300 bg-gray-50 dark:border-gray-500 dark:bg-gray-800;
+        }
       }
     }
   }

components/review/records/Card.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import dayjs from 'dayjs'
-import { filterXSS } from 'xss'
 import { UserRole } from '@/enums/user'
 import { PollStatus } from '@/enums/poll'
 import type { UserPollLogsRes } from '@/composables/api'
@@ -61,7 +60,7 @@ const emit = defineEmits<{
         <Fancybox
           class="comment"
           v-html="
-            renderMarkdown(filterXSS(formatPollComment(userPollLog.comment)))
+            filterXSS(renderMarkdown(formatPollComment(userPollLog.comment)))
           "
         ></Fancybox>
       </div>
@@ -122,6 +121,10 @@ const emit = defineEmits<{
       img {
         @apply rounded-md w-fit block mx-auto w-full h-auto my-2 cursor-pointer;
       }
+
+      blockquote {
+        @apply m-0 my-1.5 px-2.5 py-1.5 border-0 border-l-4 border-solid border-gray-300 bg-gray-50 dark:border-gray-500 dark:bg-gray-800;
+      }
     }
   }
 }

utils/xss.ts

@@ -0,0 +1,12 @@
+import { FilterXSS, getDefaultWhiteList } from 'xss'
+
+const xss = new FilterXSS({
+  whiteList: {
+    ...getDefaultWhiteList(),
+    img: ['src', 'alt', 'title', 'width', 'height', 'loading', 'data-fancybox']
+  }
+})
+
+export function filterXSS(html: string): string {
+  return xss.process(html)
+}