mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-09-24 01:39:53 +02:00
chore: apply linting to html ext too and fixes for files
This commit is contained in:
@@ -115,14 +115,14 @@
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
mermaid.parseError = function (err, hash) {
|
||||
// console.error('Mermaid error: ', err);
|
||||
};
|
||||
// console.error('Mermaid error: ', err);
|
||||
};
|
||||
mermaid.initialize({
|
||||
theme: 'default',
|
||||
// arrowMarkerAbsolute: true,
|
||||
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
|
||||
logLevel: 0,
|
||||
flowchart: { curve: 'linear', "htmlLabels": true },
|
||||
flowchart: { curve: 'linear', htmlLabels: true },
|
||||
// gantt: { axisFormat: '%m/%d/%Y' },
|
||||
sequence: { actorMargin: 50, showSequenceNumbers: true },
|
||||
// sequenceDiagram: { actorMargin: 300 } // deprecated
|
||||
@@ -131,9 +131,11 @@
|
||||
// fontFamily: '"arial", sans-serif',
|
||||
// },
|
||||
curve: 'linear',
|
||||
securityLevel: 'loose'
|
||||
securityLevel: 'loose',
|
||||
});
|
||||
function callback(){alert('It worked');}
|
||||
function callback() {
|
||||
alert('It worked');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
@@ -130,39 +130,39 @@
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
function clickByFlow(elemName) {
|
||||
const div = document.createElement('div')
|
||||
div.className = 'created-by-click'
|
||||
div.style = 'padding: 20px; background: green; color: white;'
|
||||
div.innerText = 'Clicked By Flow'
|
||||
const div = document.createElement('div');
|
||||
div.className = 'created-by-click';
|
||||
div.style = 'padding: 20px; background: green; color: white;';
|
||||
div.innerText = 'Clicked By Flow';
|
||||
|
||||
document.getElementsByTagName('body')[0].appendChild(div)
|
||||
document.getElementsByTagName('body')[0].appendChild(div);
|
||||
}
|
||||
function clickByFlowArg(argument) {
|
||||
const div = document.createElement('div')
|
||||
div.className = 'created-by-click-2'
|
||||
div.style = 'padding: 20px; background: green; color: white;'
|
||||
div.innerText = 'Clicked By Flow: ' + argument
|
||||
const div = document.createElement('div');
|
||||
div.className = 'created-by-click-2';
|
||||
div.style = 'padding: 20px; background: green; color: white;';
|
||||
div.innerText = 'Clicked By Flow: ' + argument;
|
||||
|
||||
document.getElementsByTagName('body')[0].appendChild(div)
|
||||
document.getElementsByTagName('body')[0].appendChild(div);
|
||||
}
|
||||
function clickByGantt(arg1, arg2, arg3) {
|
||||
const div = document.createElement('div')
|
||||
div.className = 'created-by-gant-click'
|
||||
div.style = 'padding: 20px; background: green; color: white;'
|
||||
div.innerText = 'Clicked By Gant'
|
||||
const div = document.createElement('div');
|
||||
div.className = 'created-by-gant-click';
|
||||
div.style = 'padding: 20px; background: green; color: white;';
|
||||
div.innerText = 'Clicked By Gant';
|
||||
if (arg1) div.innerText += ' ' + arg1;
|
||||
if (arg2) div.innerText += ' ' + arg2;
|
||||
if (arg3) div.innerText += ' ' + arg3;
|
||||
|
||||
document.getElementsByTagName('body')[0].appendChild(div)
|
||||
document.getElementsByTagName('body')[0].appendChild(div);
|
||||
}
|
||||
function clickByClass(arg) {
|
||||
const div = document.createElement('div')
|
||||
div.className = 'created-by-class-click'
|
||||
div.style = 'padding: 20px; background: purple; color: white;'
|
||||
div.innerText = 'Clicked By Class' + (arg?arg:'')
|
||||
const div = document.createElement('div');
|
||||
div.className = 'created-by-class-click';
|
||||
div.style = 'padding: 20px; background: purple; color: white;';
|
||||
div.innerText = 'Clicked By Class' + (arg ? arg : '');
|
||||
|
||||
document.getElementsByTagName('body')[0].appendChild(div)
|
||||
document.getElementsByTagName('body')[0].appendChild(div);
|
||||
}
|
||||
mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 });
|
||||
</script>
|
||||
|
@@ -62,20 +62,20 @@
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
function clickByFlow(elemName) {
|
||||
const div = document.createElement('div')
|
||||
div.className = 'created-by-click'
|
||||
div.style = 'padding: 20px; background: green; color: white;'
|
||||
div.innerText = 'Clicked By Flow'
|
||||
const div = document.createElement('div');
|
||||
div.className = 'created-by-click';
|
||||
div.style = 'padding: 20px; background: green; color: white;';
|
||||
div.innerText = 'Clicked By Flow';
|
||||
|
||||
document.getElementsByTagName('body')[0].appendChild(div)
|
||||
document.getElementsByTagName('body')[0].appendChild(div);
|
||||
}
|
||||
function clickByGantt(elemName) {
|
||||
const div = document.createElement('div')
|
||||
div.className = 'created-by-gant-click'
|
||||
div.style = 'padding: 20px; background: green; color: white;'
|
||||
div.innerText = 'Clicked By Gant'
|
||||
const div = document.createElement('div');
|
||||
div.className = 'created-by-gant-click';
|
||||
div.style = 'padding: 20px; background: green; color: white;';
|
||||
div.innerText = 'Clicked By Gant';
|
||||
|
||||
document.getElementsByTagName('body')[0].appendChild(div)
|
||||
document.getElementsByTagName('body')[0].appendChild(div);
|
||||
}
|
||||
mermaid.initialize({ startOnLoad: true, securityLevel: 'strct', logLevel: 1 });
|
||||
</script>
|
||||
|
@@ -64,23 +64,23 @@
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
function clickByFlow(elemName) {
|
||||
const div = document.createElement('div')
|
||||
div.className = 'created-by-click'
|
||||
div.style = 'padding: 20px; background: green; color: white;'
|
||||
div.innerText = 'Clicked By Flow'
|
||||
const div = document.createElement('div');
|
||||
div.className = 'created-by-click';
|
||||
div.style = 'padding: 20px; background: green; color: white;';
|
||||
div.innerText = 'Clicked By Flow';
|
||||
|
||||
document.getElementsByTagName('body')[0].appendChild(div)
|
||||
document.getElementsByTagName('body')[0].appendChild(div);
|
||||
}
|
||||
function clickByGantt(arg1, arg2, arg3) {
|
||||
const div = document.createElement('div')
|
||||
div.className = 'created-by-gant-click'
|
||||
div.style = 'padding: 20px; background: green; color: white;'
|
||||
div.innerText = 'Clicked By Gant'
|
||||
const div = document.createElement('div');
|
||||
div.className = 'created-by-gant-click';
|
||||
div.style = 'padding: 20px; background: green; color: white;';
|
||||
div.innerText = 'Clicked By Gant';
|
||||
if (arg1) div.innerText += ' ' + arg1;
|
||||
if (arg2) div.innerText += ' ' + arg2;
|
||||
if (arg3) div.innerText += ' ' + arg3;
|
||||
|
||||
document.getElementsByTagName('body')[0].appendChild(div)
|
||||
document.getElementsByTagName('body')[0].appendChild(div);
|
||||
}
|
||||
mermaid.initialize({ startOnLoad: true, securityLevel: 'strict', logLevel: 1 });
|
||||
</script>
|
||||
|
@@ -155,23 +155,25 @@ _one --> b
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
mermaid.parseError = function (err, hash) {
|
||||
// console.error('Mermaid error: ', err);
|
||||
};
|
||||
// console.error('Mermaid error: ', err);
|
||||
};
|
||||
mermaid.initialize({
|
||||
// theme: 'forest',
|
||||
// themeVariables:{primaryColor: '#ff0000'},
|
||||
// arrowMarkerAbsolute: true,
|
||||
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
|
||||
logLevel: 0,
|
||||
flowchart: { curve: 'cardinal', "htmlLabels": true },
|
||||
flowchart: { curve: 'cardinal', htmlLabels: true },
|
||||
// gantt: { axisFormat: '%m/%d/%Y' },
|
||||
sequence: { actorMargin: 50, showSequenceNumbers: true },
|
||||
// sequenceDiagram: { actorMargin: 300 } // deprecated
|
||||
fontFamily: '"arial", sans-serif',
|
||||
curve: 'cardinal',
|
||||
securityLevel: 'strict'
|
||||
securityLevel: 'strict',
|
||||
});
|
||||
function callback(){alert('It worked');}
|
||||
function callback() {
|
||||
alert('It worked');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
@@ -107,23 +107,25 @@ Note over Bob,Alice: Looks back
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
mermaid.parseError = function (err, hash) {
|
||||
// console.error('Mermaid error: ', err);
|
||||
};
|
||||
// console.error('Mermaid error: ', err);
|
||||
};
|
||||
mermaid.initialize({
|
||||
// theme: 'forest',
|
||||
// themeVariables:{primaryColor: '#ff0000'},
|
||||
// arrowMarkerAbsolute: true,
|
||||
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
|
||||
logLevel: 0,
|
||||
flowchart: { curve: 'cardinal', "htmlLabels": false },
|
||||
flowchart: { curve: 'cardinal', htmlLabels: false },
|
||||
// gantt: { axisFormat: '%m/%d/%Y' },
|
||||
sequence: { actorMargin: 50, showSequenceNumbers: true },
|
||||
// sequenceDiagram: { actorMargin: 300 } // deprecated
|
||||
fontFamily: '"arial", sans-serif',
|
||||
curve: 'cardinal',
|
||||
securityLevel: 'strict'
|
||||
securityLevel: 'strict',
|
||||
});
|
||||
function callback(){alert('It worked');}
|
||||
function callback() {
|
||||
alert('It worked');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
@@ -29,7 +29,7 @@
|
||||
// arrowMarkerAbsolute: true,
|
||||
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
|
||||
logLevel: 0,
|
||||
flowchart: { curve: 'linear', "htmlLabels": false },
|
||||
flowchart: { curve: 'linear', htmlLabels: false },
|
||||
// gantt: { axisFormat: '%m/%d/%Y' },
|
||||
sequence: { actorMargin: 50 },
|
||||
// sequenceDiagram: { actorMargin: 300 } // deprecated
|
||||
|
@@ -90,31 +90,31 @@
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
function clickByFlow(elemName) {
|
||||
const div = document.createElement('div')
|
||||
div.className = 'created-by-click'
|
||||
div.style = 'padding: 20px; background: green; color: white;'
|
||||
div.innerText = 'Clicked By Flow'
|
||||
const div = document.createElement('div');
|
||||
div.className = 'created-by-click';
|
||||
div.style = 'padding: 20px; background: green; color: white;';
|
||||
div.innerText = 'Clicked By Flow';
|
||||
|
||||
document.getElementsByTagName('body')[0].appendChild(div)
|
||||
document.getElementsByTagName('body')[0].appendChild(div);
|
||||
}
|
||||
function clickByGantt(arg1, arg2, arg3) {
|
||||
const div = document.createElement('div')
|
||||
div.className = 'created-by-gant-click'
|
||||
div.style = 'padding: 20px; background: green; color: white;'
|
||||
div.innerText = 'Clicked By Gant'
|
||||
const div = document.createElement('div');
|
||||
div.className = 'created-by-gant-click';
|
||||
div.style = 'padding: 20px; background: green; color: white;';
|
||||
div.innerText = 'Clicked By Gant';
|
||||
if (arg1) div.innerText += ' ' + arg1;
|
||||
if (arg2) div.innerText += ' ' + arg2;
|
||||
if (arg3) div.innerText += ' ' + arg3;
|
||||
|
||||
document.getElementsByTagName('body')[0].appendChild(div)
|
||||
document.getElementsByTagName('body')[0].appendChild(div);
|
||||
}
|
||||
function clickByClass() {
|
||||
const div = document.createElement('div')
|
||||
div.className = 'created-by-class-click'
|
||||
div.style = 'padding: 20px; background: purple; color: white;'
|
||||
div.innerText = 'Clicked By Class'
|
||||
const div = document.createElement('div');
|
||||
div.className = 'created-by-class-click';
|
||||
div.style = 'padding: 20px; background: purple; color: white;';
|
||||
div.innerText = 'Clicked By Class';
|
||||
|
||||
document.getElementsByTagName('body')[0].appendChild(div)
|
||||
document.getElementsByTagName('body')[0].appendChild(div);
|
||||
}
|
||||
mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 });
|
||||
</script>
|
||||
|
@@ -38,32 +38,33 @@ stateDiagram-v2
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
mermaid.parseError = function (err, hash) {
|
||||
// console.error('Mermaid error: ', err);
|
||||
};
|
||||
// console.error('Mermaid error: ', err);
|
||||
};
|
||||
mermaid.initialize({
|
||||
// theme: 'dark',
|
||||
theme: 'forest',
|
||||
arrowMarkerAbsolute: true,
|
||||
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
|
||||
logLevel: 2,
|
||||
flowchart: { nodeSpacing: 10, curve: 'cardinal', htmlLabels: false },
|
||||
// gantt: { axisFormat: '%m/%d/%Y' },
|
||||
sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: false },
|
||||
sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
|
||||
// sequenceDiagram: { actorMargin: 300 } // deprecated
|
||||
// fontFamily: '"times", sans-serif',
|
||||
// fontFamily: 'courier',
|
||||
state:{
|
||||
state: {
|
||||
nodeSpacing: 50,
|
||||
rankSpacing: 50,
|
||||
defaultRenderer: 'dagre-wrapper',
|
||||
},
|
||||
logLevel:0,
|
||||
logLevel: 0,
|
||||
fontSize: 18,
|
||||
curve: 'cardinal',
|
||||
securityLevel: 'strict',
|
||||
// themeVariables: {relationLabelColor: 'red'}
|
||||
});
|
||||
function callback(){alert('It worked');}
|
||||
function callback() {
|
||||
alert('It worked');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
@@ -46,8 +46,8 @@
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
mermaid.parseError = function (err, hash) {
|
||||
// console.error('Mermaid error: ', err);
|
||||
};
|
||||
// console.error('Mermaid error: ', err);
|
||||
};
|
||||
mermaid.initialize({
|
||||
theme: 'forest',
|
||||
arrowMarkerAbsolute: true,
|
||||
@@ -58,35 +58,39 @@
|
||||
},
|
||||
flowchart: {
|
||||
// defaultRenderer: 'dagre-wrapper',
|
||||
nodeSpacing: 10, curve: 'cardinal', htmlLabels: true
|
||||
nodeSpacing: 10,
|
||||
curve: 'cardinal',
|
||||
htmlLabels: true,
|
||||
},
|
||||
htmlLabels: false,
|
||||
// gantt: { axisFormat: '%m/%d/%Y' },
|
||||
sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: false },
|
||||
sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
|
||||
// sequenceDiagram: { actorMargin: 300 } // deprecated
|
||||
// fontFamily: '"times", sans-serif',
|
||||
// fontFamily: 'courier',
|
||||
fontSize: 18,
|
||||
curve: 'basis',
|
||||
securityLevel: 'strict',
|
||||
startOnLoad: false
|
||||
startOnLoad: false,
|
||||
// themeVariables: {relationLabelColor: 'red'}
|
||||
});
|
||||
function callback(){alert('It worked');}
|
||||
function callback() {
|
||||
alert('It worked');
|
||||
}
|
||||
|
||||
var diagram = "%%{init: {\"flowchart\": {\"htmlLabels\": \"false\"}} }%%\n";
|
||||
diagram += "flowchart\n";
|
||||
diagram += "A[\"<ifra";
|
||||
diagram += "me srcdoc='<scrip";
|
||||
diagram += "t src=http://localhost:9000/exploit.js>";
|
||||
diagram += "</scr"
|
||||
diagram += "ipt>'></iframe>\"]";
|
||||
var diagram = '%%{init: {"flowchart": {"htmlLabels": "false"}} }%%\n';
|
||||
diagram += 'flowchart\n';
|
||||
diagram += 'A["<ifra';
|
||||
diagram += "me srcdoc='<scrip";
|
||||
diagram += 't src=http://localhost:9000/exploit.js>';
|
||||
diagram += '</scr';
|
||||
diagram += 'ipt>\'></iframe>"]';
|
||||
|
||||
console.log(diagram);
|
||||
// document.querySelector('#diagram').innerHTML = diagram;
|
||||
mermaid.render('diagram', diagram, (res) => {
|
||||
document.querySelector('#res').innerHTML = res;
|
||||
});
|
||||
console.log(diagram);
|
||||
// document.querySelector('#diagram').innerHTML = diagram;
|
||||
mermaid.render('diagram', diagram, (res) => {
|
||||
document.querySelector('#res').innerHTML = res;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
@@ -185,8 +185,8 @@ style N stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
mermaid.parseError = function (err, hash) {
|
||||
// console.error('Mermaid error: ', err);
|
||||
};
|
||||
// console.error('Mermaid error: ', err);
|
||||
};
|
||||
mermaid.initialize({
|
||||
theme: 'neutral',
|
||||
arrowMarkerAbsolute: true,
|
||||
@@ -195,7 +195,7 @@ style N stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
flowchart: { nodeSpacing: 10, curve: 'cardinal', htmlLabels: true },
|
||||
htmlLabels: true,
|
||||
// gantt: { axisFormat: '%m/%d/%Y' },
|
||||
sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: false },
|
||||
sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
|
||||
// sequenceDiagram: { actorMargin: 300 } // deprecated
|
||||
// fontFamily: '"times", sans-serif',
|
||||
// fontFamily: 'courier',
|
||||
@@ -204,7 +204,9 @@ style N stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
securityLevel: 'loose',
|
||||
// themeVariables: {relationLabelColor: 'red'}
|
||||
});
|
||||
function callback(){alert('It worked');}
|
||||
function callback() {
|
||||
alert('It worked');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
@@ -3,10 +3,9 @@
|
||||
<script src="http://localhost:9000/mermaid.js"></script>
|
||||
<script>
|
||||
mermaid.initialize({
|
||||
theme: 'base',
|
||||
themeVariables: {
|
||||
},
|
||||
startOnLoad: true,
|
||||
theme: 'base',
|
||||
themeVariables: {},
|
||||
startOnLoad: true,
|
||||
});
|
||||
</script>
|
||||
|
||||
|
@@ -11,21 +11,16 @@
|
||||
</div>
|
||||
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
|
||||
mermaid.init({ startOnLoad: false });
|
||||
<script>mermaid.init({ startOnLoad: false });
|
||||
mermaid.mermaidAPI.initialize();
|
||||
|
||||
try{
|
||||
mermaid.mermaidAPI.render("graphDiv",
|
||||
`>`);
|
||||
} catch(e){}
|
||||
try {
|
||||
mermaid.mermaidAPI.render('graphDiv', `>`);
|
||||
} catch (e) {}
|
||||
|
||||
mermaid.mermaidAPI.render("graphDiv",
|
||||
`graph LR\n a --> b`, html => {
|
||||
document.getElementById('graph').innerHTML=html;
|
||||
mermaid.mermaidAPI.render('graphDiv', `graph LR\n a --> b`, (html) => {
|
||||
document.getElementById('graph').innerHTML = html;
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
@@ -11,21 +11,18 @@
|
||||
</div>
|
||||
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
|
||||
mermaid.init({ startOnLoad: false });
|
||||
<script>mermaid.init({ startOnLoad: false });
|
||||
mermaid.mermaidAPI.initialize();
|
||||
|
||||
rerender('XMas');
|
||||
|
||||
function rerender(text) {
|
||||
var graphText = `graph TD
|
||||
A[${text}] -->|Get money| B(Go shopping)`
|
||||
A[${text}] -->|Get money| B(Go shopping)`;
|
||||
var graph = mermaid.mermaidAPI.render('id', graphText);
|
||||
console.log('\x1b[35m%s\x1b[0m', '>> graph', graph)
|
||||
document.getElementById('graph').innerHTML=graph;
|
||||
console.log('\x1b[35m%s\x1b[0m', '>> graph', graph);
|
||||
document.getElementById('graph').innerHTML = graph;
|
||||
}
|
||||
|
||||
</script>
|
||||
<button id="rerender" onclick="rerender('Saturday')">Rerender</button>
|
||||
|
||||
|
@@ -267,23 +267,25 @@ requirementDiagram
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
mermaid.parseError = function (err, hash) {
|
||||
// console.error('Mermaid error: ', err);
|
||||
};
|
||||
// console.error('Mermaid error: ', err);
|
||||
};
|
||||
mermaid.initialize({
|
||||
theme: 'base',
|
||||
// themeVariables:
|
||||
// arrowMarkerAbsolute: true,
|
||||
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
|
||||
logLevel: 0,
|
||||
flowchart: { curve: 'cardinal', "htmlLabels": false },
|
||||
flowchart: { curve: 'cardinal', htmlLabels: false },
|
||||
// gantt: { axisFormat: '%m/%d/%Y' },
|
||||
sequence: { actorMargin: 50, showSequenceNumbers: true },
|
||||
// sequenceDiagram: { actorMargin: 300 } // deprecated
|
||||
fontFamily: '"arial", sans-serif',
|
||||
curve: 'cardinal',
|
||||
securityLevel: 'strict'
|
||||
securityLevel: 'strict',
|
||||
});
|
||||
function callback(){alert('It worked');}
|
||||
function callback() {
|
||||
alert('It worked');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
@@ -262,15 +262,24 @@ requirementDiagram
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
mermaid.parseError = function (err, hash) {
|
||||
// console.error('Mermaid error: ', err);
|
||||
};
|
||||
// console.error('Mermaid error: ', err);
|
||||
};
|
||||
mermaid.initialize({
|
||||
theme: 'base',
|
||||
themeVariables: { primaryColor: '#9400D3', darkMode: true, background: '#222', textColor:'white', primaryTextColor: '#f4f4f4', nodeBkg: '#ff0000', mainBkg:'#0000ff', tertiaryColor:'#ffffcc' },
|
||||
themeVariables: {
|
||||
primaryColor: '#9400D3',
|
||||
darkMode: true,
|
||||
background: '#222',
|
||||
textColor: 'white',
|
||||
primaryTextColor: '#f4f4f4',
|
||||
nodeBkg: '#ff0000',
|
||||
mainBkg: '#0000ff',
|
||||
tertiaryColor: '#ffffcc',
|
||||
},
|
||||
// arrowMarkerAbsolute: true,
|
||||
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
|
||||
logLevel: 0,
|
||||
flowchart: { curve: 'cardinal', "htmlLabels": false },
|
||||
flowchart: { curve: 'cardinal', htmlLabels: false },
|
||||
// gantt: { axisFormat: '%m/%d/%Y' },
|
||||
sequence: { actorMargin: 50, showSequenceNumbers: true },
|
||||
// sequenceDiagram: { actorMargin: 300 } // deprecated
|
||||
@@ -278,7 +287,9 @@ requirementDiagram
|
||||
curve: 'cardinal',
|
||||
// securityLevel: 'strict'
|
||||
});
|
||||
function callback(){alert('It worked');}
|
||||
function callback() {
|
||||
alert('It worked');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
@@ -259,22 +259,24 @@ requirementDiagram
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
mermaid.parseError = function (err, hash) {
|
||||
// console.error('Mermaid error: ', err);
|
||||
};
|
||||
// console.error('Mermaid error: ', err);
|
||||
};
|
||||
mermaid.initialize({
|
||||
theme: 'dark',
|
||||
// arrowMarkerAbsolute: true,
|
||||
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
|
||||
logLevel: 0,
|
||||
flowchart: { curve: 'cardinal', "htmlLabels": true },
|
||||
flowchart: { curve: 'cardinal', htmlLabels: true },
|
||||
// gantt: { axisFormat: '%m/%d/%Y' },
|
||||
sequence: { actorMargin: 50, showSequenceNumbers: true },
|
||||
// sequenceDiagram: { actorMargin: 300 } // deprecated
|
||||
fontFamily: '"arial", sans-serif',
|
||||
curve: 'cardinal',
|
||||
securityLevel: 'strict'
|
||||
securityLevel: 'strict',
|
||||
});
|
||||
function callback(){alert('It worked');}
|
||||
function callback() {
|
||||
alert('It worked');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
@@ -254,22 +254,24 @@ requirementDiagram
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
mermaid.parseError = function (err, hash) {
|
||||
// console.error('Mermaid error: ', err);
|
||||
};
|
||||
// console.error('Mermaid error: ', err);
|
||||
};
|
||||
mermaid.initialize({
|
||||
// theme: 'dark',
|
||||
// arrowMarkerAbsolute: true,
|
||||
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
|
||||
logLevel: 0,
|
||||
flowchart: { curve: 'cardinal', "htmlLabels": false },
|
||||
flowchart: { curve: 'cardinal', htmlLabels: false },
|
||||
// gantt: { axisFormat: '%m/%d/%Y' },
|
||||
sequence: { actorMargin: 50, showSequenceNumbers: true },
|
||||
// sequenceDiagram: { actorMargin: 300 } // deprecated
|
||||
fontFamily: '"arial", sans-serif',
|
||||
curve: 'cardinal',
|
||||
securityLevel: 'strict'
|
||||
securityLevel: 'strict',
|
||||
});
|
||||
function callback(){alert('It worked');}
|
||||
function callback() {
|
||||
alert('It worked');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
@@ -258,22 +258,24 @@ requirementDiagram
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
mermaid.parseError = function (err, hash) {
|
||||
// console.error('Mermaid error: ', err);
|
||||
};
|
||||
// console.error('Mermaid error: ', err);
|
||||
};
|
||||
mermaid.initialize({
|
||||
theme: 'forest',
|
||||
// arrowMarkerAbsolute: true,
|
||||
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
|
||||
logLevel: 0,
|
||||
flowchart: { curve: 'cardinal', "htmlLabels": false },
|
||||
flowchart: { curve: 'cardinal', htmlLabels: false },
|
||||
// gantt: { axisFormat: '%m/%d/%Y' },
|
||||
sequence: { actorMargin: 50, showSequenceNumbers: true },
|
||||
// sequenceDiagram: { actorMargin: 300 } // deprecated
|
||||
fontFamily: '"arial", sans-serif',
|
||||
curve: 'cardinal',
|
||||
securityLevel: 'strict'
|
||||
securityLevel: 'strict',
|
||||
});
|
||||
function callback(){alert('It worked');}
|
||||
function callback() {
|
||||
alert('It worked');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
@@ -257,22 +257,24 @@ requirementDiagram
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
mermaid.parseError = function (err, hash) {
|
||||
// console.error('Mermaid error: ', err);
|
||||
};
|
||||
// console.error('Mermaid error: ', err);
|
||||
};
|
||||
mermaid.initialize({
|
||||
theme: 'neutral',
|
||||
// arrowMarkerAbsolute: true,
|
||||
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
|
||||
logLevel: 0,
|
||||
flowchart: { curve: 'cardinal', "htmlLabels": false },
|
||||
flowchart: { curve: 'cardinal', htmlLabels: false },
|
||||
// gantt: { axisFormat: '%m/%d/%Y' },
|
||||
sequence: { actorMargin: 50, showSequenceNumbers: true },
|
||||
// sequenceDiagram: { actorMargin: 300 } // deprecated
|
||||
fontFamily: '"arial", sans-serif',
|
||||
curve: 'cardinal',
|
||||
securityLevel: 'strict'
|
||||
securityLevel: 'strict',
|
||||
});
|
||||
function callback(){alert('It worked');}
|
||||
function callback() {
|
||||
alert('It worked');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
@@ -37,9 +37,9 @@
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
function showFullFirstSquad(elemName) {
|
||||
console.log('show ' + elemName);
|
||||
}
|
||||
mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 });
|
||||
console.log('show ' + elemName);
|
||||
}
|
||||
mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 });
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
@@ -120,8 +120,8 @@
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
mermaid.parseError = function (err, hash) {
|
||||
// console.error('Mermaid error: ', err);
|
||||
};
|
||||
// console.error('Mermaid error: ', err);
|
||||
};
|
||||
mermaid.initialize({
|
||||
// theme: 'dark',
|
||||
// theme: 'dark',
|
||||
@@ -129,7 +129,7 @@
|
||||
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
|
||||
logLevel: 0,
|
||||
// flowchart: { useMaxWidth: true },
|
||||
graph: { curve: 'cardinal', "htmlLabels": false },
|
||||
graph: { curve: 'cardinal', htmlLabels: false },
|
||||
// gantt: { axisFormat: '%m/%d/%Y' },
|
||||
sequence: { actorMargin: 50, showSequenceNumbers: true },
|
||||
// sequenceDiagram: { actorMargin: 300 } // deprecated
|
||||
@@ -137,7 +137,9 @@
|
||||
curve: 'cardinal',
|
||||
securityLevel: 'strict',
|
||||
});
|
||||
function callback(){alert('It worked');}
|
||||
function callback() {
|
||||
alert('It worked');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
@@ -29,9 +29,9 @@
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
function showFullFirstSquad(elemName) {
|
||||
console.log('show ' + elemName);
|
||||
}
|
||||
mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 });
|
||||
console.log('show ' + elemName);
|
||||
}
|
||||
mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 });
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
@@ -23,11 +23,11 @@
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
function xssAttack(){
|
||||
const div = document.createElement('div')
|
||||
div.id = 'the-malware'
|
||||
div.className = 'malware'
|
||||
div.innerHTML = 'XSS Succeeded'
|
||||
function xssAttack() {
|
||||
const div = document.createElement('div');
|
||||
div.id = 'the-malware';
|
||||
div.className = 'malware';
|
||||
div.innerHTML = 'XSS Succeeded';
|
||||
document.getElementsByTagName('body')[0].appendChild(div);
|
||||
// const el = document.querySelector('.mermaid');
|
||||
// el.parentNode.removeChild(el);
|
||||
|
@@ -46,8 +46,8 @@
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
mermaid.parseError = function (err, hash) {
|
||||
// console.error('Mermaid error: ', err);
|
||||
};
|
||||
// console.error('Mermaid error: ', err);
|
||||
};
|
||||
mermaid.initialize({
|
||||
theme: 'forest',
|
||||
arrowMarkerAbsolute: true,
|
||||
@@ -58,11 +58,13 @@
|
||||
},
|
||||
flowchart: {
|
||||
// defaultRenderer: 'dagre-wrapper',
|
||||
nodeSpacing: 10, curve: 'cardinal', htmlLabels: true
|
||||
nodeSpacing: 10,
|
||||
curve: 'cardinal',
|
||||
htmlLabels: true,
|
||||
},
|
||||
htmlLabels: true,
|
||||
// gantt: { axisFormat: '%m/%d/%Y' },
|
||||
sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: false },
|
||||
sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
|
||||
// sequenceDiagram: { actorMargin: 300 } // deprecated
|
||||
// fontFamily: '"times", sans-serif',
|
||||
// fontFamily: 'courier',
|
||||
@@ -70,35 +72,36 @@
|
||||
curve: 'basis',
|
||||
securityLevel: 'antiscript',
|
||||
startOnLoad: false,
|
||||
secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']
|
||||
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'
|
||||
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 = "classDiagram\n"
|
||||
diagram += "class Square~<img/src";
|
||||
var diagram = 'classDiagram\n';
|
||||
diagram += 'class Square~<img/src';
|
||||
diagram += "='1'/onerror=xssAttack()>~{\n";
|
||||
diagram += "id A\n";
|
||||
diagram += "}";
|
||||
diagram += 'id A\n';
|
||||
diagram += '}';
|
||||
|
||||
// var diagram = "stateDiagram-v2\n";
|
||||
// diagram += "<img/src='1'/onerror"
|
||||
// diagram += "=xssAttack()> --> B";
|
||||
console.log(diagram);
|
||||
// document.querySelector('#diagram').innerHTML = diagram;
|
||||
mermaid.render('diagram', diagram, (res) => {
|
||||
console.log(res);
|
||||
document.querySelector('#res').innerHTML = res;
|
||||
});
|
||||
// var diagram = "stateDiagram-v2\n";
|
||||
// diagram += "<img/src='1'/onerror"
|
||||
// diagram += "=xssAttack()> --> B";
|
||||
console.log(diagram);
|
||||
// document.querySelector('#diagram').innerHTML = diagram;
|
||||
mermaid.render('diagram', diagram, (res) => {
|
||||
console.log(res);
|
||||
document.querySelector('#res').innerHTML = res;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
@@ -46,8 +46,8 @@
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
mermaid.parseError = function (err, hash) {
|
||||
// console.error('Mermaid error: ', err);
|
||||
};
|
||||
// console.error('Mermaid error: ', err);
|
||||
};
|
||||
mermaid.initialize({
|
||||
theme: 'forest',
|
||||
arrowMarkerAbsolute: true,
|
||||
@@ -58,11 +58,13 @@
|
||||
},
|
||||
flowchart: {
|
||||
// defaultRenderer: 'dagre-wrapper',
|
||||
nodeSpacing: 10, curve: 'cardinal', htmlLabels: true
|
||||
nodeSpacing: 10,
|
||||
curve: 'cardinal',
|
||||
htmlLabels: true,
|
||||
},
|
||||
htmlLabels: true,
|
||||
// gantt: { axisFormat: '%m/%d/%Y' },
|
||||
sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: false },
|
||||
sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
|
||||
// sequenceDiagram: { actorMargin: 300 } // deprecated
|
||||
// fontFamily: '"times", sans-serif',
|
||||
// fontFamily: 'courier',
|
||||
@@ -70,33 +72,34 @@
|
||||
curve: 'basis',
|
||||
securityLevel: 'antiscript',
|
||||
startOnLoad: false,
|
||||
secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']
|
||||
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'
|
||||
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 = "stateDiagram-v2\n"
|
||||
diagram += "s2 : This is a state description<img/src";
|
||||
var diagram = 'stateDiagram-v2\n';
|
||||
diagram += 's2 : This is a state description<img/src';
|
||||
diagram += "='1'/onerror=xssAttack()>";
|
||||
|
||||
// var diagram = "stateDiagram-v2\n";
|
||||
// diagram += "<img/src='1'/onerror"
|
||||
// diagram += "=xssAttack()> --> B";
|
||||
console.log(diagram);
|
||||
// document.querySelector('#diagram').innerHTML = diagram;
|
||||
mermaid.render('diagram', diagram, (res) => {
|
||||
console.log(res);
|
||||
document.querySelector('#res').innerHTML = res;
|
||||
});
|
||||
// var diagram = "stateDiagram-v2\n";
|
||||
// diagram += "<img/src='1'/onerror"
|
||||
// diagram += "=xssAttack()> --> B";
|
||||
console.log(diagram);
|
||||
// document.querySelector('#diagram').innerHTML = diagram;
|
||||
mermaid.render('diagram', diagram, (res) => {
|
||||
console.log(res);
|
||||
document.querySelector('#res').innerHTML = res;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
@@ -46,8 +46,8 @@
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
mermaid.parseError = function (err, hash) {
|
||||
// console.error('Mermaid error: ', err);
|
||||
};
|
||||
// console.error('Mermaid error: ', err);
|
||||
};
|
||||
mermaid.initialize({
|
||||
theme: 'forest',
|
||||
arrowMarkerAbsolute: true,
|
||||
@@ -58,11 +58,13 @@
|
||||
},
|
||||
flowchart: {
|
||||
// defaultRenderer: 'dagre-wrapper',
|
||||
nodeSpacing: 10, curve: 'cardinal', htmlLabels: true
|
||||
nodeSpacing: 10,
|
||||
curve: 'cardinal',
|
||||
htmlLabels: true,
|
||||
},
|
||||
htmlLabels: true,
|
||||
// gantt: { axisFormat: '%m/%d/%Y' },
|
||||
sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: false },
|
||||
sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
|
||||
// sequenceDiagram: { actorMargin: 300 } // deprecated
|
||||
// fontFamily: '"times", sans-serif',
|
||||
// fontFamily: 'courier',
|
||||
@@ -70,33 +72,34 @@
|
||||
curve: 'basis',
|
||||
securityLevel: 'antiscript',
|
||||
startOnLoad: false,
|
||||
secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']
|
||||
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'
|
||||
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 = "stateDiagram-v2\n"
|
||||
diagram += "s2 : A<img/src";
|
||||
var diagram = 'stateDiagram-v2\n';
|
||||
diagram += 's2 : A<img/src';
|
||||
diagram += "='1'/onerror=xssAttack()>";
|
||||
|
||||
// var diagram = "stateDiagram-v2\n";
|
||||
// diagram += "<img/src='1'/onerror"
|
||||
// diagram += "=xssAttack()> --> B";
|
||||
console.log(diagram);
|
||||
// document.querySelector('#diagram').innerHTML = diagram;
|
||||
mermaid.render('diagram', diagram, (res) => {
|
||||
console.log(res);
|
||||
document.querySelector('#res').innerHTML = res;
|
||||
});
|
||||
// var diagram = "stateDiagram-v2\n";
|
||||
// diagram += "<img/src='1'/onerror"
|
||||
// diagram += "=xssAttack()> --> B";
|
||||
console.log(diagram);
|
||||
// document.querySelector('#diagram').innerHTML = diagram;
|
||||
mermaid.render('diagram', diagram, (res) => {
|
||||
console.log(res);
|
||||
document.querySelector('#res').innerHTML = res;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
@@ -46,8 +46,8 @@
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
mermaid.parseError = function (err, hash) {
|
||||
// console.error('Mermaid error: ', err);
|
||||
};
|
||||
// console.error('Mermaid error: ', err);
|
||||
};
|
||||
mermaid.initialize({
|
||||
theme: 'forest',
|
||||
arrowMarkerAbsolute: true,
|
||||
@@ -58,11 +58,13 @@
|
||||
},
|
||||
flowchart: {
|
||||
// defaultRenderer: 'dagre-wrapper',
|
||||
nodeSpacing: 10, curve: 'cardinal', htmlLabels: true
|
||||
nodeSpacing: 10,
|
||||
curve: 'cardinal',
|
||||
htmlLabels: true,
|
||||
},
|
||||
htmlLabels: true,
|
||||
// gantt: { axisFormat: '%m/%d/%Y' },
|
||||
sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: false },
|
||||
sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
|
||||
// sequenceDiagram: { actorMargin: 300 } // deprecated
|
||||
// fontFamily: '"times", sans-serif',
|
||||
// fontFamily: 'courier',
|
||||
@@ -70,33 +72,34 @@
|
||||
curve: 'basis',
|
||||
securityLevel: 'antiscript',
|
||||
startOnLoad: false,
|
||||
secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']
|
||||
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'
|
||||
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 = "stateDiagram-v2\n"
|
||||
diagram += "if_state --> False: if n < 0<img/src";
|
||||
var diagram = 'stateDiagram-v2\n';
|
||||
diagram += 'if_state --> False: if n < 0<img/src';
|
||||
diagram += "='1'/onerror=xssAttack()>";
|
||||
|
||||
// var diagram = "stateDiagram-v2\n";
|
||||
// diagram += "<img/src='1'/onerror"
|
||||
// diagram += "=xssAttack()> --> B";
|
||||
console.log(diagram);
|
||||
// document.querySelector('#diagram').innerHTML = diagram;
|
||||
mermaid.render('diagram', diagram, (res) => {
|
||||
console.log(res);
|
||||
document.querySelector('#res').innerHTML = res;
|
||||
});
|
||||
// var diagram = "stateDiagram-v2\n";
|
||||
// diagram += "<img/src='1'/onerror"
|
||||
// diagram += "=xssAttack()> --> B";
|
||||
console.log(diagram);
|
||||
// document.querySelector('#diagram').innerHTML = diagram;
|
||||
mermaid.render('diagram', diagram, (res) => {
|
||||
console.log(res);
|
||||
document.querySelector('#res').innerHTML = res;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
@@ -22,11 +22,11 @@
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
function xssAttack(){
|
||||
const div = document.createElement('div')
|
||||
div.id = 'the-malware'
|
||||
div.className = 'malware'
|
||||
div.innerHTML = 'XSS Succeeded'
|
||||
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');
|
||||
}
|
||||
@@ -62,11 +62,11 @@
|
||||
var handler = setInterval(() => {
|
||||
cnt++;
|
||||
a = {};
|
||||
if(typeof a.polluted !== 'undefined') {
|
||||
if (typeof a.polluted !== 'undefined') {
|
||||
clearInterval(handler);
|
||||
xssAttack();
|
||||
}
|
||||
if(cnt>20) {
|
||||
if (cnt > 20) {
|
||||
clearInterval(handler);
|
||||
}
|
||||
}, 100);
|
||||
|
@@ -22,11 +22,11 @@
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
function xssAttack(){
|
||||
const div = document.createElement('div')
|
||||
div.id = 'the-malware'
|
||||
div.className = 'malware'
|
||||
div.innerHTML = 'XSS Succeeded'
|
||||
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');
|
||||
}
|
||||
@@ -49,11 +49,11 @@
|
||||
var handler = setInterval(() => {
|
||||
cnt++;
|
||||
a = {};
|
||||
if(typeof a.polluted !== 'undefined') {
|
||||
if (typeof a.polluted !== 'undefined') {
|
||||
clearInterval(handler);
|
||||
xssAttack();
|
||||
}
|
||||
if(cnt>20) {
|
||||
if (cnt > 20) {
|
||||
clearInterval(handler);
|
||||
}
|
||||
}, 100);
|
||||
|
@@ -46,8 +46,8 @@
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
mermaid.parseError = function (err, hash) {
|
||||
// console.error('Mermaid error: ', err);
|
||||
};
|
||||
// console.error('Mermaid error: ', err);
|
||||
};
|
||||
mermaid.initialize({
|
||||
theme: 'forest',
|
||||
arrowMarkerAbsolute: true,
|
||||
@@ -58,11 +58,13 @@
|
||||
},
|
||||
flowchart: {
|
||||
// defaultRenderer: 'dagre-wrapper',
|
||||
nodeSpacing: 10, curve: 'cardinal', htmlLabels: true
|
||||
nodeSpacing: 10,
|
||||
curve: 'cardinal',
|
||||
htmlLabels: true,
|
||||
},
|
||||
htmlLabels: false,
|
||||
// gantt: { axisFormat: '%m/%d/%Y' },
|
||||
sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: false },
|
||||
sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
|
||||
// sequenceDiagram: { actorMargin: 300 } // deprecated
|
||||
// fontFamily: '"times", sans-serif',
|
||||
// fontFamily: 'courier',
|
||||
@@ -70,24 +72,26 @@
|
||||
curve: 'basis',
|
||||
securityLevel: 'strict',
|
||||
startOnLoad: false,
|
||||
secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']
|
||||
secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'],
|
||||
// themeVariables: {relationLabelColor: 'red'}
|
||||
});
|
||||
function callback(){alert('It worked');}
|
||||
function callback() {
|
||||
alert('It worked');
|
||||
}
|
||||
|
||||
var diagram = "%%{init: {\"flowchart\": {\"htmlLabels\": \"true\"}} }%%\n";
|
||||
diagram += "flowchart\n";
|
||||
diagram += "A[\"<ifra";
|
||||
diagram += "me srcdoc='<scrip";
|
||||
diagram += "t src=http://localhost:9000/exploit.js>";
|
||||
diagram += "</scr"
|
||||
diagram += "ipt>'></iframe>\"]";
|
||||
var diagram = '%%{init: {"flowchart": {"htmlLabels": "true"}} }%%\n';
|
||||
diagram += 'flowchart\n';
|
||||
diagram += 'A["<ifra';
|
||||
diagram += "me srcdoc='<scrip";
|
||||
diagram += 't src=http://localhost:9000/exploit.js>';
|
||||
diagram += '</scr';
|
||||
diagram += 'ipt>\'></iframe>"]';
|
||||
|
||||
console.log(diagram);
|
||||
// document.querySelector('#diagram').innerHTML = diagram;
|
||||
mermaid.render('diagram', diagram, (res) => {
|
||||
document.querySelector('#res').innerHTML = res;
|
||||
});
|
||||
console.log(diagram);
|
||||
// document.querySelector('#diagram').innerHTML = diagram;
|
||||
mermaid.render('diagram', diagram, (res) => {
|
||||
document.querySelector('#res').innerHTML = res;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
@@ -46,8 +46,8 @@
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
mermaid.parseError = function (err, hash) {
|
||||
// console.error('Mermaid error: ', err);
|
||||
};
|
||||
// console.error('Mermaid error: ', err);
|
||||
};
|
||||
mermaid.initialize({
|
||||
theme: 'forest',
|
||||
arrowMarkerAbsolute: true,
|
||||
@@ -58,11 +58,13 @@
|
||||
},
|
||||
flowchart: {
|
||||
// defaultRenderer: 'dagre-wrapper',
|
||||
nodeSpacing: 10, curve: 'cardinal', htmlLabels: true
|
||||
nodeSpacing: 10,
|
||||
curve: 'cardinal',
|
||||
htmlLabels: true,
|
||||
},
|
||||
htmlLabels: true,
|
||||
// gantt: { axisFormat: '%m/%d/%Y' },
|
||||
sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: false },
|
||||
sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
|
||||
// sequenceDiagram: { actorMargin: 300 } // deprecated
|
||||
// fontFamily: '"times", sans-serif',
|
||||
// fontFamily: 'courier',
|
||||
@@ -70,29 +72,31 @@
|
||||
curve: 'basis',
|
||||
securityLevel: 'antiscript',
|
||||
startOnLoad: false,
|
||||
secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']
|
||||
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'
|
||||
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 = "graph LR\n";
|
||||
diagram += "B-->D\(\"<img onerror=location=\`java";
|
||||
// diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
|
||||
diagram += "script\x3a;xssAttack\u0028\u0029\` src=x>\"\);\n";
|
||||
var diagram = 'graph LR\n';
|
||||
diagram += 'B-->D("<img onerror=location=`java';
|
||||
// diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
|
||||
diagram += 'script\x3a;xssAttack\u0028\u0029` src=x>");\n';
|
||||
|
||||
console.log(diagram);
|
||||
// document.querySelector('#diagram').innerHTML = diagram;
|
||||
mermaid.render('diagram', diagram, (res) => {
|
||||
console.log(res);
|
||||
document.querySelector('#res').innerHTML = res;
|
||||
});
|
||||
console.log(diagram);
|
||||
// document.querySelector('#diagram').innerHTML = diagram;
|
||||
mermaid.render('diagram', diagram, (res) => {
|
||||
console.log(res);
|
||||
document.querySelector('#res').innerHTML = res;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
@@ -46,8 +46,8 @@
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
mermaid.parseError = function (err, hash) {
|
||||
// console.error('Mermaid error: ', err);
|
||||
};
|
||||
// console.error('Mermaid error: ', err);
|
||||
};
|
||||
mermaid.initialize({
|
||||
theme: 'forest',
|
||||
arrowMarkerAbsolute: true,
|
||||
@@ -58,11 +58,13 @@
|
||||
},
|
||||
flowchart: {
|
||||
// defaultRenderer: 'dagre-wrapper',
|
||||
nodeSpacing: 10, curve: 'cardinal', htmlLabels: true
|
||||
nodeSpacing: 10,
|
||||
curve: 'cardinal',
|
||||
htmlLabels: true,
|
||||
},
|
||||
htmlLabels: true,
|
||||
// gantt: { axisFormat: '%m/%d/%Y' },
|
||||
sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: false },
|
||||
sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
|
||||
// sequenceDiagram: { actorMargin: 300 } // deprecated
|
||||
// fontFamily: '"times", sans-serif',
|
||||
// fontFamily: 'courier',
|
||||
@@ -70,27 +72,29 @@
|
||||
curve: 'basis',
|
||||
securityLevel: 'antiscript',
|
||||
startOnLoad: false,
|
||||
secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']
|
||||
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'
|
||||
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 = "graph LR\n";
|
||||
diagram += "A(<img/src/onerror=xssAttack`1`>)";
|
||||
// diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
|
||||
console.log(diagram);
|
||||
// document.querySelector('#diagram').innerHTML = diagram;
|
||||
mermaid.render('diagram', diagram, (res) => {
|
||||
console.log(res);
|
||||
document.querySelector('#res').innerHTML = res;
|
||||
});
|
||||
var diagram = 'graph LR\n';
|
||||
diagram += 'A(<img/src/onerror=xssAttack`1`>)';
|
||||
// diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
|
||||
console.log(diagram);
|
||||
// document.querySelector('#diagram').innerHTML = diagram;
|
||||
mermaid.render('diagram', diagram, (res) => {
|
||||
console.log(res);
|
||||
document.querySelector('#res').innerHTML = res;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
@@ -46,8 +46,8 @@
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
mermaid.parseError = function (err, hash) {
|
||||
// console.error('Mermaid error: ', err);
|
||||
};
|
||||
// console.error('Mermaid error: ', err);
|
||||
};
|
||||
mermaid.initialize({
|
||||
theme: 'forest',
|
||||
arrowMarkerAbsolute: true,
|
||||
@@ -58,11 +58,13 @@
|
||||
},
|
||||
flowchart: {
|
||||
// defaultRenderer: 'dagre-wrapper',
|
||||
nodeSpacing: 10, curve: 'cardinal', htmlLabels: true
|
||||
nodeSpacing: 10,
|
||||
curve: 'cardinal',
|
||||
htmlLabels: true,
|
||||
},
|
||||
htmlLabels: true,
|
||||
// gantt: { axisFormat: '%m/%d/%Y' },
|
||||
sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: false },
|
||||
sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
|
||||
// sequenceDiagram: { actorMargin: 300 } // deprecated
|
||||
// fontFamily: '"times", sans-serif',
|
||||
// fontFamily: 'courier',
|
||||
@@ -70,29 +72,31 @@
|
||||
curve: 'basis',
|
||||
securityLevel: 'antiscript',
|
||||
startOnLoad: false,
|
||||
secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']
|
||||
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'
|
||||
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 = "graph LR\n";
|
||||
diagram += " B(<a href='<";
|
||||
diagram += "script></";
|
||||
diagram += "script>Javascript:xssAttack`1`'>Click)";
|
||||
// diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
|
||||
console.log(diagram);
|
||||
// document.querySelector('#diagram').innerHTML = diagram;
|
||||
mermaid.render('diagram', diagram, (res) => {
|
||||
console.log(res);
|
||||
document.querySelector('#res').innerHTML = res;
|
||||
});
|
||||
var diagram = 'graph LR\n';
|
||||
diagram += " B(<a href='<";
|
||||
diagram += 'script></';
|
||||
diagram += "script>Javascript:xssAttack`1`'>Click)";
|
||||
// diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
|
||||
console.log(diagram);
|
||||
// document.querySelector('#diagram').innerHTML = diagram;
|
||||
mermaid.render('diagram', diagram, (res) => {
|
||||
console.log(res);
|
||||
document.querySelector('#res').innerHTML = res;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
@@ -46,8 +46,8 @@
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
mermaid.parseError = function (err, hash) {
|
||||
// console.error('Mermaid error: ', err);
|
||||
};
|
||||
// console.error('Mermaid error: ', err);
|
||||
};
|
||||
mermaid.initialize({
|
||||
theme: 'forest',
|
||||
arrowMarkerAbsolute: true,
|
||||
@@ -58,11 +58,13 @@
|
||||
},
|
||||
flowchart: {
|
||||
// defaultRenderer: 'dagre-wrapper',
|
||||
nodeSpacing: 10, curve: 'cardinal', htmlLabels: true
|
||||
nodeSpacing: 10,
|
||||
curve: 'cardinal',
|
||||
htmlLabels: true,
|
||||
},
|
||||
htmlLabels: true,
|
||||
// gantt: { axisFormat: '%m/%d/%Y' },
|
||||
sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: false },
|
||||
sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
|
||||
// sequenceDiagram: { actorMargin: 300 } // deprecated
|
||||
// fontFamily: '"times", sans-serif',
|
||||
// fontFamily: 'courier',
|
||||
@@ -70,29 +72,30 @@
|
||||
curve: 'basis',
|
||||
securityLevel: 'antiscript',
|
||||
startOnLoad: false,
|
||||
secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']
|
||||
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'
|
||||
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 = "stateDiagram-v2\n";
|
||||
diagram += "<img/src='1'/onerror=xssAttack()> --> B";
|
||||
// diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
|
||||
console.log(diagram);
|
||||
// document.querySelector('#diagram').innerHTML = diagram;
|
||||
mermaid.render('diagram', diagram, (res) => {
|
||||
console.log(res);
|
||||
document.querySelector('#res').innerHTML = res;
|
||||
});
|
||||
var diagram = 'stateDiagram-v2\n';
|
||||
diagram += "<img/src='1'/onerror=xssAttack()> --> B";
|
||||
// diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
|
||||
console.log(diagram);
|
||||
// document.querySelector('#diagram').innerHTML = diagram;
|
||||
mermaid.render('diagram', diagram, (res) => {
|
||||
console.log(res);
|
||||
document.querySelector('#res').innerHTML = res;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
@@ -46,8 +46,8 @@
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
mermaid.parseError = function (err, hash) {
|
||||
// console.error('Mermaid error: ', err);
|
||||
};
|
||||
// console.error('Mermaid error: ', err);
|
||||
};
|
||||
mermaid.initialize({
|
||||
theme: 'forest',
|
||||
arrowMarkerAbsolute: true,
|
||||
@@ -58,11 +58,13 @@
|
||||
},
|
||||
flowchart: {
|
||||
// defaultRenderer: 'dagre-wrapper',
|
||||
nodeSpacing: 10, curve: 'cardinal', htmlLabels: true
|
||||
nodeSpacing: 10,
|
||||
curve: 'cardinal',
|
||||
htmlLabels: true,
|
||||
},
|
||||
htmlLabels: true,
|
||||
// gantt: { axisFormat: '%m/%d/%Y' },
|
||||
sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: false },
|
||||
sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
|
||||
// sequenceDiagram: { actorMargin: 300 } // deprecated
|
||||
// fontFamily: '"times", sans-serif',
|
||||
// fontFamily: 'courier',
|
||||
@@ -70,29 +72,30 @@
|
||||
curve: 'basis',
|
||||
securityLevel: 'antiscript',
|
||||
startOnLoad: false,
|
||||
secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']
|
||||
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'
|
||||
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 = "stateDiagram-v2\n";
|
||||
diagram += "<img/src='1'/onerror=xssAttack()> --> B";
|
||||
// diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
|
||||
console.log(diagram);
|
||||
// document.querySelector('#diagram').innerHTML = diagram;
|
||||
mermaid.render('diagram', diagram, (res) => {
|
||||
console.log(res);
|
||||
document.querySelector('#res').innerHTML = res;
|
||||
});
|
||||
var diagram = 'stateDiagram-v2\n';
|
||||
diagram += "<img/src='1'/onerror=xssAttack()> --> B";
|
||||
// diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
|
||||
console.log(diagram);
|
||||
// document.querySelector('#diagram').innerHTML = diagram;
|
||||
mermaid.render('diagram', diagram, (res) => {
|
||||
console.log(res);
|
||||
document.querySelector('#res').innerHTML = res;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
Reference in New Issue
Block a user