Fix XSS issue

peertube-plugin-video-annotation/.npmignore

@@ -0,0 +1,2 @@
+./scripts
+./screens

peertube-plugin-video-annotation/CHANGELOG.md

@@ -0,0 +1,3 @@
+# 0.0.7
+
+ * Fix XSS injection

peertube-plugin-video-annotation/client/shared-player.js

@@ -1,3 +1,5 @@
+import * as DOMPurify from 'dompurify'
+
 export function buildPlayer (video, player, videojs) {
   window.videojs = videojs
   require('videojs-overlay')
@@ -8,7 +10,7 @@ export function buildPlayer (video, player, videojs) {
 
   const annotationsText = video.pluginData[fieldName]
 
-  const annotations = parseAnnotations(annotationsText)
+  const annotations = parseAnnotations(video, annotationsText)
   if (!annotations) return
 
   console.log('Will inject annotations in player.', annotations)
@@ -18,24 +20,27 @@ export function buildPlayer (video, player, videojs) {
   })
 }
 
-function parseAnnotations (annotationsText) {
-  const splitted = annotationsText.split(/\n\r?\n\r?/)
+// ---------------------------------------------------------------------------
 
-  return splitted.map(s => buildAnnotation(s))
+function parseAnnotations (video, annotationsText) {
+  const splitted = annotationsText.split(/\n\r?\n\r?/)
+                                  .filter(line => !!line)
+
+  return splitted.map(s => buildAnnotation(video, s))
                  .filter(a => !!a)
 }
 
-function buildAnnotation (text) {
+function buildAnnotation (video, text) {
   const splitted = text.split('\n')
   if (splitted.length < 2) {
-    console.error('Cannot build annotation %s.', text)
+    console.error('Cannot build annotation "%s".', text)
     return undefined
   }
 
   const timestampsText = splitted.shift()
   const timestamps = buildTimestamps(timestampsText)
   if (!timestamps) {
-    console.error('Cannot build timestamp %s of %s.', timestampsText, text)
+    console.error('Cannot build timestamp "%s" of "%s".', timestampsText, text)
     return undefined
   }
 
@@ -46,7 +51,7 @@ function buildAnnotation (text) {
     options = buildOptions(optionsText)
 
     if (!options) {
-      console.error('Cannot build options %s of %s.', optionsText, text)
+      console.error('Cannot build options "%s" of "%s".', optionsText, text)
     } else {
       splitted.shift()
     }
@@ -58,7 +63,7 @@ function buildAnnotation (text) {
 
   const result = {
     align,
-    content
+    content: DOMPurify.sanitize(content)
   }
 
   result.start = timestamps.start || 0

peertube-plugin-video-annotation/package.json

@@ -29,9 +29,9 @@
     "assets/videojs-overlay.css"
   ],
   "devDependencies": {
-    "@purtuga/esm-webpack-plugin": "^1.1.1",
-    "webpack": "^4.41.2",
-    "webpack-cli": "^3.3.10",
+    "dompurify": "^2.4.3",
+    "esbuild": "^0.17.5",
+    "esbuild-plugin-external-global": "^1.0.1",
     "videojs-overlay": "^2.1.4"
   },
   "engine": {
@@ -45,7 +45,7 @@
   "library": "./main.js",
   "scripts": {
     "prepare": "npm run build",
-    "build": "cp node_modules/videojs-overlay/dist/videojs-overlay.css ./assets/videojs-overlay.css && webpack --mode=production"
+    "build": "sh ./scripts/build.sh"
   },
   "staticDirs": {},
   "translations": {

peertube-plugin-video-annotation/scripts/build.sh

@@ -0,0 +1,7 @@
+#!/bib/sh
+
+rm -rf ./dist ./assets/videojs-overlay.css
+
+node ./scripts/esbuild.js
+
+cp ./node_modules/videojs-overlay/dist/videojs-overlay.css ./assets/videojs-overlay.css

peertube-plugin-video-annotation/scripts/esbuild.js

@@ -0,0 +1,19 @@
+const esbuild = require('esbuild')
+const { externalGlobalPlugin } = require('esbuild-plugin-external-global')
+
+for (const file of [ 'embed-client-plugin.js', 'video-edit-client-plugin.js', 'video-watch-client-plugin.js' ]) {
+  esbuild.build({
+    entryPoints: [ 'client/' + file ],
+    bundle: true,
+    minify: false,
+    format: 'esm',
+    outfile: 'dist/' + file,
+    target: [ 'safari11' ],
+
+    plugins: [
+      externalGlobalPlugin({
+        'video.js': 'window.videojs'
+      })
+    ]
+  })
+}

peertube-plugin-video-annotation/webpack.config.js

@@ -1,28 +0,0 @@
-const path = require("path")
-
-const webpack = require('webpack')
-const EsmWebpackPlugin = require("@purtuga/esm-webpack-plugin")
-
-const clientFiles = [
-  'embed-client-plugin.js',
-  'video-watch-client-plugin.js',
-  'video-edit-client-plugin.js'
-]
-
-let config = clientFiles.map(f => ({
-  entry: "./client/" + f,
-  output: {
-    path: path.resolve(__dirname, "./dist"),
-    filename: "./" + f,
-    library: "script",
-    libraryTarget: "var"
-  },
-  plugins: [
-    new EsmWebpackPlugin()
-  ],
-  externals: {
-    'video.js': 'window.videojs'
-  }
-}))
-
-module.exports = config