Properly sanitize HTML (#8809)

* Properly sanitize HTML

* Fix typo

Co-authored-by: ChunkyProgrammer <78101139+ChunkyProgrammer@users.noreply.github.com>

* Keep title on img tags for Invidious comment emojis

Co-authored-by: absidue <48293849+absidue@users.noreply.github.com>

---------

Co-authored-by: ChunkyProgrammer <78101139+ChunkyProgrammer@users.noreply.github.com>

Author: absidue

_scripts/_undefinedDefaultExport.mjs

@@ -0,0 +1 @@
+export default undefined

_scripts/webpack.renderer.config.js

@@ -200,7 +200,10 @@ const config = {
       'shaka-player$': 'shaka-player/dist/shaka-player.ui.js',
 
       // Make @fortawesome/vue-fontawesome use the trimmed down API instead of the original @fortawesome/fontawesome-svg-core
-      '@fortawesome/fontawesome-svg-core$': path.resolve(__dirname, '../src/renderer/fontawesome-minimal.js')
+      '@fortawesome/fontawesome-svg-core$': path.resolve(__dirname, '../src/renderer/fontawesome-minimal.js'),
+
+      // Fix dompurify not being tree-shaking friendly
+      dompurify$: path.resolve(__dirname, '_undefinedDefaultExport.mjs')
     },
     extensions: ['.js', '.vue']
   },

eslint.config.mjs

@@ -270,7 +270,11 @@ export default [
     rules: {
       '@stylistic/space-before-function-paren': 'off',
       '@stylistic/comma-dangle': ['error', 'only-multiline'],
-      'vue/no-v-html': 'off',
+
+      // Ban v-html as it inserts HTML via innerHTML without sanitizing it
+      // if inserting raw HTML is unavoidable the custom v-safer-html directive should be used
+      // which sanitizes the HTML before inserting it into the DOM
+      'vue/no-v-html': 'error',
 
       'no-console': ['error', {
         allow: ['warn', 'error'],
@@ -342,6 +346,15 @@ export default [
       }
     }
   },
+  {
+    files: ['src/renderer/directives/vSaferHtml.js'],
+    languageOptions: {
+      globals: {
+        // Fix Sanitizer not being listed in `globals` yet, remove it when it gets added in the future
+        Sanitizer: 'readable'
+      }
+    }
+  },
 
   ...eslintPluginJsonc.configs.base,
   {

package.json

@@ -58,6 +58,7 @@
     "@seald-io/nedb": "^4.1.2",
     "autolinker": "^4.1.5",
     "bgutils-js": "^3.2.0",
+    "dompurify": "^3.3.3",
     "electron-context-menu": "^4.1.1",
     "googlevideo": "^4.0.4",
     "marked": "^17.0.4",

src/renderer/App.vue

@@ -66,10 +66,10 @@
         </h1>
       </template>
       <bdo
+        v-safer-html.lenient="updateChangelog"
         class="changeLogText"
         dir="ltr"
         lang="en"
-        v-html="updateChangelog"
       />
       <FtFlexBox>
         <FtButton
@@ -129,6 +129,7 @@ import FtPlaylistAddVideoPrompt from './components/FtPlaylistAddVideoPrompt/FtPl
 import FtCreatePlaylistPrompt from './components/FtCreatePlaylistPrompt/FtCreatePlaylistPrompt.vue'
 import FtKeyboardShortcutPrompt from './components/FtKeyboardShortcutPrompt/FtKeyboardShortcutPrompt.vue'
 import FtSearchFilters from './components/FtSearchFilters/FtSearchFilters.vue'
+import { vSaferHtml } from './directives/vSaferHtml.js'
 
 import store from './store/index'
 

src/renderer/components/ChannelAbout/ChannelAbout.vue

@@ -7,9 +7,9 @@
     >
       <h2>{{ $t("Channel.About.Channel Description") }}</h2>
       <div
+        v-safer-html="description"
         class="aboutInfo"
         dir="auto"
-        v-html="description"
       />
     </template>
     <template
@@ -121,6 +121,7 @@ import { useI18n } from '../../composables/use-i18n-polyfill'
 
 import FtChannelBubble from '../../components/FtChannelBubble/FtChannelBubble.vue'
 import FtFlexBox from '../../components/ft-flex-box/ft-flex-box.vue'
+import { vSaferHtml } from '../../directives/vSaferHtml.js'
 
 import store from '../../store/index'
 

src/renderer/components/FtCommunityPost/FtCommunityPost.vue

@@ -53,9 +53,9 @@
       </p>
     </div>
     <p
+      v-safer-html="postText"
       class="postText"
       dir="auto"
-      v-html="postText"
     />
     <swiper-container
       v-if="postType === 'multiImage' && postContent.content.length > 0"
@@ -177,6 +177,7 @@ import FtListVideo from '../ft-list-video/ft-list-video.vue'
 import FtListPlaylist from '../FtListPlaylist/FtListPlaylist.vue'
 import FtCommunityPoll from '../FtCommunityPoll/FtCommunityPoll.vue'
 import FtShareButton from '../FtShareButton/FtShareButton.vue'
+import { vSaferHtml } from '../../directives/vSaferHtml.js'
 
 import store from '../../store/index'
 

src/renderer/components/FtListChannel/FtListChannel.vue

@@ -60,9 +60,9 @@
         </div>
         <p
           v-if="listType !== 'grid'"
+          v-safer-html="description"
           class="description"
           dir="auto"
-          v-html="description"
         />
       </div>
       <FtSubscribeButton
@@ -80,6 +80,7 @@
 import { computed } from 'vue'
 
 import FtSubscribeButton from '../FtSubscribeButton/FtSubscribeButton.vue'
+import { vSaferHtml } from '../../directives/vSaferHtml'
 
 import store from '../../store/index'
 

src/renderer/components/FtTimestampCatcher.vue

@@ -1,15 +1,18 @@
 <template>
+  <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events -->
   <p
+    v-safer-html="displayText"
     dir="auto"
-    @timestamp-clicked="catchTimestampClick"
-    v-html="displayText"
+    @click="catchTimestampClick"
   />
 </template>
 
 <script setup>
 import { computed } from 'vue'
 import { useRouter } from 'vue-router'
 
+import { vSaferHtml } from '../directives/vSaferHtml.js'
+
 const props = defineProps({
   inputHtml: {
     type: String,
@@ -40,15 +43,27 @@ const displayText = computed(() => props.inputHtml.replaceAll(/(?:(\d+):)?(\d+):
   }).href
 
   // Adding the URL lets the user open the video in a new window at this timestamp
-  return `<a tabindex="${props.linkTabIndex}" href="${url}" onclick="event.preventDefault();this.dispatchEvent(new CustomEvent('timestamp-clicked',{bubbles:true,detail:${time}}));window.scrollTo(0,0)">${timestamp}</a>`
+  return `<a tabindex="${props.linkTabIndex}" href="${url}" data-time="${time}">${timestamp}</a>`
 }))
 
 const emit = defineEmits(['timestamp-event'])
 
 /**
- * @param {CustomEvent} event
+ * @param {PointerEvent} event
  */
 function catchTimestampClick(event) {
-  emit('timestamp-event', event.detail)
+  /** @type {HTMLAnchorElement} */
+  const target = event.target
+
+  if (target.tagName === 'A' && target.dataset.time) {
+    const timeSeconds = parseInt(target.dataset.time)
+
+    if (!isNaN(timeSeconds)) {
+      event.preventDefault()
+
+      emit('timestamp-event', timeSeconds)
+      window.scrollTo(0, 0)
+    }
+  }
 }
 </script>

src/renderer/components/WatchVideoLiveChat/WatchVideoLiveChat.vue

@@ -136,9 +136,9 @@
             </p>
           </div>
           <p
+            v-safer-html="superChat.message"
             class="chatMessage"
             dir="auto"
-            v-html="superChat.message"
           />
         </div>
       </div>
@@ -181,9 +181,9 @@
             </div>
             <p
               v-if="comment.message"
+              v-safer-html="comment.message"
               class="chatMessage"
               dir="auto"
-              v-html="comment.message"
             />
           </template>
           <template
@@ -219,8 +219,8 @@
                 >
               </span>
               <bdi
+                v-safer-html="comment.message"
                 class="chatMessage"
-                v-html="comment.message"
               />
             </p>
           </template>
@@ -255,6 +255,7 @@ import { YTNodes } from 'youtubei.js'
 import FtLoader from '../FtLoader/FtLoader.vue'
 import FtCard from '../ft-card/ft-card.vue'
 import FtButton from '../FtButton/FtButton.vue'
+import { vSaferHtml } from '../../directives/vSaferHtml.js'
 
 import store from '../../store/index'