#847 Better sanitizing of urls

2019-07-22 02:18:09 -07:00 · 2019-07-22 02:18:09 -07:00 · f11d1a6fa1
parent c33533082c
commit f11d1a6fa1
6 changed files with 59 additions and 16 deletions
--- 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 @@ BBBB --> C{Let me think}
 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,6 +148,25 @@ Class01 : int chimp
 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/mermaid@8.2.1/dist/mermaid.min.js"></script> -->
@ -135,12 +174,13 @@ Class08 <--> C2: Cool label
    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>
--- 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",
--- 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
      }
--- 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]
--- 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()
--- 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"