🐛 fix < > are converted to &lt &gt

* linkify-string automatically escapes HTML input. So < is converted to &lt
* replace linkify-string with linkify-html
* and use js xss. this makes safe xss attack

https://linkify.js.org/docs/linkify-string.html#usage-with-html
https://github.com/leizongmin/js-xss

package.json

@@ -44,7 +44,8 @@
     "vue-tsc": "^0.32.0"
   },
   "dependencies": {
-    "linkify-string": "^3.0.4",
-    "linkifyjs": "^3.0.5"
+    "linkify-html": "^3.0.5",
+    "linkifyjs": "^3.0.5",
+    "xss": "^1.0.11"
   }
 }

src/main.ts

@@ -1,15 +1,19 @@
 import { App, Directive } from "@vue/runtime-core";
-import linkifyStr from "linkify-string";
+import linkifyHtml from "linkify-html";
 import { Options } from "linkifyjs";
+import xss from "xss";
+
+const linkify = (rawHtml: string, options: Options): string => {
+  const sanitized = xss(rawHtml);
+  return linkifyHtml(sanitized, options);
+};
 
 const directive: Directive = {
   beforeMount(element: HTMLElement, binding) {
-    const options = binding.value as Options;
-    element.innerHTML = linkifyStr(element.innerHTML, options);
+    element.innerHTML = linkify(element.innerHTML, binding.value);
   },
   updated(element: HTMLElement, binding) {
-    const options = binding.value as Options;
-    element.innerHTML = linkifyStr(element.innerHTML, options);
+    element.innerHTML = linkify(element.innerHTML, binding.value);
   },
 };
 

yarn.lock

@@ -405,6 +405,11 @@ color-name@~1.1.4:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
+commander@^2.20.3:
+  version "2.20.3"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
+  integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
+
 [email protected]:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
@@ -427,6 +432,11 @@ cross-spawn@^7.0.2:
     shebang-command "^2.0.0"
     which "^2.0.1"
 
+[email protected]:
+  version "0.0.10"
+  resolved "https://registry.yarnpkg.com/cssfilter/-/cssfilter-0.0.10.tgz#c6d2672632a2e5c83e013e6864a42ce8defd20ae"
+  integrity sha1-xtJnJjKi5cg+AT5oZKQs6N79IK4=
+
 debug@^4.1.1, debug@^4.3.2:
   version "4.3.3"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.3.tgz#04266e0b70a98d4462e6e288e38259213332b664"
@@ -947,10 +957,10 @@ levn@^0.4.1:
     prelude-ls "^1.2.1"
     type-check "~0.4.0"
 
-linkify-string@^3.0.4:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/linkify-string/-/linkify-string-3.0.4.tgz#6abf1a5e436e800c729274ae08f5703484647f84"
-  integrity sha512-OnNqqRjlYXaXipIAbBC8sDXsSumI1ftatzFg141Pw9HEXWjTVLFcMZoKbFupshqWRavtNJ6QHLa+u6AlxxgeRw==
+linkify-html@^3.0.5:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/linkify-html/-/linkify-html-3.0.5.tgz#317181f7603e17b7d38492b0f6fdf9cce14f1e6b"
+  integrity sha512-3O7HEYjkugX+C/G2C2wyBmIt8Mt0pmeaHNIxRHodCFeQQeSxSoZHR+5hC1pi0WrmoEvfnSemyZyYTM8w3lo9cA==
 
 linkifyjs@^3.0.5:
   version "3.0.5"
@@ -1514,6 +1524,14 @@ wrappy@1:
   resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
   integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
 
+xss@^1.0.11:
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/xss/-/xss-1.0.11.tgz#211cb82e95b5071d4c75d597283c021157ebe46a"
+  integrity sha512-EimjrjThZeK2MO7WKR9mN5ZC1CSqivSl55wvUK5EtU6acf0rzEE1pN+9ZDrFXJ82BRp3JL38pPE6S4o/rpp1zQ==
+  dependencies:
+    commander "^2.20.3"
+    cssfilter "0.0.10"
+
 yallist@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"