#847 Better sanitizing of urls

mermaid-js · Jul 22, 2019 · f11d1a6 · f11d1a6
1 parent c335330
commit f11d1a6
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 16 deletions.
diff --git a/dist/xssi.html b/dist/xssi.html
@@ -10,11 +10,31 @@
     alert(x + ' cause an xss attack');
   }
 </script>
+<style>
+.label text { fill: red}
+</style>
 </head>
 <body>
   <div class="mermaid">
     info
   </div>
+  <div class="mermaid">
+    graph LR;
+    alert`xss`-->B;
+    click B "javaSc
+ript:alert`salt`" "This is a tooltip for a link"
+  </div>
+  <div class="mermaid">
+    graph LR;
+    alert`xss`-->B;
+    click B "java
+script:alert`xss`" "This is a tooltip for a link"
+  </div>
+  <div class="mermaid">
+    graph LR;
+    alert`base64`-->B;
+    click B "data:image/png;base64,HNjcmlwdD5hbGVydCgiSGVsbG8iKTs8L3NjcmlwdD4="
+  </div>
   <img src=xss.png />
     <div class="mermaid">
       graph TD
@@ -37,7 +57,7 @@
 C -->|One| D[Laptop]
 C -->|Two| E[iPhone]
 C -->|Three| F[Car]
-click A "index.html#link-clicked" "link test"
+click A "http://localhost:9000/index.html#link-clicked" "link test"
 click BBBB testClick "click test"
 click C "javascript:alert" "link test"
 classDef someclass fill:#f96;
@@ -128,19 +148,39 @@
 Class01 : int gorilla
 Class08 <--> C2: Cool label
   </div>
+  <div class="mermaid">
+    graph LR
+
+    SavePropertyController --> SavePropertyCommand
+    SavePropertyCommand --> SavePropertyCommandHandler
+    SavePropertyCommandHandler --> EventElastica[elastica.postupdate]
+    SavePropertyCommandHandler --> EventProperty[property.postdisable]
+
+    SavePropertyController --> Exceptions
+    Exceptions --> ExceptionList(SecurityException<br/>EmptyRequestBodyException<br/>Throwable)
+
+    classDef Ui fill:#FFFFFF
+    classDef object fill:#1E98EC
+    classDef event fill:#ECB11E
+
+    class EventElastica,EventProperty event
+    class SavePropertyCommand,SavePropertyCommandHandler object
+    class SavePropertyController Ui
+  </div>
 
   <script src="./mermaid.js"></script>
   <!-- <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/mermaid.min.js"></script> -->
   <script>
     mermaid.initialize({
       theme: 'forest',
       // themeCSS: '.node rect { fill: red; }',
-      logLevel: 3,
-      flowchart: { curve: 'linear' },
+      logLevel: 4,
+      flowchart: { htmlLabels: false, curve: 'linear' },
       gantt: { axisFormat: '%m/%d/%Y' },
       sequence: { actorMargin: 50 },
       // sequenceDiagram: { actorMargin: 300 } // deprecated
-      securityLevel:'strict'
+      securityLevel:'strict',
+
     });
   </script>
   <script>

diff --git a/package.json b/package.json
@@ -44,6 +44,7 @@
     ]
   },
   "dependencies": {
+    "@braintree/sanitize-url": "^3.1.0",
     "d3": "^5.7.0",
     "dagre-d3-renderer": "^0.5.8",
     "dagre-layout": "^0.8.8",

diff --git a/src/diagrams/flowchart/flowDb.js b/src/diagrams/flowchart/flowDb.js
@@ -1,5 +1,5 @@
 import * as d3 from 'd3'
-
+import { sanitizeUrl } from '@braintree/sanitize-url'
 import { logger } from '../../logger'
 import utils from '../../utils'
 import { getConfig } from '../../config'
@@ -22,6 +22,7 @@ const sanitize = text => {
     txt = txt.replace(/<br>/g, '#br#')
     txt = txt.replace(/<br\S*?\/>/g, '#br#')
     txt = txt.replace(/</g, '&lt;').replace(/>/g, '&gt;')
+    txt = txt.replace(/=/g, '&equals;')
     txt = txt.replace(/#br#/g, '<br/>')
   }
 
@@ -215,7 +216,7 @@ export const setLink = function (ids, linkStr, tooltip) {
   ids.split(',').forEach(function (id) {
     if (typeof vertices[id] !== 'undefined') {
       if (config.securityLevel === 'strict') {
-        vertices[id].link = linkStr.replace(/javascript:.*/g, '')
+        vertices[id].link = sanitizeUrl(linkStr) //.replace(/javascript:.*/g, '')
       } else {
         vertices[id].link = linkStr
       }

diff --git a/src/diagrams/flowchart/flowRenderer.js b/src/diagrams/flowchart/flowRenderer.js
@@ -3,6 +3,7 @@ import * as d3 from 'd3'
 
 import flowDb from './flowDb'
 import flow from './parser/flow'
+import { getConfig } from '../../config'
 import dagreD3 from 'dagre-d3-renderer'
 import addHtmlLabel from 'dagre-d3-renderer/lib/label/add-html-label.js'
 import { logger } from '../../logger'
@@ -63,7 +64,7 @@ export const addVertices = function (vert, g, svgId) {
 
     // We create a SVG label, either by delegating to addHtmlLabel or manually
     let vertexNode
-    if (conf.htmlLabels) {
+    if (getConfig().flowchart.htmlLabels) {
       // TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that?
       const node = { label: vertexText.replace(/fa[lrsb]?:fa-[\w-]+/g, s => `<i class='${s.replace(':', ' ')}'></i>`) }
       vertexNode = addHtmlLabel(svg, node).node()
@@ -205,7 +206,7 @@ export const addEdges = function (edges, g) {
       edgeData.arrowheadStyle = 'fill: #333'
       if (typeof edge.style === 'undefined') {
         edgeData.labelpos = 'c'
-        if (conf.htmlLabels) {
+        if (getConfig().flowchart.htmlLabels) {
           edgeData.labelType = 'html'
           edgeData.label = '<span class="edgeLabel">' + edge.text + '</span>'
         } else {
@@ -534,7 +535,7 @@ export const draw = function (text, id) {
   }
 
   // Add label rects for non html labels
-  if (!conf.htmlLabels) {
+  if (!getConfig().flowchart.htmlLabels) {
     const labels = document.querySelectorAll('#' + id + ' .edgeLabel .label')
     for (let k = 0; k < labels.length; k++) {
       const label = labels[k]

diff --git a/src/diagrams/gantt/ganttDb.js b/src/diagrams/gantt/ganttDb.js
@@ -1,4 +1,5 @@
 import moment from 'moment-mini'
+import { sanitizeUrl } from '@braintree/sanitize-url'
 import { logger } from '../../logger'
 import { getConfig } from '../../config'
 
@@ -63,12 +64,10 @@ export const getExcludes = function () {
 }
 
 export const setTitle = function (txt) {
-  console.log('Setting title ', txt)
   title = txt
 }
 
 export const getTitle = function () {
-  console.log('Title is ', title)
   return title
 }
 
@@ -432,7 +431,7 @@ const compileTasks = function () {
 export const setLink = function (ids, _linkStr) {
   let linkStr = _linkStr
   if (config.securityLevel === 'strict') {
-    linkStr = _linkStr.replace(/javascript:.*/g, '')
+    linkStr = sanitizeUrl(_linkStr)
   }
   ids.split(',').forEach(function (id) {
     let rawTask = findTaskById(id)
@@ -495,11 +494,8 @@ const pushFun = function (id, callbackFunction) {
   funs.push(function (element) {
     // const elem = d3.select(element).select(`[id="${id}"]`)
     const elem = document.querySelector(`[id="${id}"]`)
-    console.log('id', id)
     if (elem !== null) {
-      console.log('id2', id)
       elem.addEventListener('click', function () {
-        console.log('id3 - click', id)
         callbackFunction()
       })
     }
@@ -508,7 +504,6 @@ const pushFun = function (id, callbackFunction) {
     // const elem = d3.select(element).select(`[id="${id}-text"]`)
     const elem = document.querySelector(`[id="${id}-text"]`)
     if (elem !== null) {
-      console.log('id4', id)
 
       elem.addEventListener('click', function () {
         callbackFunction()

diff --git a/yarn.lock b/yarn.lock
@@ -1288,6 +1288,11 @@
     lodash "^4.17.11"
     to-fast-properties "^2.0.0"
 
+"@braintree/sanitize-url@^3.1.0":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@braintree/sanitize-url/-/sanitize-url-3.1.0.tgz#8ff71d51053cd5ee4981e5a501d80a536244f7fd"
+  integrity sha512-GcIY79elgB+azP74j8vqkiXz8xLFfIzbQJdlwOPisgbKT00tviJQuEghOXSMVxJ00HoYJbGswr4kcllUc4xCcg==
+
 "@types/events@*":
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/@types%2fevents/-/events-3.0.0.tgz#2862f3f58a9a7f7c3e78d79f130dd4d71c25c2a7"