From b683bc92b5fb4a055f605c4f0229923844e6c788 Mon Sep 17 00:00:00 2001
From: Keavon Chambers <keavon@keavon.com>
Date: Sun, 31 Oct 2021 23:37:30 -0700
Subject: [PATCH] Replace vue-svg-loader dependency with simple JS file (fixes
 a security alert)

---
 frontend/package.json           |  1 -
 frontend/src/utilities/files.ts |  5 +----
 frontend/vue-svg-loader.js      |  4 ++++
 frontend/vue.config.js          | 16 +++++++++-------
 4 files changed, 14 insertions(+), 12 deletions(-)
 create mode 100644 frontend/vue-svg-loader.js

diff --git a/frontend/package.json b/frontend/package.json
index 3910421c88..757e34856f 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -40,7 +40,6 @@
 		"sass-loader": "^8.0.2",
 		"typescript": "^4.4.2",
 		"vue-loader": "^16.5.0",
-		"vue-svg-loader": "^0.17.0-beta.2",
 		"vue-template-compiler": "^2.6.14",
 		"wasm-pack": "^0.10.1"
 	}
diff --git a/frontend/src/utilities/files.ts b/frontend/src/utilities/files.ts
index 4d474b264c..0d5eb471ec 100644
--- a/frontend/src/utilities/files.ts
+++ b/frontend/src/utilities/files.ts
@@ -1,8 +1,5 @@
 export function download(filename: string, fileData: string) {
-	let type = "text/plain;charset=utf-8";
-	if (filename.endsWith(".svg")) {
-		type = "image/svg+xml;charset=utf-8";
-	}
+	const type = filename.endsWith(".svg") ? "image/svg+xml;charset=utf-8" : "text/plain;charset=utf-8";
 	const blob = new Blob([fileData], { type });
 	const url = URL.createObjectURL(blob);
 	const element = document.createElement("a");
diff --git a/frontend/vue-svg-loader.js b/frontend/vue-svg-loader.js
new file mode 100644
index 0000000000..db63df5da3
--- /dev/null
+++ b/frontend/vue-svg-loader.js
@@ -0,0 +1,4 @@
+module.exports = function VueSvgLoader(svg) {
+	this.cacheable();
+	return `<template>${svg}</template>`;
+};
diff --git a/frontend/vue.config.js b/frontend/vue.config.js
index 0a9ecc3daf..66080296a0 100644
--- a/frontend/vue.config.js
+++ b/frontend/vue.config.js
@@ -78,20 +78,22 @@ module.exports = {
 					})
 			);
 
-		// Vue SVG Loader enables importing .svg files into .vue single-file components and using them directly in the HTML
-		// https://vue-svg-loader.js.org/
+		// Change the loaders used by the Vue compilation process
 		config.module
-			// Replace Vue's existing base loader by first clearing it (https://cli.vuejs.org/guide/webpack.html#replacing-loaders-of-a-rule)
+			// Replace Vue's existing base loader by first clearing it
+			// https://cli.vuejs.org/guide/webpack.html#replacing-loaders-of-a-rule
 			.rule("svg")
 			.uses.clear()
 			.end()
-			// Add vue-loader as a loader
+			// Add vue-loader as a loader for Vue single-file components
+			// https://www.npmjs.com/package/vue-loader
 			.use("vue-loader")
 			.loader("vue-loader")
 			.end()
-			// Add vue-svg-loader as a loader
-			.use("vue-svg-loader")
-			.loader("vue-svg-loader")
+			// Add vue-svg-loader as a loader for importing .svg files into Vue single-file components
+			// Located in ./vue-svg-loader.js
+			.use("./vue-svg-loader")
+			.loader("./vue-svg-loader")
 			.end();
 	},
 };