Merge pull request laobubu#44 from 0xGG/feat/prevent-xss

feat: Improve XSS Prevention

Author: shd101wyy

demo/index.js

@@ -129,7 +129,7 @@ require([
       code: true,
     },
 
-    inputProps: "textarea",
+    inputStyle: "contenteditable",
   });
   editor.setSize(null, "100%"); // set height
   editor.on("imageClicked", (args) => {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vickymd",
-  "version": "0.1.24",
+  "version": "0.1.25",
   "description": "An experimental WYSIWYG markdown editor built on top of HyperMD with extended Widgets support",
   "main": "./everything.js",
   "types": "./everything.d.ts",
@@ -31,28 +31,28 @@
     "@rollup/plugin-json": "^4.0.3",
     "@types/codemirror": "^0.0.91",
     "@types/glob": "^7.1.1",
-    "@types/markdown-it": "^10.0.0",
+    "@types/markdown-it": "^10.0.1",
     "@types/mermaid": "^8.2.1",
     "@types/prop-types": "^15.7.3",
-    "@types/react": "^16.9.25",
-    "@types/react-dom": "^16.9.5",
+    "@types/react": "^16.9.34",
+    "@types/react-dom": "^16.9.7",
     "@types/tern": "^0.23.3",
     "@types/yamljs": "^0.2.30",
-    "codemirror": "^5.52.2",
+    "codemirror": "^5.53.2",
     "express": "^4.17.1",
     "glob": "^7.1.6",
     "minimatch": "^3.0.4",
     "opn": "^6.0.0",
-    "rollup": "^2.6.1",
+    "rollup": "^2.7.3",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-typescript2": "^0.27.0",
     "rollup-plugin-uglify": "^6.0.4",
-    "sass": "^1.26.3",
+    "sass": "^1.26.5",
     "typescript": "^3.8.3"
   },
   "peerDependencies": {
-    "codemirror": "^5.52.2"
+    "codemirror": "^5.53.2"
   },
   "optionalDependencies": {
     "echarts": "^4.7.0",
@@ -75,10 +75,10 @@
     "react-dom": "^16.13.1",
     "turndown": "^6.0.0",
     "turndown-plugin-gfm": "^1.0.2",
-    "twemoji": "^12.1.5",
-    "vega": "^5.10.1",
+    "twemoji": "^12.1.6",
+    "vega": "^5.11.1",
     "vega-embed": "^6.6.0",
-    "vega-lite": "^4.10.5",
+    "vega-lite": "^4.11.0",
     "yamljs": "^0.3.0"
   },
   "dependencies": {}

src/addon/fold-html.ts

@@ -10,30 +10,39 @@ import {
   Addon,
   suggestedEditorConfig,
   visitElements,
-  watchSize
+  watchSize,
 } from "../core";
 import { cm_t } from "../core/type";
 import {
   registerFolder,
   breakMark,
   FolderFunc,
-  RequestRangeResult
+  RequestRangeResult,
 } from "./fold";
 import "./read-link";
 
 /********************************************************************************** */
 /**
  * Before folding HTML, check its security and avoid XSS attack! Returns true if safe.
  */
-export type CheckerFunc = (html: string, pos: Position, cm: cm_t) => boolean;
+export type CheckerFunc = (html: string) => boolean;
 
-export var defaultChecker: CheckerFunc = html => {
+// export type CheckerFunc = (html: string, pos: Position, cm: cm_t) => boolean;
+export var defaultChecker: CheckerFunc = (html) => {
   // TODO: read https://www.owasp.org/index.php/XSS_Filter_Evasion_Cheat_Sheet
 
-  if (/^<(?:br)/i.test(html)) return false; // check first element...
-  if (/<(?:script|style|link|meta)/i.test(html)) return false; // don't allow some tags
-  if (/\son\w+\s*=/i.test(html)) return false; // don't allow `onclick=` etc.
-  if (/src\s*=\s*["']?javascript:/i.test(html)) return false; // don't allow `src="javascript:` etc.
+  if (/^<(?:br)/i.test(html)) {
+    return false; // check first element...
+  }
+  if (/<(?:script|style|link|meta|object|embed|iframe)/i.test(html)) {
+    return false; // don't allow some tags
+  }
+  if (/\son\w+\s*=/i.test(html)) {
+    return false; // don't allow `onclick=` etc.
+  }
+  if (/(src|background|href)\s*=\s*["']?javascript:/i.test(html)) {
+    return false; // don't allow `src="javascript:` etc.
+  }
   return true;
 };
 
@@ -89,11 +98,12 @@ export var defaultRenderer: RendererFunc = (
     }
 
     var innerHTML = html.slice(startCh, endCh);
-    if (innerHTML) ans.innerHTML = innerHTML;
+    if (innerHTML) {
+      ans.innerHTML = innerHTML;
+    }
 
     // resolve relative URLs and change default behavoirs
-
-    visitElements([ans], el => {
+    visitElements([ans], (el) => {
       const tagName = el.tagName.toLowerCase();
 
       if (tagName === "a") {
@@ -106,7 +116,7 @@ export var defaultRenderer: RendererFunc = (
       const urlAttrs: string[] = {
         a: ["href"],
         img: ["src"],
-        iframe: ["src"]
+        iframe: ["src"],
       }[tagName];
 
       if (urlAttrs) {
@@ -167,7 +177,7 @@ export const HTMLFolder: FolderFunc = (stream, token) => {
   var addon = getAddon(cm);
   var html: string = cm.getRange(from, to);
 
-  if (!addon.checker(html, from, cm)) return null; // security check
+  if (!addon.checker(html)) return null; // security check
 
   // security check pass!
 
@@ -204,7 +214,7 @@ export const defaultOption: Options = {
   checker: defaultChecker,
   renderer: defaultRenderer,
   stubText: "<HTML>",
-  isolatedTagName: /^(?:div|pre|form|table|iframe|ul|ol|input|textarea|p|summary|a)$/i
+  isolatedTagName: /^(?:div|pre|form|table|iframe|ul|ol|input|textarea|p|summary|a)$/i,
 };
 
 export const suggestedOption: Partial<Options> = {};
@@ -228,7 +238,7 @@ declare global {
 
 suggestedEditorConfig.hmdFoldHTML = suggestedOption;
 
-CodeMirror.defineOption("hmdFoldHTML", defaultOption, function(
+CodeMirror.defineOption("hmdFoldHTML", defaultOption, function (
   cm: cm_t,
   newVal: OptionValueType
 ) {
@@ -286,7 +296,6 @@ export class FoldHTML implements Addon.Addon, Options {
     inlineMode?: boolean
   ): CodeMirror.TextMarker {
     const cm = this.cm;
-
     var stub = this.makeStub();
     var el = this.renderer(html, from, cm);
     var breakFn = () => breakMark(cm, marker);
@@ -313,7 +322,7 @@ export class FoldHTML implements Addon.Addon, Options {
       /** If element size changed, we notify CodeMirror */
       var watcher = watchSize(el, (w, h) => {
         const computedStyle = getComputedStyle(el);
-        const getStyle = name => computedStyle.getPropertyValue(name);
+        const getStyle = (name) => computedStyle.getPropertyValue(name);
 
         var floating =
           w < 10 ||
@@ -343,7 +352,7 @@ export class FoldHTML implements Addon.Addon, Options {
         above: false,
         coverGutter: false,
         noHScroll: false,
-        showIfHidden: false
+        showIfHidden: false,
       });
 
       let highlightON = () => (stub.className = stubClassHighlight);
@@ -367,7 +376,7 @@ export class FoldHTML implements Addon.Addon, Options {
     }
 
     marker = cm.markText(from, to, {
-      replacedWith
+      replacedWith,
     });
 
     return marker;

src/preview/features/widget.ts

@@ -1,5 +1,6 @@
 import MarkdownIt from "markdown-it";
 import { Attributes } from "../../addon/fold";
+import { defaultChecker } from "../../addon/fold-html";
 
 export default (md: MarkdownIt) => {
   const renderWidget = (content: string) => {
@@ -44,7 +45,12 @@ export default (md: MarkdownIt) => {
     if (content.match(/^<!--\s*@/) && content.match(/-->$/)) {
       return renderWidget(content);
     } else {
-      return oldHTMLInlineRenderer(tokens, idx, options, env, slf);
+      const html = oldHTMLInlineRenderer(tokens, idx, options, env, slf);
+      if (defaultChecker(html)) {
+        return html;
+      } else {
+        return "";
+      }
     }
   };
 
@@ -54,7 +60,12 @@ export default (md: MarkdownIt) => {
     if (content.match(/^<!--\s*@/) && content.match(/-->$/)) {
       return renderWidget(content);
     } else {
-      return oldHTMLBlockRenderer(tokens, idx, options, env, slf);
+      const html = oldHTMLBlockRenderer(tokens, idx, options, env, slf);
+      if (defaultChecker(html)) {
+        return html;
+      } else {
+        return "";
+      }
     }
   };
 };

src/widget/hello/hello.tsx

@@ -3,10 +3,8 @@
 //
 // DESCRIPTION: This widget tries to build a widget using react
 
-import { Attributes } from "../../addon/fold";
 import React, { useState } from "react";
 import ReactDOM from "react-dom";
-import { Widget } from "../component/widget";
 import { WidgetCreator, WidgetArgs } from "..";
 
 function Hello(props: WidgetArgs) {
@@ -69,11 +67,6 @@ function Hello(props: WidgetArgs) {
 
 export const HelloWidget: WidgetCreator = (args) => {
   const el = document.createElement("span");
-  ReactDOM.render(
-    <Widget>
-      <Hello {...args}></Hello>
-    </Widget>,
-    el
-  );
+  ReactDOM.render(<Hello {...args}></Hello>, el);
   return el;
 };