From e1d3897e5e2b6d672eb5becf4247f8fa24aa81dc Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Mon, 31 Jan 2022 14:15:35 +0100
Subject: [PATCH] Clean up code, sanitize some inputs

---
 .../src/components/content-blocks/Solution.vue  | 14 +++++++++++---
 .../components/content-blocks/SubtitleBlock.vue | 17 ++++++++++++-----
 .../src/components/content-blocks/TextBlock.vue | 14 +++++++++++---
 .../content-blocks/assignment/Assignment.vue    |  6 ++++--
 client/src/helpers/new-note-mutation.js         |  2 --
 client/src/helpers/text.js                      |  2 +-
 client/src/pages/createContentBlock.vue         |  2 +-
 7 files changed, 40 insertions(+), 17 deletions(-)

diff --git a/client/src/components/content-blocks/Solution.vue b/client/src/components/content-blocks/Solution.vue
index 22b11a8e..614d5173 100644
--- a/client/src/components/content-blocks/Solution.vue
+++ b/client/src/components/content-blocks/Solution.vue
@@ -1,4 +1,5 @@
 <template>
+  <!-- eslint-disable vue/no-v-html -->
   <div
     class="solution"
     data-cy="solution"
@@ -17,13 +18,15 @@
         data-cy="solution-text"
 
         v-if="visible"
-        v-html="value.text"
+        v-html="sanitizedText"
       />
     </transition>
   </div>
 </template>
 
 <script>
+  import {sanitize} from '@/helpers/text';
+
   export default {
     props: ['value'],
 
@@ -33,6 +36,12 @@
       };
     },
 
+    computed: {
+      sanitizedText() {
+        return sanitize(this.value.text);
+      }
+    },
+
     methods: {
       toggle() {
         this.visible = !this.visible;
@@ -42,8 +51,7 @@
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
-  @import "@/styles/_functions.scss";
+  @import "~styles/helpers";
 
   .solution {
     display: grid;
diff --git a/client/src/components/content-blocks/SubtitleBlock.vue b/client/src/components/content-blocks/SubtitleBlock.vue
index 83e33974..7838824d 100644
--- a/client/src/components/content-blocks/SubtitleBlock.vue
+++ b/client/src/components/content-blocks/SubtitleBlock.vue
@@ -1,20 +1,27 @@
 <template>
+  <!-- eslint-disable vue/no-v-html -->
   <h5
     class="subtitle"
-    v-html="value.text"
+    v-html="sanitizedText"
   />
 </template>
 
 <script>
-  //todo: esacpe value.text
+  import {sanitize} from '@/helpers/text';
+
   export default {
-    props: ['value']
+    props: ['value'],
+
+    computed: {
+      sanitizedText() {
+        return sanitize(this.value.text);
+      }
+    }
   };
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
-  @import "@/styles/_mixins.scss";
+  @import "~styles/helpers";
 
   .subtitle {
     padding-top: 1px;
diff --git a/client/src/components/content-blocks/TextBlock.vue b/client/src/components/content-blocks/TextBlock.vue
index 6a11ec26..367a2e4a 100644
--- a/client/src/components/content-blocks/TextBlock.vue
+++ b/client/src/components/content-blocks/TextBlock.vue
@@ -1,14 +1,22 @@
 <template>
+  <!-- eslint-disable vue/no-v-html -->
   <div
     class="text-block"
-    v-html="value.text"
+    v-html="sanitizedText"
   />
 </template>
 
 <script>
-  // todo: escape text maybe
+  import {sanitize} from '@/helpers/text';
+
   export default {
-    props: ['value']
+    props: ['value'],
+
+    computed: {
+      sanitizedText() {
+        return sanitize(this.value.text);
+      }
+    }
   };
 </script>
 
diff --git a/client/src/components/content-blocks/assignment/Assignment.vue b/client/src/components/content-blocks/assignment/Assignment.vue
index 5573c934..b3be00f5 100644
--- a/client/src/components/content-blocks/assignment/Assignment.vue
+++ b/client/src/components/content-blocks/assignment/Assignment.vue
@@ -1,4 +1,5 @@
 <template>
+  <!-- eslint-disable vue/no-v-html -->
   <div
     :data-scrollto="value.id"
     class="assignment"
@@ -62,6 +63,7 @@
   import SPELL_CHECK_MUTATION from '@/graphql/gql/mutations/spellCheck.gql';
   import debounce from 'lodash/debounce';
   import cloneDeep from 'lodash/cloneDeep';
+  import {sanitize} from '@/helpers/text';
 
   const SubmissionForm = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/assignment/SubmissionForm');
   const Solution = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/Solution');
@@ -112,9 +114,9 @@
         return this.assignment.id ? this.assignment.id.replace(/=/g, '') : '';
       },
       feedbackText() {
-        // todo: should we maybe clean up this feedback text?
         let feedback = this.assignment.submission.submissionFeedback;
-        return `<span class="inline-title">Feedback von ${feedback.teacher.firstName} ${feedback.teacher.lastName}:</span> ${feedback.text}`;
+        let sanitizedFeedbackText = sanitize(feedback.text);
+        return `<span class="inline-title">Feedback von ${feedback.teacher.firstName} ${feedback.teacher.lastName}:</span> ${sanitizedFeedbackText}`;
       },
     },
 
diff --git a/client/src/helpers/new-note-mutation.js b/client/src/helpers/new-note-mutation.js
index 749849ed..281cd2d7 100644
--- a/client/src/helpers/new-note-mutation.js
+++ b/client/src/helpers/new-note-mutation.js
@@ -1,9 +1,7 @@
 import ADD_NOTE_MUTATION from '@/graphql/gql/mutations/addNote.gql';
 import CONTENT_BLOCK_QUERY from '@/graphql/gql/queries/contentBlockQuery.gql';
 import CHAPTER_QUERY from '@/graphql/gql/queries/chapterQuery.gql';
-import MODULE_QUERY from '@/graphql/gql/queries/modules/moduleDetailsQuery.gql';
 import INSTRUMENT_FRAGMENT from '@/graphql/gql/fragments/instrumentParts.gql';
-import gql from 'graphql-tag';
 import MODULE_FRAGMENT from '@/graphql/gql/fragments/moduleParts.gql';
 import {replaceAtIndex} from '@/graphql/immutable-operations';
 
diff --git a/client/src/helpers/text.js b/client/src/helpers/text.js
index 6802f773..e624e574 100644
--- a/client/src/helpers/text.js
+++ b/client/src/helpers/text.js
@@ -1,4 +1,4 @@
-const sanitize = html => {
+export const sanitize = html => {
   let doc = new DOMParser().parseFromString(html, 'text/html');
   return doc.body.textContent || '';
 };
diff --git a/client/src/pages/createContentBlock.vue b/client/src/pages/createContentBlock.vue
index 84c70a4a..5ed9de65 100644
--- a/client/src/pages/createContentBlock.vue
+++ b/client/src/pages/createContentBlock.vue
@@ -92,7 +92,7 @@
   import NEW_CONTENT_BLOCK_MUTATION from '@/graphql/gql/mutations/addContentBlock.gql';
   import {setUserBlockType} from '@/helpers/content-block';
   import MODULE_DETAILS_QUERY from '@/graphql/gql/queries/modules/moduleDetailsQuery.gql';
-  import {insertAtIndex, removeAtIndex, replaceAtIndex} from '@/graphql/immutable-operations';
+  import {removeAtIndex, replaceAtIndex} from '@/graphql/immutable-operations';
 
   export default Vue.extend({
     props: {