From 6f98007bc2b6b6c68e746d58eed1f8daf502f4fa Mon Sep 17 00:00:00 2001
From: Vikalp Rusia <vikalprusia@gmail.com>
Date: Wed, 25 Sep 2024 13:45:29 +0530
Subject: [PATCH] escaped-html

---
 pkg/rancher-desktop/components/SnapshotCard.vue | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/pkg/rancher-desktop/components/SnapshotCard.vue b/pkg/rancher-desktop/components/SnapshotCard.vue
index 3daa55c9fff..3cc0e11f147 100644
--- a/pkg/rancher-desktop/components/SnapshotCard.vue
+++ b/pkg/rancher-desktop/components/SnapshotCard.vue
@@ -22,6 +22,15 @@ function formatDate(value: string) {
   };
 }
 
+function escapeHTML(value: string) {
+  return value
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#039;');
+}
+
 export default Vue.extend({
   name:  'snapshot-card',
   props: {
@@ -36,6 +45,8 @@ export default Vue.extend({
     snapshot(): Snapshot & { formattedCreateDate: { date: string, time: string } | null } {
       return {
         ...this.value,
+        escapedHTMLName: escapeHTML(this.value.name),
+        escapedHTMLDescription: escapeHTML(this.value.description),
         formattedCreateDate: formatDate(this.value.created),
       };
     },
@@ -176,7 +187,7 @@ export default Vue.extend({
     <div class="content">
       <div class="header">
         <h2>
-          {{ snapshot.name }}
+          {{ snapshot.escapedHTMLName }}
         </h2>
         <div class="created">
           <span
@@ -187,10 +198,10 @@ export default Vue.extend({
         </div>
       </div>
       <div
-        v-if="snapshot.description"
+        v-if="snapshot.escapedHTMLDescription"
         class="description"
       >
-        <span class="value">{{ snapshot.description }}</span>
+        <span class="value">{{ snapshot.escapedHTMLDescription }}</span>
       </div>
     </div>
     <div class="actions">