Tag component xss

packages/Webkul/Admin/package.json

@@ -18,6 +18,7 @@
         "@vee-validate/rules": "^4.9.1",
         "@vitejs/plugin-vue": "^4.2.3",
         "chartjs-chart-funnel": "^4.2.1",
+        "dompurify": "^3.1.7",
         "flatpickr": "^4.6.13",
         "mitt": "^3.0.1",
         "vee-validate": "^4.9.1",

packages/Webkul/Admin/src/DataGrids/Mail/EmailDataGrid.php

@@ -63,7 +63,11 @@ public function prepareColumns(): void
             'searchable' => false,
             'filterable' => false,
             'sortable'   => false,
-            'closure'    => fn ($row) => $row->attachments ? '<i class="icon-attachment text-2xl"></i>' : '',
+            'closure'    => function ($row) {
+                $emails = app(EmailRepository::class)->find($row->id)->emails()->withCount('attachments')->get();
+
+                return $emails->sum('attachments_count');
+            },
         ]);
 
         $this->addColumn([

packages/Webkul/Admin/src/Resources/assets/js/app.js

@@ -118,12 +118,14 @@ import VueCal from "./plugins/vue-cal";
     VueCal,
 ].forEach((plugin) => app.use(plugin));
 
-
 /**
  * Global directives.
  */
 import Debounce from "./directives/debounce";
+import DOMPurify from "./directives/dompurify";
 
 app.directive("debounce", Debounce);
+app.directive("safe-html", DOMPurify);
+
+export default app;
 
-export default app;

packages/Webkul/Admin/src/Resources/assets/js/directives/dompurify.js

@@ -0,0 +1,10 @@
+import DOMPurify from 'dompurify';
+
+export default {
+    beforeMount(el, binding) {
+        el.innerHTML = DOMPurify.sanitize(binding.value);
+    },
+    updated(el, binding) {
+        el.innerHTML = DOMPurify.sanitize(binding.value);
+    }
+};

packages/Webkul/Admin/src/Resources/views/components/activities/index.blade.php

@@ -189,7 +189,7 @@ class="dark:text-white"
                                         <p
                                             class="dark:text-white"
                                             v-if="activity.comment"
-                                            v-html="activity.comment"
+                                            v-safe-html="activity.comment"
                                         ></p>
 
                                         {!! view_render_event('admin.components.activities.content.activity.item.description.after') !!}

packages/Webkul/Admin/src/Resources/views/mail/index.blade.php

@@ -136,7 +136,9 @@ class="icon-checkbox-outline peer-checked:icon-checkbox-select cursor-pointer ro
                                     <!-- Content -->
                                     <div class="flex-frow flex items-center gap-2">
                                         <!-- Attachments -->
-                                        <p v-html="record.attachments"></p>
+                                        <p v-if="record.attachments > 0">
+                                            <i class="icon-attachment text-2xl"></i>
+                                        </p>
 
                                         <!-- Tags -->
                                         <span
@@ -155,8 +157,8 @@ class="flex items-center gap-1 rounded-md bg-rose-100 px-3 py-1.5 text-xs font-m
 
                                         <!-- Reply(Content) -->
                                         <p
-                                            class="!font-normal"
-                                            v-html="truncatedReply(record.reply)"
+                                            class="max-w-[600px] truncate !font-normal"
+                                            v-text="record.reply"
                                         ></p>
                                     </div>
 
@@ -413,16 +415,6 @@ class="primary-button"
                 },
 
                 methods: {
-                    truncatedReply(reply) {
-                        const maxLength = 100;
-
-                        if (reply.length > maxLength) {
-                            return `${reply.substring(0, maxLength)}...`;
-                        }
-
-                        return reply;
-                    },
-
                     toggleModal() {
                         this.draft.reply_to = [];
 

packages/Webkul/Admin/src/Resources/views/mail/view.blade.php

@@ -33,7 +33,7 @@
                         @lang('admin::app.mail.view.title') 
                     </div>
 
-                    <span class="label-active">{{ request('route') }}</span>
+                    <span class="label-active">{{ ucfirst(request('route')) }}</span>
 
                     {!! view_render_event('admin.mail.view.tags.before', ['email' => $email]) !!}
 
@@ -243,9 +243,9 @@ class="flex cursor-pointer items-center gap-2"
                     {!! view_render_event('admin.mail.view.mail_body.before', ['email' => $email]) !!}
 
                     <!-- Mail Body -->
-                    <div
-                        v-html="email.reply"
+                    <div 
                         class="dark:text-gray-300"
+                        v-safe-html="email.reply"
                     ></div>
                    
                     {!! view_render_event('admin.mail.view.mail_body.after', ['email' => $email]) !!}

public/admin/build/manifest.json

@@ -220,7 +220,7 @@
     "src": "node_modules/vue-cal/dist/i18n/zh-hk.es.js"
   },
   "src/Resources/assets/css/app.css": {
-    "file": "assets/app-d6168e0d.css",
+    "file": "assets/app-62037ade.css",
     "isEntry": true,
     "src": "src/Resources/assets/css/app.css"
   },
@@ -370,7 +370,7 @@
       "node_modules/vue-cal/dist/i18n/zh-hk.es.js",
       "node_modules/vue-cal/dist/drag-and-drop.es.js"
     ],
-    "file": "assets/app-2032dc2b.js",
+    "file": "assets/app-3d9f948a.js",
     "isEntry": true,
     "src": "src/Resources/assets/js/app.js"
   },