ui: allow using html in markdown

packages/ui-default/backendlib/markdown-it-xss.js

@@ -0,0 +1,90 @@
+const Xss = require('xss');
+
+const xss = new Xss.FilterXSS({
+    whiteList: {
+        a: ['target', 'href', 'title'],
+        abbr: ['title'],
+        address: [],
+        area: ['shape', 'coords', 'href', 'alt'],
+        article: [],
+        aside: [],
+        audio: ['autoplay', 'controls', 'loop', 'preload', 'src'],
+        b: [],
+        bdi: ['dir'],
+        bdo: ['dir'],
+        big: [],
+        blockquote: ['cite'],
+        br: [],
+        caption: [],
+        center: [],
+        cite: [],
+        code: [],
+        col: ['align', 'valign', 'span', 'width'],
+        colgroup: ['align', 'valign', 'span', 'width'],
+        dd: [],
+        del: ['datetime'],
+        details: ['open'],
+        div: [],
+        dl: [],
+        dt: [],
+        em: [],
+        font: ['color', 'size', 'face'],
+        h1: [],
+        h2: [],
+        h3: [],
+        h4: [],
+        h5: [],
+        h6: [],
+        header: [],
+        hr: [],
+        i: [],
+        img: ['src', 'alt', 'title', 'width', 'height'],
+        ins: ['datetime'],
+        li: [],
+        mark: [],
+        ol: [],
+        p: [],
+        pre: [],
+        s: [],
+        section: [],
+        small: [],
+        span: ['class'],
+        sub: [],
+        sup: [],
+        strong: [],
+        table: ['width', 'border', 'align', 'valign'],
+        tbody: ['align', 'valign'],
+        td: ['width', 'rowspan', 'colspan', 'align', 'valign'],
+        tfoot: ['align', 'valign'],
+        th: ['width', 'rowspan', 'colspan', 'align', 'valign'],
+        thead: ['align', 'valign'],
+        tr: ['rowspan', 'align', 'valign'],
+        tt: [],
+        u: [],
+        ul: [],
+        video: ['autoplay', 'controls', 'loop', 'preload', 'src', 'height', 'width'],
+    },
+});
+
+function xssProtector(md) {
+    function protector(state) {
+        for (let i = 0; i < state.tokens.length; i++) {
+            const cur = state.tokens[i];
+            if (cur.type === 'html_block') {
+                cur.content = xss.process(cur.content);
+            }
+            if (cur.type === 'inline') {
+                const inlineTokens = cur.children;
+                for (let ii = 0; ii < inlineTokens.length; ii++) {
+                    if (inlineTokens[ii].type === 'html_inline') {
+                        inlineTokens[ii].content = xss.process(inlineTokens[ii].content);
+                    }
+                }
+            }
+        }
+    }
+
+    md.core.ruler.after('linkify', 'xss', protector);
+}
+
+module.exports = { xss, xssProtector };

packages/ui-default/backendlib/markdown.js

@@ -23,11 +23,13 @@ const Anchor = require('markdown-it-anchor');
 // @[pdf](https://foo.com/bar.pdf)
 const Media = require('./markdown-it-media');
 const Katex = require('./markdown-it-katex');
+const { xssProtector } = require('./markdown-it-xss');
 
 class Markdown extends MarkdownIt {
   constructor() {
     super({
       linkify: true,
+      html: true,
     });
     this.linkify.tlds('.py', false);
     this.use(Media);
@@ -37,6 +39,7 @@ class Markdown extends MarkdownIt {
     this.use(Anchor);
     this.use(TOC);
     this.use(Katex);
+    this.use(xssProtector);
   }
 }
 
@@ -46,13 +49,11 @@ function plugin(func, ...args) {
   md.use(func, ...args);
 }
 
-function render(text, html = false) {
-  md.set({ html: !!html });
+function render(text) {
   return md.render(text);
 }
 
-function renderInline(text, html = false) {
-  md.set({ html: !!html });
+function renderInline(text) {
   return md.renderInline(text);
 }
 

packages/ui-default/backendlib/template.js

@@ -5,79 +5,12 @@ const serialize = require('serialize-javascript');
 const nunjucks = require('nunjucks');
 const { filter } = require('lodash');
 const { argv } = require('yargs');
-const Xss = require('xss');
 const { findFileSync } = require('@hydrooj/utils/lib/utils');
 const status = require('@hydrooj/utils/lib/status');
 const markdown = require('./markdown');
 
 const { misc, buildContent, avatar } = global.Hydro.lib;
 
-const xss = new Xss.FilterXSS({
-  whiteList: {
-    a: ['target', 'href', 'title'],
-    abbr: ['title'],
-    address: [],
-    area: ['shape', 'coords', 'href', 'alt'],
-    article: [],
-    aside: [],
-    audio: ['autoplay', 'controls', 'loop', 'preload', 'src'],
-    b: [],
-    bdi: ['dir'],
-    bdo: ['dir'],
-    big: [],
-    blockquote: ['cite'],
-    br: [],
-    caption: [],
-    center: [],
-    cite: [],
-    code: [],
-    col: ['align', 'valign', 'span', 'width'],
-    colgroup: ['align', 'valign', 'span', 'width'],
-    dd: [],
-    del: ['datetime'],
-    details: ['open'],
-    div: [],
-    dl: [],
-    dt: [],
-    em: [],
-    font: ['color', 'size', 'face'],
-    h1: [],
-    h2: [],
-    h3: [],
-    h4: [],
-    h5: [],
-    h6: [],
-    header: [],
-    hr: [],
-    i: [],
-    img: ['src', 'alt', 'title', 'width', 'height'],
-    ins: ['datetime'],
-    li: [],
-    mark: [],
-    ol: [],
-    p: [],
-    pre: [],
-    s: [],
-    section: [],
-    small: [],
-    span: ['class'],
-    sub: [],
-    sup: [],
-    strong: [],
-    table: ['width', 'border', 'align', 'valign'],
-    tbody: ['align', 'valign'],
-    td: ['width', 'rowspan', 'colspan', 'align', 'valign'],
-    tfoot: ['align', 'valign'],
-    th: ['width', 'rowspan', 'colspan', 'align', 'valign'],
-    thead: ['align', 'valign'],
-    tr: ['rowspan', 'align', 'valign'],
-    tt: [],
-    u: [],
-    ul: [],
-    video: ['autoplay', 'controls', 'loop', 'preload', 'src', 'height', 'width'],
-  },
-});
-
 if (argv.template && argv.template !== 'string') argv.template = findFileSync('@hydrooj/ui-default/templates');
 else if (argv.template) argv.template = findFileSync(argv.template);
 
@@ -125,7 +58,6 @@ class Nunjucks extends nunjucks.Environment {
     this.addFilter('json', (self) => JSON.stringify(self, replacer));
     this.addFilter('parseYaml', (self) => yaml.load(self));
     this.addFilter('dumpYaml', (self) => yaml.dump(self));
-    this.addFilter('xss', (self) => xss.process(self));
     this.addFilter('serialize', (self, ignoreFunction = true) => serialize(self, { ignoreFunction }));
     this.addFilter('assign', (self, data) => Object.assign(self, data));
     this.addFilter('markdown', (self, html = false) => markdown.render(self, html));
@@ -150,7 +82,7 @@ class Nunjucks extends nunjucks.Environment {
         else s = s[langs[0]];
       }
       if (s instanceof Array) s = buildContent(s, html ? 'html' : 'markdown', (str) => str.translate(language));
-      return html ? xss.process(s) : markdown.render(s);
+      return markdown.render(s);
     });
     this.addFilter('log', (self) => {
       console.log(self);