Implement dom purify

index.html

@@ -74,6 +74,7 @@
 		<script src="lib/lzutf8.js"></script>
 		<script src="lib/peer.min.js"></script>
 		<script src="lib/marked.min.js"></script>
+		<script src="lib/purify.min.js"></script>
 		<script src="lib/spectrum.js"></script>
 		<script src="lib/color-picker.min.js"></script>
 		<script src="lib/three.min.js"></script>

js/interface/about.js

@@ -116,6 +116,7 @@ BARS.defineActions(() => {
 								<li><a class="open-in-browser" href="https://github.com/eligrey/FileSaver.js">FileSaver.js</a></li>
 								<li><a class="open-in-browser" href="https://peerjs.com">PeerJS</a></li>
 								<li><a class="open-in-browser" href="https://github.com/markedjs/marked">Marked</a></li>
+								<li><a class="open-in-browser" href="https://github.com/cure53/DOMPurify">DOMPurify</a></li>
 								<li><a class="open-in-browser" href="https://prismjs.com">Prism</a></li>
 								<li><a class="open-in-browser" href="https://github.com/akalverboer/canvas2apng">Canvas2APNG</a></li>
 								<li><a class="open-in-browser" href="https://github.com/koca/vue-prism-editor">Vue Prism Editor</a></li>

js/interface/dialog.js

@@ -116,7 +116,7 @@ function buildForm(dialog) {
 
 
 				case 'info':
-					data.text = marked(tl(data.text))
+					data.text = pureMarked(tl(data.text))
 					bar.append(`<p>${data.text}</p>`)
 					bar.addClass('small_text')
 					break;
@@ -328,7 +328,7 @@ function buildLines(dialog) {
 			dialog.uses_wide_inputs = true;
 			dialog_content.append(bar)
 		} else {
-			dialog_content.append(l)
+			dialog_content.append(DOMPurify.sanitize(l))
 		}
 	})
 }
@@ -877,7 +877,7 @@ window.MessageBox = class MessageBox extends Dialog {
 
 		if (options.message) {
 			content.append($('<div class="dialog_bar markdown" style="height: auto; min-height: 56px; margin-bottom: 16px;">'+
-				marked(tl(options.message))+
+				pureMarked(tl(options.message))+
 			'</div></div>')[0]);
 		}
 		if (options.icon) {

js/interface/start_screen.js

@@ -35,7 +35,7 @@ function addStartScreenSection(id, data) {
 			if (data.graphic.aspect_ratio) left.css('aspect-ratio', data.graphic.aspect_ratio);
 		}
 		if (data.graphic.description) {
-			let content = $(marked(data.graphic.description));
+			let content = $(pureMarked(data.graphic.description));
 			content.addClass('start_screen_graphic_description')
 			content.css({
 				'color': data.graphic.text_color || '#ffffff',
@@ -47,7 +47,7 @@ function addStartScreenSection(id, data) {
 		var right = $('<div class="start_screen_right"></div>')
 		obj.append(right)
 		data.text.forEach(line => {
-			var content = line.text ? marked(tl(line.text)) : '';
+			var content = line.text ? pureMarked(tl(line.text)) : '';
 			switch (line.type) {
 				case 'h1': var tag = 'h1'; break;
 				case 'h2': var tag = 'h3'; break;
@@ -55,7 +55,7 @@ function addStartScreenSection(id, data) {
 				case 'list':
 					var tag = 'ul class="list_style"';
 					line.list.forEach(string => {
-						content += `<li>${marked(tl(string))}</li>`;
+						content += `<li>${pureMarked(tl(string))}</li>`;
 					})
 					break;
 				case 'button': var tag = 'button'; break;
@@ -269,6 +269,7 @@ onVueSetup(function() {
 			openLink(link) {
 				Blockbench.openLink(link);
 			},
+			pureMarked,
 			tl
 		},
 		computed: {
@@ -351,11 +352,11 @@ onVueSetup(function() {
 									<template v-for="item in viewed_format.format_page.content">
 
 										<img v-if="item.type == 'image'" :src="item.source" :width="item.width" :height="item.height">
-										<h2 v-else-if="item.type == 'h2'" class="markdown" v-html="marked(item.text.replace(/\\n/g, '\\n\\n'))"></h2>
-										<h3 v-else-if="item.type == 'h3'" class="markdown" v-html="marked(item.text.replace(/\\n/g, '\\n\\n'))"></h3>
-										<h4 v-else-if="item.type == 'h4'" class="markdown" v-html="marked(item.text.replace(/\\n/g, '\\n\\n'))"></h4>
-										<label v-else-if="item.type == 'label'" class="markdown" v-html="marked(item.text.replace(/\\n/g, '\\n\\n'))"></label>
-										<p v-else class="markdown" v-html="marked((item.text || item).replace(/\\n/g, '\\n\\n'))"></p>
+										<h2 v-else-if="item.type == 'h2'" class="markdown" v-html="pureMarked(item.text.replace(/\\n/g, '\\n\\n'))"></h2>
+										<h3 v-else-if="item.type == 'h3'" class="markdown" v-html="pureMarked(item.text.replace(/\\n/g, '\\n\\n'))"></h3>
+										<h4 v-else-if="item.type == 'h4'" class="markdown" v-html="pureMarked(item.text.replace(/\\n/g, '\\n\\n'))"></h4>
+										<label v-else-if="item.type == 'label'" class="markdown" v-html="pureMarked(item.text.replace(/\\n/g, '\\n\\n'))"></label>
+										<p v-else class="markdown" v-html="pureMarked((item.text || item).replace(/\\n/g, '\\n\\n'))"></p>
 									</template>
 								</content>
 

js/plugin_loader.js

@@ -565,6 +565,7 @@ BARS.defineActions(function() {
 					}
 				},
 				getIconNode: Blockbench.getIconNode,
+				pureMarked,
 				tl
 			},
 			template: `
@@ -595,7 +596,7 @@ BARS.defineActions(function() {
 
 							<div class="author">{{ tl('dialog.plugins.author', [plugin.author]) }}</div>
 							<div class="description">{{ plugin.description }}</div>
-							<div v-if="plugin.expanded" class="about markdown" v-html="marked(plugin.about.replace(/\\n/g, '\\n\\n'))"><button>a</button></div>
+							<div v-if="plugin.expanded" class="about markdown" v-html="pureMarked(plugin.about.replace(/\\n/g, '\\n\\n'))"><button>a</button></div>
 							<div v-if="plugin.expanded" v-on:click="plugin.toggleInfo()" style="text-decoration: underline;">${tl('dialog.plugins.show_less')}</div>
 							<ul class="plugin_tag_list">
 								<li v-for="tag in plugin.tags" :class="getTagClass(tag)" :key="tag" @click="search_term = tag;">{{tag}}</li>

js/util.js

@@ -93,6 +93,11 @@ Condition.mutuallyExclusive = function(a, b) {
 	return false;
 }
 
+function pureMarked(input) {
+	let dom = marked(input);
+	return DOMPurify.sanitize(dom);
+}
+
 class oneLiner {
 	constructor(data) {
 		if (data !== undefined) {
@@ -155,23 +160,6 @@ function removeEventListeners(el, events, func, option) {
 	})
 }
 
-//Jquery
-$.fn.deepest = function() {
-	if (!this.length) return this;
-	var opts = []
-	this.each((i, node) => {
-		var i = 0;
-		var obj = $(node)
-		while (obj.parent().get(0) instanceof HTMLBodyElement === false) {
-			obj = obj.parent()
-			i++;
-		}
-		opts.push({depth: i, o: node})
-	})
-	opts.sort((a, b) => (a.depth < b.depth));
-	return $(opts[0].o)
-}
-
 //Math
 function guid() {
 	function s4() {

js/validator.js

@@ -52,14 +52,14 @@ const Validator = {
 					},
 					methods: {
 						getIconNode: Blockbench.getIconNode,
-						marked
+						pureMarked
 					},
 					template: `
 						<template>
 							<ul>
 								<li v-for="problem in problems" class="validator_dialog_problem" :class="problem.error ? 'validator_error' : 'validator_warning'" :key="problem.message">
 									<i class="material-icons">{{ problem.error ? 'error' : 'warning' }}</i>
-									<span class="markdown" v-html="marked(problem.message.replace(/\\n/g, '\\n\\n'))"></span>
+									<span class="markdown" v-html="pureMarked(problem.message.replace(/\\n/g, '\\n\\n'))"></span>
 									<template v-if="problem.buttons">
 										<div v-for="button in problem.buttons" class="tool" :title="button.name" @click="button.click($event)">
 											<div class="icon_wrapper plugin_icon normal" v-html="getIconNode(button.icon, button.color).outerHTML"></div>