make returned markdown both pretty and safe (#384)

* wip, make returned markdown both pretty and safe while also providing decent syntax highlight * minor fix * fix bug and cleanup
OWASP · Oct 28, 2023 · f4d0885 · f4d0885
1 parent f3f8211
commit f4d0885
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 204 deletions.
diff --git a/application/frontend/src/pages/chatbot/chatbot.tsx b/application/frontend/src/pages/chatbot/chatbot.tsx
@@ -1,8 +1,10 @@
 import './chatbot.scss';
 
+import DOMPurify,{sanitize} from 'dompurify';
+import {marked} from 'marked';
 import React, { createElement, useEffect, useState } from 'react';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { dark } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';
 import { Button, Comment, Container, Dropdown, Form, GridRow, Header, Icon, Input } from 'semantic-ui-react';
 import { Grid } from 'semantic-ui-react';
 
@@ -11,199 +13,7 @@ import { useEnvironment } from '../../hooks';
 import { Document } from '../../types';
 
 export const Chatbot = () => {
-  const availableLangs = [
-    'oneC (1c)',
-    'abnf',
-    'accesslog',
-    'actionscript',
-    'ada',
-    'angelscript',
-    'apache',
-    'applescript',
-    'arcade',
-    'arduino',
-    'armasm',
-    'asciidoc',
-    'aspectj',
-    'autohotkey',
-    'autoit',
-    'avrasm',
-    'awk',
-    'axapta',
-    'bash',
-    'basic',
-    'bnf',
-    'brainfuck',
-    'cLike (c-like)',
-    'c',
-    'cal',
-    'capnproto',
-    'ceylon',
-    'clean',
-    'clojureRepl (clojure-repl)',
-    'clojure',
-    'cmake',
-    'coffeescript',
-    'coq',
-    'cos',
-    'cpp',
-    'crmsh',
-    'crystal',
-    'csharp',
-    'csp',
-    'css',
-    'd',
-    'dart',
-    'delphi',
-    'diff',
-    'django',
-    'dns',
-    'dockerfile',
-    'dos',
-    'dsconfig',
-    'dts',
-    'dust',
-    'ebnf',
-    'elixir',
-    'elm',
-    'erb',
-    'erlangRepl (erlang-repl)',
-    'erlang',
-    'excel',
-    'fix',
-    'flix',
-    'fortran',
-    'fsharp',
-    'gams',
-    'gauss',
-    'gcode',
-    'gherkin',
-    'glsl',
-    'gml',
-    'go',
-    'golo',
-    'gradle',
-    'groovy',
-    'haml',
-    'handlebars',
-    'haskell',
-    'haxe',
-    'hsp',
-    'htmlbars',
-    'http',
-    'hy',
-    'inform7',
-    'ini',
-    'irpf90',
-    'isbl',
-    'java',
-    'javascript',
-    'jbossCli (jboss-cli)',
-    'json',
-    'juliaRepl (julia-repl)',
-    'julia',
-    'kotlin',
-    'lasso',
-    'latex',
-    'ldif',
-    'leaf',
-    'less',
-    'lisp',
-    'livecodeserver',
-    'livescript',
-    'llvm',
-    'lsl',
-    'lua',
-    'makefile',
-    'markdown',
-    'mathematica',
-    'matlab',
-    'maxima',
-    'mel',
-    'mercury',
-    'mipsasm',
-    'mizar',
-    'mojolicious',
-    'monkey',
-    'moonscript',
-    'n1ql',
-    'nginx',
-    'nim',
-    'nix',
-    'nodeRepl (node-repl)',
-    'nsis',
-    'objectivec',
-    'ocaml',
-    'openscad',
-    'oxygene',
-    'parser3',
-    'perl',
-    'pf',
-    'pgsql',
-    'phpTemplate (php-template)',
-    'php',
-    'plaintext',
-    'pony',
-    'powershell',
-    'processing',
-    'profile',
-    'prolog',
-    'properties',
-    'protobuf',
-    'puppet',
-    'purebasic',
-    'pythonRepl (python-repl)',
-    'python',
-    'q',
-    'qml',
-    'r',
-    'reasonml',
-    'rib',
-    'roboconf',
-    'routeros',
-    'rsl',
-    'ruby',
-    'ruleslanguage',
-    'rust',
-    'sas',
-    'scala',
-    'scheme',
-    'scilab',
-    'scss',
-    'shell',
-    'smali',
-    'smalltalk',
-    'sml',
-    'sqf',
-    'sql',
-    'sqlMore (sql_more)',
-    'stan',
-    'stata',
-    'step21',
-    'stylus',
-    'subunit',
-    'swift',
-    'taggerscript',
-    'tap',
-    'tcl',
-    'thrift',
-    'tp',
-    'twig',
-    'typescript',
-    'vala',
-    'vbnet',
-    'vbscriptHtml (vbscript-html)',
-    'vbscript',
-    'verilog',
-    'vhdl',
-    'vim',
-    'x86asm',
-    'xl',
-    'xml',
-    'xquery',
-    'yaml',
-    'zephir',
-  ];
+
   type chatMessage = {
     timestamp: string;
     role: string;
@@ -248,21 +58,20 @@ export const Chatbot = () => {
   }
 
   function processResponse(response) {
-    const matchedLang = response.replace(/(\r\n|\n|\r)/gm, '').match(/```(?<lang>\w+).*```/m);
-    let lang = 'javascript';
-    if (matchedLang) {
-      if (matchedLang.groups.lang in availableLangs) {
-        lang = matchedLang.groups.lang;
-      }
-    }
     const responses = response.split('```');
     let i = 0;
     const res = [<></>];
     for (const txt of responses) {
       if (i % 2 == 0) {
-        res.push(txt);
+        res.push(
+          <p 
+          dangerouslySetInnerHTML={{
+            __html : sanitize(marked(txt), {USE_PROFILES: {html: true}})
+        }}
+          />
+        )
       } else {
-        res.push(<SyntaxHighlighter style={dark}>{txt}</SyntaxHighlighter>);
+        res.push(<SyntaxHighlighter style={oneLight}>{txt}</SyntaxHighlighter>);
       }
       i++;
     }
@@ -350,7 +159,7 @@ export const Chatbot = () => {
                 <Grid.Column className="chat-container">
                   <div id="chat-messages">
                     {chatMessages.map((m) => (
-                      <div id={m.message} className="foobar">
+                      <div>
                         <Comment.Group
                           className={
                             m.role == 'user'

diff --git a/package.json b/package.json
@@ -48,6 +48,7 @@
     "d3-dag": "^0.6.3",
     "date-fns": "^2.16.1",
     "del-cli": "^3.0.1",
+    "dompurify": "^3.0.5",
     "elkjs": "^0.7.1",
     "enzyme": "3.11.0",
     "eslint-plugin-react-hooks": "4.2.0",
@@ -56,6 +57,8 @@
     "import-sort": "^6.0.0",
     "import-sort-style-module": "^6.0.0",
     "jest-puppeteer": "^6.0.3",
+    "marked": "^9.0.2",
+    "marked-react": "^2.0.0",
     "npm": "^7.11.2",
     "prettier-plugin-import-sort": "^0.0.6",
     "prism": "^4.1.2",

diff --git a/yarn.lock b/yarn.lock
@@ -6391,6 +6391,11 @@ domhandler@^5.0.1, domhandler@^5.0.2, domhandler@^5.0.3:
   dependencies:
     domelementtype "^2.3.0"
 
+dompurify@^3.0.5:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.0.5.tgz#eb3d9cfa10037b6e73f32c586682c4b2ab01fbed"
+  integrity sha512-F9e6wPGtY+8KNMRAVfxeCOHU0/NPWMSENNq4pQctuXRqqdEPW7q3CrLbR5Nse044WwacyjHGOMlvNsBe1y6z9A==
+
 domutils@^1.5.1, domutils@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.7.0.tgz#56ea341e834e06e6748af7a1cb25da67ea9f8c2a"
@@ -11077,6 +11082,23 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
+marked-react@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/marked-react/-/marked-react-2.0.0.tgz#709ec476d3cdf8690d81f6495edd675d72eef60f"
+  integrity sha512-Mp5HqfONf/RDqFtA+6xw2EjKkSbA8/xNPwyJ8ewLy/q3v21lRsPA7h+HUndVAW/yEIoebvcyzzSDpbjzL/xjZg==
+  dependencies:
+    marked "^6.0.0"
+
+marked@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/marked/-/marked-6.0.0.tgz#80cd7f51145437cffe9f541a318b9882f75601df"
+  integrity sha512-7E3m/xIlymrFL5gWswIT4CheIE3fDeh51NV09M4x8iOc7NDYlyERcQMLAIHcSlrvwliwbPQ4OGD+MpPSYiQcqw==
+
+marked@^9.0.2:
+  version "9.0.2"
+  resolved "https://registry.yarnpkg.com/marked/-/marked-9.0.2.tgz#e12365ecbd8e487c2405dd8b99bbf8194c7ad3e5"
+  integrity sha512-VRTR4AamWVw+wNl0PfT9zJpCHWIQZ4QLyiXVmpgrempuXeue883HH/97oVuY6uk7SSOJE6F73i62JrAIBAdc0Q==
+
 match-sorter@^6.0.2:
   version "6.3.1"
   resolved "https://registry.yarnpkg.com/match-sorter/-/match-sorter-6.3.1.tgz#98cc37fda756093424ddf3cbc62bfe9c75b92bda"