Allow youtube iframes (resolves #31)

package.json

@@ -14,6 +14,7 @@
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.13.0",
     "@johmun/vue-tags-input": "^2.1.0",
+    "@types/dompurify": "^2.0.2",
     "@types/lodash": "^4.14.151",
     "@types/nightwatch": "^1.1.4",
     "@types/swiper": "^5.3.1",
@@ -28,6 +29,7 @@
     "canvas": "^2.6.1",
     "chromedriver": "^81.0.0",
     "core-js": "^3.6.5",
+    "dompurify": "^2.0.11",
     "dotenv": "^8.2.0",
     "eslint-config-prettier": "^6.11.0",
     "eterna-chat-wrapper": "github:eternagame/eterna-chat-wrapper",

src/app.ts

@@ -3,14 +3,26 @@ import i18n from '@/plugins/i18n';
 import { sync } from 'vuex-router-sync';
 import BootstrapVue from 'bootstrap-vue';
 import VueDOMPurifyHTML from 'vue-dompurify-html';
+import DOMPurify from 'dompurify';
 import axios from 'axios';
 import InitGlobalComponents from '@/components/global';
 import App from './App.vue';
 import createRouter from './router';
 import createStore from './store/store';
 
 Vue.use(BootstrapVue);
-Vue.use(VueDOMPurifyHTML);
+Vue.use(VueDOMPurifyHTML, {
+  default: {
+    ADD_TAGS: ['iframe']
+  }
+});
+
+DOMPurify.addHook('uponSanitizeElement', (node, data) => {
+  if (data.tagName === 'iframe') {
+    const validSrc = (node as HTMLIFrameElement).src.match(/^(https:)?\/\/(www.)?(youtube.com)\/.*$/);
+    if (!validSrc) node.remove();
+  }
+});
 
 // Types for properties added to Vue (prototype) are in types/vue.d.ts
 // Make sure to update that if you change what is included here!