Fix severe vulnerability in case of a malicious Piped/YouTube server.

package.json

@@ -14,6 +14,7 @@
         "@fortawesome/vue-fontawesome": "^3.0.0-4",
         "core-js": "^3.13.1",
         "css-loader": "^5.2.6",
+        "dompurify": "^2.2.9",
         "hotkeys-js": "^3.8.5",
         "register-service-worker": "^1.7.1",
         "shaka-player": "3.1.0",

src/components/Channel.vue

@@ -4,7 +4,7 @@
     <div v-if="channel" v-show="!channel.error">
         <h1 class="uk-text-center"><img height="48" width="48" v-bind:src="channel.avatarUrl" />{{ channel.name }}</h1>
         <img v-if="channel.bannerUrl" v-bind:src="channel.bannerUrl" style="width: 100%" loading="lazy" />
-        <p v-html="this.channel.description" style="white-space: pre"></p>
+        <p v-html="purifyHTML(this.channel.description)" style="white-space: pre"></p>
 
         <hr />
 

src/components/WatchVideo.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="uk-container uk-container-xlarge">
-        <ErrorHandler v-if="video.error" :message="video.message" :error="video.error" />
+        <ErrorHandler v-if="video && video.error" :message="video.message" :error="video.error" />
 
         <div v-show="!video.error">
             <Player ref="videoPlayer" :video="video" :sponsors="sponsors" :selectedAutoPlay="selectedAutoPlay" />
@@ -169,10 +169,12 @@ export default {
                     if (!this.video.error) {
                         document.title = this.video.title + " - Piped";
 
-                        this.video.description = this.video.description
+                        this.video.description = this.purifyHTML(
+                            this.video.description
                                 .replaceAll("http://www.youtube.com", "")
                                 .replaceAll("https://www.youtube.com", "")
-                            .replaceAll("\n", "<br>");
+                                .replaceAll("\n", "<br>"),
+                        );
 
                         this.$refs.videoPlayer.loadVideo();
                     }

src/main.js

@@ -11,6 +11,8 @@ import("uikit/dist/js/uikit-core.min");
 import router from "@/router/router";
 import App from "./App.vue";
 
+import DOMPurify from 'dompurify';
+
 import("./registerServiceWorker");
 
 const mixin = {
@@ -58,6 +60,9 @@ const mixin = {
                 return response.json();
             });
         },
+        purifyHTML(original) {
+            return DOMPurify.sanitize(original);
+        }
     },
 };
 

yarn.lock

@@ -3373,6 +3373,11 @@ domhandler@^2.3.0:
   dependencies:
     domelementtype "1"
 
+dompurify@^2.2.9:
+  version "2.2.9"
+  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-2.2.9.tgz#4b42e244238032d9286a0d2c87b51313581d9624"
+  integrity sha512-+9MqacuigMIZ+1+EwoEltogyWGFTJZWU3258Rupxs+2CGs4H914G9er6pZbsme/bvb5L67o2rade9n21e4RW/w==
+
 domutils@^1.5.1, domutils@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.7.0.tgz#56ea341e834e06e6748af7a1cb25da67ea9f8c2a"