From d090adc1f12c5fdf5d076d6c0e244f00648f77f1 Mon Sep 17 00:00:00 2001
From: wvffle <funkwhale@wvffle.net>
Date: Fri, 1 Jul 2022 13:55:13 +0000
Subject: [PATCH] Sanitize html

---
 front/package.json                            |  2 ++
 front/src/components/AboutPod.vue             | 16 ++++++---------
 front/src/components/Home.vue                 |  4 ++--
 front/src/components/SanitizedHtml.vue        | 20 +++++++++++++++++++
 front/src/components/auth/Plugin.vue          | 20 +++++++++----------
 front/src/components/common/ContentForm.vue   |  4 ++--
 .../components/common/RenderedDescription.vue |  2 +-
 front/src/components/library/TrackBase.vue    |  4 ++--
 .../manage/moderation/InstancePolicyCard.vue  |  2 +-
 .../manage/moderation/NotesThread.vue         |  2 +-
 .../manage/moderation/ReportCard.vue          |  2 +-
 .../notifications/NotificationRow.vue         |  9 +++++----
 front/src/init/globalComponents.ts            |  2 ++
 front/src/views/Notifications.vue             |  2 +-
 front/src/views/admin/ChannelDetail.vue       |  5 ++++-
 front/src/views/admin/library/AlbumDetail.vue |  5 ++++-
 .../src/views/admin/library/ArtistDetail.vue  |  5 ++++-
 front/src/views/admin/library/TrackDetail.vue |  5 ++++-
 front/yarn.lock                               | 14 ++++++++++++-
 yarn.lock                                     |  4 ++++
 20 files changed, 89 insertions(+), 40 deletions(-)
 create mode 100644 front/src/components/SanitizedHtml.vue
 create mode 100644 yarn.lock

diff --git a/front/package.json b/front/package.json
index d000e7b3e..d504ea0e0 100644
--- a/front/package.json
+++ b/front/package.json
@@ -23,6 +23,7 @@
     "axios": "0.27.2",
     "axios-auth-refresh": "3.3.1",
     "diff": "5.1.0",
+    "dompurify": "^2.3.8",
     "focus-trap": "6.9.4",
     "fomantic-ui-css": "2.8.8",
     "howler": "2.2.3",
@@ -50,6 +51,7 @@
     "vuex-router-sync": "5.0.0"
   },
   "devDependencies": {
+    "@types/dompurify": "^2.3.3",
     "@types/jest": "28.1.3",
     "@types/jquery": "3.5.14",
     "@types/lodash-es": "4.17.6",
diff --git a/front/src/components/AboutPod.vue b/front/src/components/AboutPod.vue
index 4c3d0dfdd..30f9c5b19 100644
--- a/front/src/components/AboutPod.vue
+++ b/front/src/components/AboutPod.vue
@@ -1,6 +1,3 @@
-<!-- eslint-disable vue/no-v-html
-We render some markdown to html here, the content is set by the admin so we should be save
--->
 <template>
   <main
     v-title="labels.title"
@@ -80,9 +77,9 @@ We render some markdown to html here, the content is set by the admin so we shou
                   About this pod
                 </translate>
               </h2>
-              <div
+              <sanitized-html 
                 v-if="longDescription"
-                v-html="markdown.makeHtml(longDescription)"
+                :html="markdown.makeHtml(longDescription)"
               />
               <p v-else>
                 <translate translate-context="Content/About/Paragraph">
@@ -98,9 +95,9 @@ We render some markdown to html here, the content is set by the admin so we shou
                   Rules
                 </translate>
               </h3>
-              <div
+              <sanitized-html
                 v-if="rules"
-                v-html="markdown.makeHtml(rules)"
+                :html="markdown.makeHtml(rules)"
               />
               <p v-else>
                 <translate translate-context="Content/About/Paragraph">
@@ -116,9 +113,9 @@ We render some markdown to html here, the content is set by the admin so we shou
                   Terms and privacy policy
                 </translate>
               </h3>
-              <div
+              <sanitized-html
                 v-if="terms"
-                v-html="markdown.makeHtml(terms)"
+                :html="markdown.makeHtml(terms)"
               />
               <p v-else>
                 <translate translate-context="Content/About/Paragraph">
@@ -444,7 +441,6 @@ export default {
   },
   data () {
     return {
-      // TODO (wvffle): Remove v-html
       markdown: new showdown.Converter(),
       showAllowedDomains: false
     }
diff --git a/front/src/components/Home.vue b/front/src/components/Home.vue
index fddf12f47..f766cb068 100644
--- a/front/src/components/Home.vue
+++ b/front/src/components/Home.vue
@@ -45,10 +45,10 @@
                   </translate>
                 </p>
                 <template v-if="renderedDescription || rules">
-                  <div
+                  <sanitized-html
                     v-if="renderedDescription"
                     id="renderedDescription"
-                    v-html="renderedDescription"
+                    :html="renderedDescription"
                   />
                   <div
                     v-if="renderedDescription"
diff --git a/front/src/components/SanitizedHtml.vue b/front/src/components/SanitizedHtml.vue
new file mode 100644
index 000000000..92f59cfd8
--- /dev/null
+++ b/front/src/components/SanitizedHtml.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { sanitize } from 'dompurify'
+import { computed, h } from 'vue'
+
+interface Props {
+  tag?: string
+  html: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  tag: 'div' 
+})
+
+const html = computed(() => sanitize(props.html))
+const root = () => h(props.tag, { innerHTML: html.value })
+</script>
+
+<template>
+  <root />
+</template>
\ No newline at end of file
diff --git a/front/src/components/auth/Plugin.vue b/front/src/components/auth/Plugin.vue
index 1e9f1339a..12d5f49a6 100644
--- a/front/src/components/auth/Plugin.vue
+++ b/front/src/components/auth/Plugin.vue
@@ -4,9 +4,9 @@
     @submit.prevent="submit"
   >
     <h3>{{ plugin.label }}</h3>
-    <div
+    <sanitized-html
       v-if="plugin.description"
-      v-html="markdown.makeHtml(plugin.description)"
+      :html="markdown.makeHtml(plugin.description)"
     />
     <template v-if="plugin.homepage">
       <div class="ui small hidden divider" />
@@ -84,9 +84,9 @@
             v-model="values[field.name]"
             type="text"
           >
-          <div
+          <sanitized-html
             v-if="field.help"
-            v-html="markdown.makeHtml(field.help)"
+            :html="markdown.makeHtml(field.help)"
           />
         </div>
         <div
@@ -100,9 +100,9 @@
             type="text"
             rows="5"
           />
-          <div
+          <sanitized-html
             v-if="field.help"
-            v-html="markdown.makeHtml(field.help)"
+            :html="markdown.makeHtml(field.help)"
           />
         </div>
         <div
@@ -115,9 +115,9 @@
             v-model="values[field.name]"
             type="url"
           >
-          <div
+          <sanitized-html
             v-if="field.help"
-            v-html="markdown.makeHtml(field.help)"
+            :html="markdown.makeHtml(field.help)"
           />
         </div>
         <div
@@ -130,9 +130,9 @@
             v-model="values[field.name]"
             type="password"
           >
-          <div
+          <sanitized-html
             v-if="field.help"
-            v-html="markdown.makeHtml(field.help)"
+            :html="markdown.makeHtml(field.help)"
           />
         </div>
       </template>
diff --git a/front/src/components/common/ContentForm.vue b/front/src/components/common/ContentForm.vue
index 5cf0f44b7..f9fc3f673 100644
--- a/front/src/components/common/ContentForm.vue
+++ b/front/src/components/common/ContentForm.vue
@@ -36,9 +36,9 @@
             Nothing to preview.
           </translate>
         </p>
-        <div
+        <sanitized-html
           v-else
-          v-html="preview"
+          :html="preview"
         />
       </template>
       <template v-else>
diff --git a/front/src/components/common/RenderedDescription.vue b/front/src/components/common/RenderedDescription.vue
index aab47ca58..9fa2551a9 100644
--- a/front/src/components/common/RenderedDescription.vue
+++ b/front/src/components/common/RenderedDescription.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <template v-if="content && !isUpdating">
-      <div v-html="html" />
+      <sanitized-html :html="html" />
       <template v-if="isTruncated">
         <div class="ui small hidden divider" />
         <a
diff --git a/front/src/components/library/TrackBase.vue b/front/src/components/library/TrackBase.vue
index 06846e2b9..a43aee07d 100644
--- a/front/src/components/library/TrackBase.vue
+++ b/front/src/components/library/TrackBase.vue
@@ -17,9 +17,9 @@
             <div class="eight wide left aligned column">
               <h1 class="ui header">
                 {{ track.title }}
-                <div
+                <sanitized-html
                   class="sub header"
-                  v-html="subtitle"
+                  :html="subtitle"
                 />
               </h1>
             </div>
diff --git a/front/src/components/manage/moderation/InstancePolicyCard.vue b/front/src/components/manage/moderation/InstancePolicyCard.vue
index 3267e42a0..646c622dd 100644
--- a/front/src/components/manage/moderation/InstancePolicyCard.vue
+++ b/front/src/components/manage/moderation/InstancePolicyCard.vue
@@ -67,7 +67,7 @@
     <div v-if="markdown && object.summary">
       <div class="ui hidden divider" />
       <p><strong><translate translate-context="Content/Moderation/*/Noun">Reason</translate></strong></p>
-      <div v-html="markdown.makeHtml(object.summary)" />
+      <sanitized-html :html="markdown.makeHtml(object.summary)" />
     </div>
     <div class="ui hidden divider" />
     <button
diff --git a/front/src/components/manage/moderation/NotesThread.vue b/front/src/components/manage/moderation/NotesThread.vue
index 59f2dd8b6..21bb4bd20 100644
--- a/front/src/components/manage/moderation/NotesThread.vue
+++ b/front/src/components/manage/moderation/NotesThread.vue
@@ -20,7 +20,7 @@
         </div>
         <div class="extra text">
           <expandable-div :content="note.summary">
-            <div v-html="markdown.makeHtml(note.summary)" />
+            <sanitized-html :html="markdown.makeHtml(note.summary)" />
           </expandable-div>
         </div>
         <div class="meta">
diff --git a/front/src/components/manage/moderation/ReportCard.vue b/front/src/components/manage/moderation/ReportCard.vue
index 38eeec11a..f2e1fdabf 100644
--- a/front/src/components/manage/moderation/ReportCard.vue
+++ b/front/src/components/manage/moderation/ReportCard.vue
@@ -167,7 +167,7 @@
             class="summary"
             :content="obj.summary"
           >
-            <div v-html="markdown.makeHtml(obj.summary)" />
+            <sanitized-html :html="markdown.makeHtml(obj.summary)" />
           </expandable-div>
         </div>
         <aside class="column">
diff --git a/front/src/components/notifications/NotificationRow.vue b/front/src/components/notifications/NotificationRow.vue
index 50e6d309d..028862b43 100644
--- a/front/src/components/notifications/NotificationRow.vue
+++ b/front/src/components/notifications/NotificationRow.vue
@@ -13,16 +13,17 @@
         custom
         :to="notificationData.detailUrl"
       >
-        <span
+        <sanitized-html
+          tag="span"
           class="link"
           @click="navigate"
           @keypress.enter="navigate"
-          v-html="notificationData.message"
+          :html="notificationData.message"
         />
       </router-link>
-      <div
+      <sanitized-html
         v-else
-        v-html="notificationData.message"
+        :html="notificationData.message"
       />
       <template v-if="notificationData.acceptFollow">
 &nbsp;
diff --git a/front/src/init/globalComponents.ts b/front/src/init/globalComponents.ts
index 76142e9c1..654f9aad7 100644
--- a/front/src/init/globalComponents.ts
+++ b/front/src/init/globalComponents.ts
@@ -19,6 +19,7 @@ import ActionFeedback from '~/components/common/ActionFeedback.vue'
 import RenderedDescription from '~/components/common/RenderedDescription.vue'
 import ContentForm from '~/components/common/ContentForm.vue'
 import InlineSearchBar from '~/components/common/InlineSearchBar.vue'
+import SanitizedHtml from '~/components/SanitizedHtml.vue'
 
 export const install: InitModule = ({ app }) => {
   app.component('HumanDate', HumanDate)
@@ -40,4 +41,5 @@ export const install: InitModule = ({ app }) => {
   app.component('RenderedDescription', RenderedDescription)
   app.component('ContentForm', ContentForm)
   app.component('InlineSearchBar', InlineSearchBar)
+  app.component('SanitizedHtml', SanitizedHtml)
 }
diff --git a/front/src/views/Notifications.vue b/front/src/views/Notifications.vue
index 8028c4bc1..5ae03987b 100644
--- a/front/src/views/Notifications.vue
+++ b/front/src/views/Notifications.vue
@@ -25,7 +25,7 @@
                     Support this Funkwhale pod
                   </translate>
                 </h4>
-                <div v-html="markdown.makeHtml($store.state.instance.settings.instance.support_message.value)" />
+                <sanitized-html :html="markdown.makeHtml($store.state.instance.settings.instance.support_message.value)" />
               </div>
               <div class="ui bottom attached segment">
                 <form
diff --git a/front/src/views/admin/ChannelDetail.vue b/front/src/views/admin/ChannelDetail.vue
index 22dccb41c..50f325322 100644
--- a/front/src/views/admin/ChannelDetail.vue
+++ b/front/src/views/admin/ChannelDetail.vue
@@ -201,7 +201,10 @@
                         Description
                       </translate>
                     </td>
-                    <td v-html="object.artist.description.html" />
+                    <sanitized-html 
+                      tag="td"
+                      :html="object.artist.description.html" 
+                    />
                   </tr>
                   <tr v-if="object.actor.url">
                     <td>
diff --git a/front/src/views/admin/library/AlbumDetail.vue b/front/src/views/admin/library/AlbumDetail.vue
index 5f994c502..7f535b5a2 100644
--- a/front/src/views/admin/library/AlbumDetail.vue
+++ b/front/src/views/admin/library/AlbumDetail.vue
@@ -212,7 +212,10 @@
                         Description
                       </translate>
                     </td>
-                    <td v-html="object.description.html" />
+                    <sanitized-html 
+                      tag="td"
+                      :html="object.description.html" 
+                    />
                   </tr>
                 </tbody>
               </table>
diff --git a/front/src/views/admin/library/ArtistDetail.vue b/front/src/views/admin/library/ArtistDetail.vue
index b0fad2549..296723469 100644
--- a/front/src/views/admin/library/ArtistDetail.vue
+++ b/front/src/views/admin/library/ArtistDetail.vue
@@ -211,7 +211,10 @@
                         Description
                       </translate>
                     </td>
-                    <td v-html="object.description.html" />
+                    <sanitized-html 
+                      tag="td"
+                      :html="object.description.html" 
+                    />
                   </tr>
                 </tbody>
               </table>
diff --git a/front/src/views/admin/library/TrackDetail.vue b/front/src/views/admin/library/TrackDetail.vue
index b1a632b13..3658b8bae 100644
--- a/front/src/views/admin/library/TrackDetail.vue
+++ b/front/src/views/admin/library/TrackDetail.vue
@@ -277,7 +277,10 @@
                         Description
                       </translate>
                     </td>
-                    <td v-html="object.description.html" />
+                    <sanitized-html 
+                      tag="td"
+                      :html="object.description.html" 
+                    />
                   </tr>
                 </tbody>
               </table>
diff --git a/front/yarn.lock b/front/yarn.lock
index 80e0ee82a..9f53545fc 100644
--- a/front/yarn.lock
+++ b/front/yarn.lock
@@ -1363,6 +1363,13 @@
   dependencies:
     "@babel/types" "^7.3.0"
 
+"@types/dompurify@^2.3.3":
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/@types/dompurify/-/dompurify-2.3.3.tgz#c24c92f698f77ed9cc9d9fa7888f90cf2bfaa23f"
+  integrity sha512-nnVQSgRVuZ/843oAfhA25eRSNzUFcBPk/LOiw5gm8mD9/X7CNcbRkQu/OsjCewO8+VIYfPxUnXvPEVGenw14+w==
+  dependencies:
+    "@types/trusted-types" "*"
+
 "@types/estree@0.0.39":
   version "0.0.39"
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f"
@@ -1496,7 +1503,7 @@
   resolved "https://registry.yarnpkg.com/@types/strip-json-comments/-/strip-json-comments-0.0.30.tgz#9aa30c04db212a9a0649d6ae6fd50accc40748a1"
   integrity sha512-7NQmHra/JILCd1QqpSzl8+mJRc8ZHz3uDm8YV1Ks9IhK0epEiTw8aIErbvH9PI+6XbqhyIQy3462nEsn7UVzjQ==
 
-"@types/trusted-types@^2.0.2":
+"@types/trusted-types@*", "@types/trusted-types@^2.0.2":
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.2.tgz#fc25ad9943bcac11cceb8168db4f275e0e72e756"
   integrity sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==
@@ -2905,6 +2912,11 @@ domhandler@^5.0.1, domhandler@^5.0.2, domhandler@^5.0.3:
   dependencies:
     domelementtype "^2.3.0"
 
+dompurify@^2.3.8:
+  version "2.3.8"
+  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-2.3.8.tgz#224fe9ae57d7ebd9a1ae1ac18c1c1ca3f532226f"
+  integrity sha512-eVhaWoVibIzqdGYjwsBWodIQIaXFSB+cKDf4cfxLMsK0xiud6SE+/WCVx/Xw/UwQsa4cS3T2eITcdtmTg2UKcw==
+
 domutils@^2.5.2, domutils@^2.8.0:
   version "2.8.0"
   resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.8.0.tgz#4437def5db6e2d1f5d6ee859bd95ca7d02048135"
diff --git a/yarn.lock b/yarn.lock
new file mode 100644
index 000000000..fb57ccd13
--- /dev/null
+++ b/yarn.lock
@@ -0,0 +1,4 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+