escaped-html

pkg/rancher-desktop/components/SnapshotCard.vue

@@ -22,6 +22,15 @@ function formatDate(value: string) {
   };
 }
 
+function escapeHTML(value: string) {
+  return value
+        .replace(/&/g, '&')
+        .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">