cxvscode/attackVectorWebView.html at master · checkmarx-ltd/cxvscode · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="Content-Security-Policy" content="default-src 'unsafe-inline'; object-src 'none'">
	<title>Attack Vector</title>
	<style>

		/* Checkmarx Theme color accents, rest is compatible with the VS Code Theme CSS */
		:root {
			--cx-bg-color: #007acc;
			--cx-fg-color: #eee;
		}

		body 				{ text-align: center; align-content: center; padding: 8px; line-height: 0.8em; user-select: none }
		div					{ display: inline-block; padding: 7px }
		.node				{ border: 1px solid #aaa; border-radius: 5px; cursor: pointer; color: #111; font-weight: 550 }
		.node:hover			{ transform: scale(1.125) }
		div.node.selected 	{ color: var(--cx-fg-color); background-color: var(--cx-bg-color) !important; box-shadow: 0 0 2px 0px #ccc; filter: contrast(150%) }
	</style>
</head>

<body>
	<div id="nodes"></div>
</body>
<script>

const vscode 	= acquireVsCodeApi();
const container = qs("#nodes");
var message 	= "";

function qs(s) { return document.querySelector(s) }

function nodeClick(i) {
	var old = qs(".selected");
	if (old) old.classList.remove("selected");
	qs("#node_" + i).classList.add("selected");
	vscode.postMessage({ msg: message.PathNode[i] }); 	// Sync Editor Panel to Path-location
}

// We use this very basic shift-hash as 'distance' metric between string-values and then derive a RGB color from it.
function toHash(text) {

    let hash = 0;
    if (text.length == 0) return hash;

    for (var i = 0; i < text.length; i++) {
        hash = ((hash << 5) - hash) + text.charCodeAt(i);
        hash = hash & hash;
    }
    return hash;
}

// Provides a RGB value between 127-255 derived from the hash value
function hash2ColorWheel(hash) { return "rgb(" + (128 + ((hash>>16) & 127)) + ", " + (128 + ((hash>>8) & 127)) + ", " + (128 + ((hash>>0) & 127)) + ")" }

// Get messages
window.addEventListener('message', event => {
	message = event.data[0];
	container.innerHTML = "";

	var html     = "";
	var count    = message.PathNode.length;
	var previous = 0;
	var color, hash;

	for (var i=0; i < count; i++) {
		var path = message.PathNode[i];
		hash = toHash(String(path.FileName)) + toHash(String(path.Line)) + toHash(String(path.Name));
		if (hash != previous) color = hash2ColorWheel(hash)  // Change node-color when 'node name' changes
		previous = hash;

		html += "<div id='node_" + i + "' class='node' style='background-color: " + color + "' onclick='nodeClick(" + i + ")' title='" + path.FileName + ", line: " + path.Line + "'>" + path.Name + "</div></br>";
		if (i !== count -1) html += "<div>↓</div><br>";
	}
	container.innerHTML = html;
	nodeClick(0);
});
</script>

</html>