Fix for XSS vulnerability in url sanitization

mermaid-js · Dec 28, 2021 · f4c335a · f4c335a
1 parent 6f800be
commit f4c335a
Show file tree

Hide file tree

Showing 6 changed files with 249 additions and 9 deletions.
diff --git a/cypress/platform/xss16.html b/cypress/platform/xss16.html
@@ -0,0 +1,106 @@
+<html>
+ <head>
+ <link
+ href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
+ rel="stylesheet"
+ />
+ <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+ <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
+ <style>
+ body {
+ /* background: rgb(221, 208, 208); */
+ /* background:#333; */
+ font-family: 'Arial';
+ /* font-size: 18px !important; */
+ }
+ h1 { color: grey;}
+ .mermaid2 {
+ display: none;
+ }
+ .mermaid svg {
+ /* font-size: 18px !important; */
+ }
+ .malware {
+ position: fixed;
+ bottom:0;
+ left:0;
+ right:0;
+ height: 150px;
+ background: red;
+ color: black;
+ display: flex;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-family: monospace;
+ font-size: 72px;
+ }
+ </style>
+ </head>
+ <body>
+ <div>Security check</div>
+ <div class="flex">
+ <div id="diagram" class="mermaid"></div>
+ <div id="res" class=""></div>
+ <script src="./mermaid.js"></script>
+ <script>
+ mermaid.parseError = function (err, hash) {
+ // console.error('Mermaid error: ', err);
+ };
+ mermaid.initialize({
+ theme: 'forest',
+ arrowMarkerAbsolute: true,
+ // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
+ logLevel: 0,
+ state: {
+ defaultRenderer: 'dagre-d3',
+ },
+ flowchart: {
+ // defaultRenderer: 'dagre-wrapper',
+ nodeSpacing: 10,
+ curve: 'cardinal',
+ htmlLabels: true,
+ },
+ htmlLabels: true,
+ // gantt: { axisFormat: '%m/%d/%Y' },
+ sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
+ // sequenceDiagram: { actorMargin: 300 } // deprecated
+ // fontFamily: '"times", sans-serif',
+ // fontFamily: 'courier',
+ fontSize: 18,
+ curve: 'basis',
+ securityLevel: 'loose',
+ startOnLoad: false,
+ secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'],
+ // themeVariables: {relationLabelColor: 'red'}
+ });
+ function callback() {
+ alert('It worked');
+}
+ function xssAttack() {
+ const div = document.createElement('div');
+ div.id = 'the-malware';
+ div.className = 'malware';
+ div.innerHTML = 'XSS Succeeded';
+ document.getElementsByTagName('body')[0].appendChild(div);
+ throw new Error('XSS Succeded');
+ }
+
+ var diagram = `sequenceDiagram
+ participant Alice
+ links Alice: { "Click me!" : "javasjavascript:cript:alert('goose')" }`;
+
+// // var diagram = "stateDiagram-v2\n";
+// // diagram += "<img/src='1'/onerror"
+// diagram += '//via.placeholder.com/64\' width=64 />"]';
+// console.log(diagram);
+// document.querySelector('#diagram').innerHTML = diagram;
+mermaid.render('diagram', diagram, (res) => {
+ console.log(res);
+ document.querySelector('#res').innerHTML = res;
+});
+ </script>
+ </body>
+</html>
+
diff --git a/cypress/platform/xss17.html b/cypress/platform/xss17.html
@@ -0,0 +1,106 @@
+<html>
+ <head>
+ <link
+ href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
+ rel="stylesheet"
+ />
+ <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+ <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
+ <style>
+ body {
+ /* background: rgb(221, 208, 208); */
+ /* background:#333; */
+ font-family: 'Arial';
+ /* font-size: 18px !important; */
+ }
+ h1 { color: grey;}
+ .mermaid2 {
+ display: none;
+ }
+ .mermaid svg {
+ /* font-size: 18px !important; */
+ }
+ .malware {
+ position: fixed;
+ bottom:0;
+ left:0;
+ right:0;
+ height: 150px;
+ background: red;
+ color: black;
+ display: flex;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-family: monospace;
+ font-size: 72px;
+ }
+ </style>
+ </head>
+ <body>
+ <div>Security check</div>
+ <div class="flex">
+ <div id="diagram" class="mermaid"></div>
+ <div id="res" class=""></div>
+ <script src="./mermaid.js"></script>
+ <script>
+ mermaid.parseError = function (err, hash) {
+ // console.error('Mermaid error: ', err);
+ };
+ mermaid.initialize({
+ theme: 'forest',
+ arrowMarkerAbsolute: true,
+ // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
+ logLevel: 0,
+ state: {
+ defaultRenderer: 'dagre-d3',
+ },
+ flowchart: {
+ // defaultRenderer: 'dagre-wrapper',
+ nodeSpacing: 10,
+ curve: 'cardinal',
+ htmlLabels: true,
+ },
+ htmlLabels: true,
+ // gantt: { axisFormat: '%m/%d/%Y' },
+ sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
+ // sequenceDiagram: { actorMargin: 300 } // deprecated
+ // fontFamily: '"times", sans-serif',
+ // fontFamily: 'courier',
+ fontSize: 18,
+ curve: 'basis',
+ securityLevel: 'loose',
+ startOnLoad: false,
+ secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'],
+ // themeVariables: {relationLabelColor: 'red'}
+ });
+ function callback() {
+ alert('It worked');
+}
+ function xssAttack() {
+ const div = document.createElement('div');
+ div.id = 'the-malware';
+ div.className = 'malware';
+ div.innerHTML = 'XSS Succeeded';
+ document.getElementsByTagName('body')[0].appendChild(div);
+ throw new Error('XSS Succeded');
+ }
+
+ var diagram = `sequenceDiagram
+ participant Alice
+ link Alice: Click Me!@javasjavascript:cript:alert("goose")`;
+
+// // var diagram = "stateDiagram-v2\n";
+// // diagram += "<img/src='1'/onerror"
+// diagram += '//via.placeholder.com/64\' width=64 />"]';
+// console.log(diagram);
+// document.querySelector('#diagram').innerHTML = diagram;
+mermaid.render('diagram', diagram, (res) => {
+ console.log(res);
+ document.querySelector('#res').innerHTML = res;
+});
+ </script>
+ </body>
+</html>
+
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "mermaid",
- "version": "8.13.6",
+ "version": "8.13.8",
  "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
  "main": "dist/mermaid.core.js",
  "module": "dist/mermaid.esm.min.mjs",

diff --git a/src/diagrams/common/common.spec.js b/src/diagrams/common/common.spec.js
@@ -1,4 +1,4 @@
-import { removeScript, removeEscapes } from './common';
+import { sanitizeText, removeScript, removeEscapes } from './common';
 
 describe('when securityLevel is antiscript, all script must be removed', function () {
  it('should remove all script block, script inline.', function () {
@@ -69,3 +69,15 @@ describe('remove escape code in text', function () {
  expect(result).toEqual('script:');
  });
 });
+
+describe('Sanitize text', function () {
+ it('should remove script tag', function () {
+ const maliciousStr = 'javajavascript:script:alert(1)';
+ const result = sanitizeText(maliciousStr, {
+ securityLevel: 'strict',
+ flowchart: { htmlLabels: true },
+ });
+ console.log('result', result);
+ expect(result).not.toContain('javascript:alert(1)');
+ });
+});
diff --git a/src/diagrams/sequence/svgDraw.js b/src/diagrams/sequence/svgDraw.js
@@ -1,5 +1,6 @@
 import common from '../common/common';
 import { addFunction } from '../../interactionDb';
+import { sanitizeUrl } from '@braintree/sanitize-url';
 
 export const drawRect = function (elem, rectData) {
  const rectElem = elem.append('rect');
@@ -19,12 +20,12 @@ export const drawRect = function (elem, rectData) {
  return rectElem;
 };
 
-const sanitizeUrl = function (s) {
- return s
- .replace(/&/g, '&amp;')
- .replace(/</g, '&lt;')
- .replace(/javascript:/g, '');
-};
+// const sanitizeUrl = function (s) {
+//  return s
+//  .replace(/&/g, '&amp;')
+//  .replace(/</g, '&lt;')
+//  .replace(/javascript:/g, '');
+// };
 
 const addPopupInteraction = (id, actorCnt) => {
  addFunction(() => {
@@ -1055,4 +1056,5 @@ export default {
  popupMenu,
  popdownMenu,
  fixLifeLineHeights,
+ sanitizeUrl,
 };
diff --git a/src/diagrams/sequence/svgDraw.spec.js b/src/diagrams/sequence/svgDraw.spec.js
@@ -1,4 +1,4 @@
-const svgDraw = require('./svgDraw');
+const svgDraw = require('./svgDraw').default;
 const { MockD3 } = require('d3');
 
 describe('svgDraw', function () {
@@ -124,4 +124,18 @@ describe('svgDraw', function () {
  expect(rect.lower).toHaveBeenCalled();
  });
  });
+ describe('sanitizeUrl', function () {
+ it('it should sanitize malicious urls', function () {
+ const maliciousStr = 'javascript:script:alert(1)';
+ const result = svgDraw.sanitizeUrl(maliciousStr);
+ console.log('result', result);
+ expect(result).not.toContain('javascript:alert(1)');
+ });
+ it('it should not sanitize non dangerous urls', function () {
+ const maliciousStr = 'javajavascript:script:alert(1)';
+ const result = svgDraw.sanitizeUrl(maliciousStr);
+ console.log('result', result);
+ expect(result).not.toContain('javascript:alert(1)');
+ });
+ });
 });