3.6 KB121 lines
Blame
1<html>
2 <head>
3 <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
4 <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
5 <link
6 rel="stylesheet"
7 href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
8 />
9 <link
10 href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
11 rel="stylesheet"
12 />
13 <style>
14 body {
15 /* background: rgb(221, 208, 208); */
16 /* background:#333; */
17 font-family: 'Arial';
18 /* font-size: 18px !important; */
19 }
20 h1 {
21 color: grey;
22 }
23 .mermaid2 {
24 display: none;
25 }
26 .mermaid svg {
27 /* font-size: 18px !important; */
28 }
29 .malware {
30 position: fixed;
31 bottom: 0;
32 left: 0;
33 right: 0;
34 height: 150px;
35 background: red;
36 color: black;
37 display: flex;
38 display: flex;
39 justify-content: center;
40 align-items: center;
41 font-family: monospace;
42 font-size: 72px;
43 }
44 </style>
45 <script>
46 function xssAttack() {
47 const div = document.createElement('div');
48 div.id = 'the-malware';
49 div.className = 'malware';
50 div.innerHTML = 'XSS Succeeded';
51 document.getElementsByTagName('body')[0].appendChild(div);
52 throw new Error('XSS Succeeded');
53 }
54 </script>
55 </head>
56 <body>
57 <div>Security check</div>
58 <div class="flex">
59 <div id="diagram" class="mermaid"></div>
60 <div id="res" class=""></div>
61 </div>
62 <script type="module">
63 import mermaid from './mermaid.esm.mjs';
64 mermaid.parseError = function (err, hash) {
65 // console.error('Mermaid error: ', err);
66 };
67 mermaid.initialize({
68 theme: 'forest',
69 arrowMarkerAbsolute: true,
70 // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
71 logLevel: 0,
72 state: {
73 defaultRenderer: 'dagre-d3',
74 },
75 flowchart: {
76 // defaultRenderer: 'dagre-wrapper',
77 nodeSpacing: 10,
78 curve: 'cardinal',
79 htmlLabels: true,
80 },
81 htmlLabels: true,
82 // gantt: { axisFormat: '%m/%d/%Y' },
83 sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
84 // sequenceDiagram: { actorMargin: 300 } // deprecated
85 // fontFamily: '"times", sans-serif',
86 // fontFamily: 'courier',
87 fontSize: 18,
88 curve: 'basis',
89 securityLevel: 'antiscript',
90 startOnLoad: false,
91 secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'],
92 // themeVariables: {relationLabelColor: 'red'}
93 });
94 function callback() {
95 alert('It worked');
96 }
97 function xssAttack() {
98 const div = document.createElement('div');
99 div.id = 'the-malware';
100 div.className = 'malware';
101 div.innerHTML = 'XSS Succeeded';
102 document.getElementsByTagName('body')[0].appendChild(div);
103 throw new Error('XSS Succeeded');
104 }
105
106 let diagram = 'stateDiagram-v2\n';
107 diagram += 's2 : A<img/src';
108 diagram += "='1'/onerror=xssAttack()>";
109
110 // var diagram = "stateDiagram-v2\n";
111 // diagram += "<img/src='1'/onerror"
112 // diagram += "=xssAttack()> --> B";
113 console.log(diagram);
114 // document.querySelector('#diagram').innerHTML = diagram;
115 const { svg } = await mermaid.render('diagram', diagram);
116 console.log(res);
117 document.querySelector('#res').innerHTML = svg;
118 </script>
119 </body>
120</html>
121