improved output sanitization of several views

vue/package.json

@@ -30,6 +30,7 @@
     "vue-infinite-loading": "^2.4.5",
     "vue-multiselect": "^2.1.6",
     "vue-property-decorator": "^9.1.2",
+    "vue-sanitize": "^0.2.2",
     "vue-simple-calendar": "^5.0.1",
     "vue-template-compiler": "^2.6.14",
     "vue2-touch-events": "^3.2.2",
@@ -86,4 +87,4 @@
     "@vue/cli-plugin-pwa/workbox-webpack-plugin": "^5.1.3",
     "coa": "2.0.2"
   }
-}
+}

vue/src/apps/ExportResponseView/ExportResponseView.vue

@@ -43,7 +43,7 @@
             <div class="row">
                 <div class="col col-md-12">
                     <label for="id_textarea">{{ $t("Information") }}</label>
-                    <textarea id="id_textarea" ref="output_text" class="form-control" style="height: 50vh" v-html="export_info.msg" disabled></textarea>
+                    <textarea id="id_textarea" ref="output_text" class="form-control" style="height: 50vh" v-html="$sanitize(export_info.msg)" disabled></textarea>
                 </div>
             </div>
             <br />
@@ -65,7 +65,8 @@ import LoadingSpinner from "@/components/LoadingSpinner"
 import { ApiApiFactory } from "@/utils/openapi/api.ts"
 
 Vue.use(BootstrapVue)
-
+import VueSanitize from "vue-sanitize";
+Vue.use(VueSanitize);
 export default {
     name: "ExportResponseView",
     mixins: [ResolveUrlMixin, ToastMixin],

vue/src/apps/ImportResponseView/ImportResponseView.vue

@@ -143,7 +143,7 @@
                                 <b-card>
                                     <textarea id="id_textarea" ref="output_text" class="form-control"
                                               style="height: 50vh"
-                                              v-html="import_info.msg"
+                                              v-html="$sanitize(import_info.msg)"
                                               disabled></textarea>
                                 </b-card>
                             </b-collapse>
@@ -168,7 +168,9 @@ import {ResolveUrlMixin, ToastMixin, RandomIconMixin} from "@/utils/utils";
 import LoadingSpinner from "@/components/LoadingSpinner";
 
 import {ApiApiFactory} from "@/utils/openapi/api.ts";
+import VueSanitize from "vue-sanitize";
 
+Vue.use(VueSanitize);
 Vue.use(BootstrapVue)
 
 export default {

vue/src/components/Badges/OnHand.vue

@@ -1,11 +1,15 @@
 <template>
     <span>
-        <b-button v-if="!item.ignore_shopping" class="btn text-decoration-none fas px-1 py-0 border-0" variant="link" v-b-popover.hover.html :title="Title" :class="IconClass" @click="toggleOnHand" />
+        <b-button v-if="!item.ignore_shopping" class="btn text-decoration-none fas px-1 py-0 border-0" variant="link" v-b-popover.hover.html :title="$sanitize(Title)" :class="IconClass" @click="toggleOnHand" />
     </span>
 </template>
 
 <script>
 import { ApiMixin } from "@/utils/utils"
+import Vue from "vue"
+import VueSanitize from "vue-sanitize";
+Vue.use(VueSanitize);
+
 
 export default {
     name: "OnHandBadge",

vue/src/components/Badges/Shopping.vue

@@ -4,7 +4,7 @@
             <i
                 class="fas"
                 v-b-popover.hover.html
-                :title="[shopping ? $t('RemoveFoodFromShopping', { food: item.name }) : $t('AddFoodToShopping', { food: item.name })]"
+                :title="[shopping ? $t('RemoveFoodFromShopping', { food: $sanitize(item.name) }) : $t('AddFoodToShopping', { food: $sanitize(item.name) })]"
                 :class="[shopping ? 'text-success fa-shopping-cart' : 'text-muted fa-cart-plus']"
             />
         </b-button>
@@ -22,6 +22,9 @@
 
 <script>
 import { ApiMixin, StandardToasts } from "@/utils/utils"
+import Vue from "vue"
+import VueSanitize from "vue-sanitize";
+Vue.use(VueSanitize);
 
 export default {
     name: "ShoppingBadge",

vue/src/components/GenericHorizontalCard.vue

@@ -93,7 +93,7 @@
                 "
             >
                 <i class="fas fa-expand-arrows-alt fa-fw"></i> <b>{{ $t("Move") }}</b
-                >: <span v-html="$t('move_confirmation', { child: source.name, parent: item.name })"></span>
+                >: <span v-html="$t('move_confirmation', { child: $sanitize(source.name), parent: $sanitize(item.name) })"></span>
             </b-list-group-item>
             <b-list-group-item
                 v-if="useMerge"
@@ -104,7 +104,7 @@
                 "
             >
                 <i class="fas fa-compress-arrows-alt fa-fw"></i> <b>{{ $t("Merge") }}</b
-                >: <span v-html="$t('merge_confirmation', { source: source.name, target: item.name })"></span>
+                >: <span v-html="$t('merge_confirmation', { source: $sanitize(source.name), target: $sanitize(item.name) })"></span>
             </b-list-group-item>
             <b-list-group-item
                 v-if="useMerge"
@@ -115,7 +115,7 @@
                 "
             >
                 <i class="fas fa-robot fa-fw"></i> <b>{{ $t("Merge") }} & {{ $t("Automate") }}</b
-                >: <span v-html="$t('merge_confirmation', { source: source.name, target: item.name })"></span> {{ $t("create_rule") }}
+                >: <span v-html="$t('merge_confirmation', { source: $sanitize(source.name), target: $sanitize(item.name) })"></span> {{ $t("create_rule") }}
                 <b-badge v-b-tooltip.hover :title="$t('warning_feature_beta')">BETA</b-badge>
             </b-list-group-item>
             <b-list-group-item action v-on:click="closeMenu()">
@@ -134,6 +134,9 @@ import RecipeCard from "@/components/RecipeCard"
 import { mixin as clickaway } from "vue-clickaway"
 import { createPopper } from "@popperjs/core"
 import {ApiMixin} from "@/utils/utils";
+import Vue from "vue"
+import VueSanitize from "vue-sanitize";
+Vue.use(VueSanitize);
 
 export default {
     name: "GenericHorizontalCard",

vue/src/components/IngredientComponent.vue

@@ -59,6 +59,10 @@ import { calculateAmount, ResolveUrlMixin, ApiMixin } from "@/utils/utils"
 import OnHandBadge from "@/components/Badges/OnHand"
 import ShoppingBadge from "@/components/Badges/Shopping"
 
+import Vue from "vue"
+import VueSanitize from "vue-sanitize";
+Vue.use(VueSanitize);
+
 export default {
     name: "IngredientComponent",
     components: { OnHandBadge, ShoppingBadge },
@@ -124,7 +128,7 @@ export default {
     },
     methods: {
         calculateAmount: function (x) {
-            return calculateAmount(x, this.ingredient_factor)
+            return this.$sanitize(calculateAmount(x, this.ingredient_factor))
         },
         // sends parent recipe ingredient to notify complete has been toggled
         done: function () {

vue/src/components/NutritionComponent.vue

@@ -55,6 +55,10 @@
 <script>
 
 import {calculateAmount, calculateEnergy, energyHeading} from "@/utils/utils";
+import Vue from "vue"
+import VueSanitize from "vue-sanitize";
+Vue.use(VueSanitize);
+
 
 export default {
   name: 'NutritionComponent',
@@ -64,13 +68,13 @@ export default {
   },
   methods: {
     calculateAmount: function (x) {
-      return calculateAmount(x, this.ingredient_factor)
+      return this.$sanitize(calculateAmount(x, this.ingredient_factor))
     },
     calculateEnergy: function (x) {
-      return calculateEnergy(x, this.ingredient_factor)
+      return this.$sanitize(calculateEnergy(x, this.ingredient_factor))
     },
     energy: function (x) {
-      return energyHeading()
+      return this.$sanitize(energyHeading())
     }
   }
 }