diff --git a/cypress/integration/other/xss.spec.js b/cypress/integration/other/xss.spec.js index e1f05b6e6..830be4f8e 100644 --- a/cypress/integration/other/xss.spec.js +++ b/cypress/integration/other/xss.spec.js @@ -53,5 +53,10 @@ describe('XSS', () => { cy.wait(1000); cy.get('#the-malware').should('not.exist'); }) + it('should not allow maniplulating htmlLabels into a false positive', () => { + cy.visit('http://localhost:9000/xss4.html'); + cy.wait(1000); + cy.get('#the-malware').should('not.exist'); + }) }) diff --git a/cypress/platform/exploit.js b/cypress/platform/exploit.js new file mode 100644 index 000000000..2b4b0baa5 --- /dev/null +++ b/cypress/platform/exploit.js @@ -0,0 +1,6 @@ +const div = parent.document.createElement('div'); +div.id = 'the-malware'; +div.className = 'malware'; +div.innerHTML = 'XSS Succeeded'; +parent.document.getElementsByTagName('body')[0].appendChild(div); +throw new Error('XSS Succeded'); diff --git a/cypress/platform/knsv.html b/cypress/platform/knsv.html index d63d0e67f..353593e5e 100644 --- a/cypress/platform/knsv.html +++ b/cypress/platform/knsv.html @@ -67,15 +67,14 @@ stateDiagram-v2
%%{init:{"theme":"forest", "themeVariables": { - + "specialStateColor":"red", + "innerEndBackground":"lightgreen" }}}%% - %% "specialStateColor":"red", "innerEndBackground":"lightgreen" stateDiagram-v2 state fork [[fork]] state join [[join]] [*] --> fork - fork --> Test - Test --> join + fork --> join join --> [*]
diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html index b45742e77..a382591d5 100644 --- a/cypress/platform/knsv2.html +++ b/cypress/platform/knsv2.html @@ -21,155 +21,28 @@ .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; + } -
info below
+
Security check
-
-%%{init: { "logLevel": 1, "er": {"fontSize":18 }} }%% - erDiagram - CUSTOMER }|..|{ DELIVERY-ADDRESS : has - CUSTOMER ||--o{ ORDER : places - CUSTOMER ||--o{ INVOICE : "liable for" - DELIVERY-ADDRESS ||--o{ ORDER : receives - INVOICE ||--|{ ORDER : covers - ORDER ||--|{ ORDER-ITEM : includes - PRODUCT-CATEGORY ||--|{ PRODUCT : contains - PRODUCT ||--o{ ORDER-ITEM : "ordered in" -
-
-flowchart TD - A[Christmas] ==> D - A[Christmas] -->|Get money| B(Go shopping) - A[Christmas] ==> C - subgraph T ["Test"] - A - B - C - end - - classDef Test fill:#F84E68,stroke:#333,color:white; - class A,T Test - classDef TestSub fill:green; - class T TestSub - linkStyle 0,1 color:orange, stroke: orange; -
-
-graph TD - subgraph S1 - sub1 -->sub2 - end - subgraph S2 - sub4 - end - S1 --> S2 - sub1 --> sub4 -
-
-graph TB - A --> B -
-
-stateDiagram-v2 -state S1 { -sub1 -->sub2 -} -state S2 { - sub4 -} -S1 --> S2 -sub1 --> sub4 - -
-
- requirementDiagram - requirement test_req { - id: 1 - text: the test text. - risk: high - verifymethod: test - } - - functionalRequirement test_req2 { - id: 1.1 - text: the second test text. - risk: low - verifymethod: inspection - } - - performanceRequirement test_req3 { - id: 1.2 - text: the third test text. - risk: medium - verifymethod: demonstration - } - - element test_entity { - type: simulation - } - - element test_entity2 { - type: word doc - docRef: reqs/test_entity - } - - - test_entity - satisfies -> test_req2 - test_req - traces -> test_req2 - test_req - contains -> test_req3 - test_req <- copies - test_entity2 -
-
-flowchart LR - classDef dark fill:#000,stroke:#000,stroke-width:4px,color:#fff - Lorem --> Ipsum --> Dolor - class Lorem,Dolor dark -
-
-%%{init: {'theme': 'base' }}%% -%%{init2: { 'logLevel': 0, 'theme': 'forest'} }%% -flowchart TD - L1 --- L2 - L2 --- C - M1 ---> C - R1 .-> R2 - R2 <.-> C - C -->|Label 1| E1 - C <-- Label 2 ---> E2 - C ----> E3 - C <-...-> E4 - C ======> E5 -
-
-flowchart LR -A[red text] -->|default style| B(blue text) -C([red text]) -->|default style| D[[blue text]] -E[(red text)] -->|default style| F((blue text)) -G>red text] -->|default style| H{blue text} -I{{red text}} -->|default style| J[/blue text/] -K[ -ed text] -->|default style| L[/blue text] -M[ -ed text/] -->|default style| N[blue text] -linkStyle default color:Sienna; -style A stroke:#ff0000,fill:#ffcccc,color:#ff0000 -style B stroke:#0000ff,fill:#ccccff,color:#0000ff -style C stroke:#ff0000,fill:#ffcccc,color:#ff0000 -style D stroke:#0000ff,fill:#ccccff,color:#0000ff -style E stroke:#ff0000,fill:#ffcccc,color:#ff0000 -style F stroke:#0000ff,fill:#ccccff,color:#0000ff -style G stroke:#ff0000,fill:#ffcccc,color:#ff0000 -style H stroke:#0000ff,fill:#ccccff,color:#0000ff -style I stroke:#ff0000,fill:#ffcccc,color:#ff0000 -style J stroke:#0000ff,fill:#ccccff,color:#0000ff -style K stroke:#ff0000,fill:#ffcccc,color:#ff0000 -style L stroke:#0000ff,fill:#ccccff,color:#0000ff -style M stroke:#ff0000,fill:#ffcccc,color:#ff0000 -style N stroke:#0000ff,fill:#ccccff,color:#0000ff -
- - +
+
+ diff --git a/cypress/platform/xss4.html b/cypress/platform/xss4.html new file mode 100644 index 000000000..4db86c1e8 --- /dev/null +++ b/cypress/platform/xss4.html @@ -0,0 +1,94 @@ + + + + + + + + + +
Security check
+
+
+
+ + + + + diff --git a/src/dagre-wrapper/clusters.js b/src/dagre-wrapper/clusters.js index d1a2624bd..a0d47ed7c 100644 --- a/src/dagre-wrapper/clusters.js +++ b/src/dagre-wrapper/clusters.js @@ -3,6 +3,7 @@ import { log } from '../logger'; import createLabel from './createLabel'; import { select } from 'd3'; import { getConfig } from '../config'; +import { evaluate } from '../diagrams/common/common'; const rect = (parent, node) => { log.trace('Creating subgraph rect for ', node.id, node); @@ -26,7 +27,7 @@ const rect = (parent, node) => { // Get the size of the label let bbox = text.getBBox(); - if (getConfig().flowchart.htmlLabels) { + if (evaluate(getConfig().flowchart.htmlLabels)) { const div = text.children[0]; const dv = select(text); bbox = div.getBoundingClientRect(); @@ -132,7 +133,7 @@ const roundedWithTitle = (parent, node) => { // Get the size of the label let bbox = text.getBBox(); - if (getConfig().flowchart.htmlLabels) { + if (evaluate(getConfig().flowchart.htmlLabels)) { const div = text.children[0]; const dv = select(text); bbox = div.getBoundingClientRect(); @@ -170,7 +171,10 @@ const roundedWithTitle = (parent, node) => { 'translate(' + (node.x - bbox.width / 2) + ', ' + - (node.y - node.height / 2 - node.padding / 3 + (getConfig().flowchart.htmlLabels ? 5 : 3)) + + (node.y - + node.height / 2 - + node.padding / 3 + + (evaluate(getConfig().flowchart.htmlLabels) ? 5 : 3)) + ')' ); diff --git a/src/dagre-wrapper/createLabel.js b/src/dagre-wrapper/createLabel.js index bb670835b..ed885bdef 100644 --- a/src/dagre-wrapper/createLabel.js +++ b/src/dagre-wrapper/createLabel.js @@ -1,7 +1,8 @@ import { select } from 'd3'; import { log } from '../logger'; // eslint-disable-line +import { evaluate } from '../diagrams/common/common'; // let vertexNode; -// if (getConfig().flowchart.htmlLabels) { +// if (evaluate(getConfig().flowchart.htmlLabels)) { // // TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that? // const node = { // label: vertexText.replace(/fa[lrsb]?:fa-[\w-]+/g, s => ``) @@ -86,7 +87,7 @@ function addHtmlLabel(node) { const createLabel = (_vertexText, style, isTitle, isNode) => { let vertexText = _vertexText || ''; if (typeof vertexText === 'object') vertexText = vertexText[0]; - if (getConfig().flowchart.htmlLabels) { + if (evaluate(getConfig().flowchart.htmlLabels)) { // TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that? vertexText = vertexText.replace(/\\n|\n/g, '
'); log.info('vertexText' + vertexText); diff --git a/src/dagre-wrapper/edges.js b/src/dagre-wrapper/edges.js index c70b9732f..10bc00101 100644 --- a/src/dagre-wrapper/edges.js +++ b/src/dagre-wrapper/edges.js @@ -4,7 +4,7 @@ import createLabel from './createLabel'; import { line, curveBasis, select } from 'd3'; import { getConfig } from '../config'; import utils from '../utils'; -// import { calcLabelPosition } from '../utils'; +import { evaluate } from '../diagrams/common/common'; let edgeLabels = {}; let terminalLabels = {}; @@ -27,7 +27,7 @@ export const insertEdgeLabel = (elem, edge) => { // Center the label let bbox = labelElement.getBBox(); - if (getConfig().flowchart.htmlLabels) { + if (evaluate(getConfig().flowchart.htmlLabels)) { const div = labelElement.children[0]; const dv = select(labelElement); bbox = div.getBoundingClientRect(); diff --git a/src/dagre-wrapper/nodes.js b/src/dagre-wrapper/nodes.js index 20688234b..27e0b4c0b 100644 --- a/src/dagre-wrapper/nodes.js +++ b/src/dagre-wrapper/nodes.js @@ -6,6 +6,7 @@ import intersect from './intersect/index.js'; import createLabel from './createLabel'; import note from './shapes/note'; import { parseMember } from '../diagrams/class/svgDraw'; +import { evaluate } from '../diagrams/common/common'; const question = (parent, node) => { const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true); @@ -370,7 +371,7 @@ const rectWithTitle = (parent, node) => { const text = label.node().appendChild(createLabel(title, node.labelStyle, true, true)); let bbox; - if (getConfig().flowchart.htmlLabels) { + if (evaluate(getConfig().flowchart.htmlLabels)) { const div = text.children[0]; const dv = select(text); bbox = div.getBoundingClientRect(); @@ -386,7 +387,7 @@ const rectWithTitle = (parent, node) => { createLabel(textRows.join ? textRows.join('
') : textRows, node.labelStyle, true, true) ); - if (getConfig().flowchart.htmlLabels) { + if (evaluate(getConfig().flowchart.htmlLabels)) { const div = descr.children[0]; const dv = select(descr); bbox = div.getBoundingClientRect(); @@ -648,7 +649,7 @@ const class_box = (parent, node) => { .node() .appendChild(createLabel(interfaceLabelText, node.labelStyle, true, true)); let interfaceBBox = interfaceLabel.getBBox(); - if (getConfig().flowchart.htmlLabels) { + if (evaluate(getConfig().flowchart.htmlLabels)) { const div = interfaceLabel.children[0]; const dv = select(interfaceLabel); interfaceBBox = div.getBoundingClientRect(); @@ -670,7 +671,7 @@ const class_box = (parent, node) => { .appendChild(createLabel(classTitleString, node.labelStyle, true, true)); select(classTitleLabel).attr('class', 'classTitle'); let classTitleBBox = classTitleLabel.getBBox(); - if (getConfig().flowchart.htmlLabels) { + if (evaluate(getConfig().flowchart.htmlLabels)) { const div = classTitleLabel.children[0]; const dv = select(classTitleLabel); classTitleBBox = div.getBoundingClientRect(); @@ -688,7 +689,7 @@ const class_box = (parent, node) => { .node() .appendChild(createLabel(parsedText, node.labelStyle, true, true)); let bbox = lbl.getBBox(); - if (getConfig().flowchart.htmlLabels) { + if (evaluate(getConfig().flowchart.htmlLabels)) { const div = lbl.children[0]; const dv = select(lbl); bbox = div.getBoundingClientRect(); @@ -711,7 +712,7 @@ const class_box = (parent, node) => { .node() .appendChild(createLabel(parsedText, node.labelStyle, true, true)); let bbox = lbl.getBBox(); - if (getConfig().flowchart.htmlLabels) { + if (evaluate(getConfig().flowchart.htmlLabels)) { const div = lbl.children[0]; const dv = select(lbl); bbox = div.getBoundingClientRect(); @@ -791,7 +792,7 @@ const class_box = (parent, node) => { }); // // let bbox; - // if (getConfig().flowchart.htmlLabels) { + // if (evaluate(getConfig().flowchart.htmlLabels)) { // const div = interfaceLabel.children[0]; // const dv = select(interfaceLabel); // bbox = div.getBoundingClientRect(); @@ -807,7 +808,7 @@ const class_box = (parent, node) => { // .node() // .appendChild(createLabel(textRows.join('
'), node.labelStyle, true, true)); - // if (getConfig().flowchart.htmlLabels) { + // if (evaluate(getConfig().flowchart.htmlLabels)) { // const div = descr.children[0]; // const dv = select(descr); // bbox = div.getBoundingClientRect(); diff --git a/src/dagre-wrapper/shapes/util.js b/src/dagre-wrapper/shapes/util.js index f4717412e..630ec49a3 100644 --- a/src/dagre-wrapper/shapes/util.js +++ b/src/dagre-wrapper/shapes/util.js @@ -1,6 +1,7 @@ import createLabel from '../createLabel'; import { getConfig } from '../../config'; import { select } from 'd3'; +import { evaluate } from '../../diagrams/common/common'; export const labelHelper = (parent, node, _classes, isNode) => { let classes; if (!_classes) { @@ -27,7 +28,7 @@ export const labelHelper = (parent, node, _classes, isNode) => { // Get the size of the label let bbox = text.getBBox(); - if (getConfig().flowchart.htmlLabels) { + if (evaluate(getConfig().flowchart.htmlLabels)) { const div = text.children[0]; const dv = select(text); bbox = div.getBoundingClientRect(); diff --git a/src/diagrams/class/classRenderer-v2.js b/src/diagrams/class/classRenderer-v2.js index 2ff58be65..2e70256ca 100644 --- a/src/diagrams/class/classRenderer-v2.js +++ b/src/diagrams/class/classRenderer-v2.js @@ -57,7 +57,7 @@ export const addClasses = function(classes, g) { // We create a SVG label, either by delegating to addHtmlLabel or manually // let vertexNode; - // if (getConfig().flowchart.htmlLabels) { + // if (evaluate(getConfig().flowchart.htmlLabels)) { // const node = { // label: vertexText.replace( // /fa[lrsb]?:fa-[\w-]+/g, diff --git a/src/diagrams/common/common.js b/src/diagrams/common/common.js index b76484ec4..4e26efca8 100644 --- a/src/diagrams/common/common.js +++ b/src/diagrams/common/common.js @@ -90,6 +90,8 @@ const getUrl = useAbsolute => { return url; }; +export const evaluate = val => (val === 'false' || val === false ? false : true); + export default { getRows, sanitizeText, @@ -97,5 +99,6 @@ export default { splitBreaks, lineBreakRegex, removeScript, - getUrl + getUrl, + evaluate }; diff --git a/src/diagrams/flowchart/flowRenderer-v2.js b/src/diagrams/flowchart/flowRenderer-v2.js index 695444b09..3400a3abd 100644 --- a/src/diagrams/flowchart/flowRenderer-v2.js +++ b/src/diagrams/flowchart/flowRenderer-v2.js @@ -8,7 +8,7 @@ import { getConfig } from '../../config'; import { render } from '../../dagre-wrapper/index.js'; import addHtmlLabel from 'dagre-d3/lib/label/add-html-label.js'; import { log } from '../../logger'; -import common from '../common/common'; +import common, { evaluate } from '../common/common'; import { interpolateToCurve, getStylesFromArray, configureSvgSize } from '../../utils'; const conf = {}; @@ -48,7 +48,7 @@ export const addVertices = function(vert, g, svgId) { // We create a SVG label, either by delegating to addHtmlLabel or manually let vertexNode; - if (getConfig().flowchart.htmlLabels) { + if (evaluate(getConfig().flowchart.htmlLabels)) { // TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that? const node = { label: vertexText.replace( @@ -292,7 +292,7 @@ export const addEdges = function(edges, g) { edgeData.arrowheadStyle = 'fill: #333'; edgeData.labelpos = 'c'; } - // if (getConfig().flowchart.htmlLabels && false) { + // if (evaluate(getConfig().flowchart.htmlLabels) && false) { // // eslint-disable-line // edgeData.labelType = 'html'; // edgeData.label = `${edge.text}`; diff --git a/src/diagrams/flowchart/flowRenderer.js b/src/diagrams/flowchart/flowRenderer.js index 0fb9db297..d4feb083c 100644 --- a/src/diagrams/flowchart/flowRenderer.js +++ b/src/diagrams/flowchart/flowRenderer.js @@ -8,7 +8,7 @@ import { getConfig } from '../../config'; import dagreD3 from 'dagre-d3'; import addHtmlLabel from 'dagre-d3/lib/label/add-html-label.js'; import { log } from '../../logger'; -import common from '../common/common'; +import common, { evaluate } from '../common/common'; import { interpolateToCurve, getStylesFromArray, configureSvgSize } from '../../utils'; import flowChartShapes from './flowChartShapes'; @@ -49,7 +49,7 @@ export const addVertices = function(vert, g, svgId) { // We create a SVG label, either by delegating to addHtmlLabel or manually let vertexNode; - if (getConfig().flowchart.htmlLabels) { + if (evaluate(getConfig().flowchart.htmlLabels)) { // TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that? const node = { label: vertexText.replace( @@ -228,7 +228,7 @@ export const addEdges = function(edges, g) { edgeData.arrowheadStyle = 'fill: #333'; edgeData.labelpos = 'c'; - if (getConfig().flowchart.htmlLabels) { + if (evaluate(getConfig().flowchart.htmlLabels)) { edgeData.labelType = 'html'; edgeData.label = `${edge.text.replace( /fa[lrsb]?:fa-[\w-]+/g, @@ -451,7 +451,7 @@ export const draw = function(text, id) { } // Add label rects for non html labels - if (!conf.htmlLabels || true) { // eslint-disable-line + if (!evaluate(conf.htmlLabels) || true) { // eslint-disable-line const labels = document.querySelectorAll('[id="' + id + '"] .edgeLabel .label'); for (let k = 0; k < labels.length; k++) { const label = labels[k]; diff --git a/src/diagrams/state/stateRenderer-v2.js b/src/diagrams/state/stateRenderer-v2.js index 81aabc0eb..d0cd70a70 100644 --- a/src/diagrams/state/stateRenderer-v2.js +++ b/src/diagrams/state/stateRenderer-v2.js @@ -3,7 +3,7 @@ import { select } from 'd3'; import stateDb from './stateDb'; import state from './parser/stateDiagram'; import { getConfig } from '../../config'; - +import { evaluate } from '../common/common'; import { render } from '../../dagre-wrapper/index.js'; import { log } from '../../logger'; import { configureSvgSize } from '../../utils'; @@ -295,7 +295,7 @@ export const draw = function(text, id) { svg.attr('viewBox', vBox); // Add label rects for non html labels - if (!conf.htmlLabels) { + if (!evaluate(conf.htmlLabels)) { const labels = document.querySelectorAll('[id="' + id + '"] .edgeLabel .label'); for (let k = 0; k < labels.length; k++) { const label = labels[k]; diff --git a/src/mermaid.js b/src/mermaid.js index d6e67f699..2356cc0bf 100644 --- a/src/mermaid.js +++ b/src/mermaid.js @@ -137,7 +137,8 @@ const initialize = function(config) { mermaid.startOnLoad = config.mermaid.startOnLoad; } if (typeof config.mermaid.htmlLabels !== 'undefined') { - mermaid.htmlLabels = config.mermaid.htmlLabels; + mermaid.htmlLabels = + config.mermaid.htmlLabels === 'false' || config.mermaid.htmlLabels === false ? false : true; } } mermaidAPI.initialize(config); diff --git a/src/mermaidAPI.js b/src/mermaidAPI.js index a426fe1bd..8e7db1999 100755 --- a/src/mermaidAPI.js +++ b/src/mermaidAPI.js @@ -54,6 +54,7 @@ import journeyDb from './diagrams/user-journey/journeyDb'; import journeyRenderer from './diagrams/user-journey/journeyRenderer'; import journeyParser from './diagrams/user-journey/parser/journey'; import errorRenderer from './errorRenderer'; +import { evaluate } from './diagrams/common/common'; // import * as configApi from './config'; // // , { // // setConfig, @@ -297,8 +298,9 @@ const render = function(id, _txt, cb, container) { // classDef if (graphType === 'flowchart' || graphType === 'flowchart-v2' || graphType === 'graph') { const classes = flowRenderer.getClasses(txt); + const htmlLabels = evaluate(cnf.htmlLabels) || evaluate(cnf.flowchart.htmlLabels); for (const className in classes) { - if (cnf.htmlLabels || cnf.flowchart.htmlLabels) { + if (htmlLabels) { userStyles += `\n.${className} > * { ${classes[className].styles.join( ' !important; ' )} !important; }`; @@ -306,7 +308,6 @@ const render = function(id, _txt, cb, container) { ' !important; ' )} !important; }`; } else { - // console.log('classes[className].styles', classes[className].styles, cnf.htmlLabels); userStyles += `\n.${className} path { ${classes[className].styles.join( ' !important; ' )} !important; }`;