escaped-html

Signed-off-by: Vikalp Rusia <vikalprusia@gmail.com>

pkg/rancher-desktop/components/SnapshotCard.vue

@@ -22,6 +22,19 @@ function formatDate(value: string) {
   };
 }
 
+function escapeHTML(value: string|undefined) {
+  if (!value) {
+    return '';
+  }
+
+  return value
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#039;');
+}
+
 export default Vue.extend({
   name:  'snapshot-card',
   props: {
@@ -33,10 +46,12 @@ export default Vue.extend({
 
   computed: {
     ...mapGetters('k8sManager', { getK8sState: 'getK8sState' }),
-    snapshot(): Snapshot & { formattedCreateDate: { date: string, time: string } | null } {
+    snapshot(): Snapshot & { escapedHTMLName: string, escapedHTMLDescription: string, formattedCreateDate: { date: string, time: string } | null } {
       return {
         ...this.value,
-        formattedCreateDate: formatDate(this.value.created),
+        escapedHTMLName:        escapeHTML(this.value.name),
+        escapedHTMLDescription: escapeHTML(this.value.description),
+        formattedCreateDate:    formatDate(this.value.created),
       };
     },
     isRestoreDisabled(): boolean {
@@ -176,7 +191,7 @@ export default Vue.extend({
     <div class="content">
       <div class="header">
         <h2>
-          {{ snapshot.name }}
+          {{ snapshot.escapedHTMLName }}
         </h2>
         <div class="created">
           <span
@@ -187,10 +202,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">