Sanitize html

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",

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
     }

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"

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>

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>

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>

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

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>

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

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">

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">

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;

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)
 }

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

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>

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>

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>

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>

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"

yarn.lock

@@ -0,0 +1,4 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+