feat: add color gradient to ttp-visualize

[fukusuket]

What Changed

• feat: Add color gradient to ttp-visualize #90

Color gradient

I use the following four red colors.

The color-coding logic is simply divided into four categories based on score( = number of detections).

  if score == 1:
    result.color = "#fca2a2"
  elif score == 2 :
    result.color = "#fc6b6b"
  elif score == 3 :
    result.color = "#fc3b3b"
  else:
    result.color = "#e60d0d"

hayabusa-sample-evtx

baseline evtx v8

apt29 day2

[fukusuket]

@YamatoSecurity
I created a prototype of color-coding logic, what do you think?
I think the number of detections varies depending on the environment, so it would be nice if it could be adjusted to common use cases...🤔

[YamatoSecurity]

Thanks for this!
I don't want to use static colors because the score value will change case by case. I was thinking about first counting how many times each technique was used. Then set the maxValue under gradient to whatever technique was used the most. This also makes it easy to see how many times a technique was used because an analyst can just check the score value.

Instead of manually assigning colors, we can do something like this:

{
  "name": "Hayabusa detection result heatmap",
  "versions": {
    "attack": "14",
    "navigator": "4.9.1",
    "layer": "4.5"
  },
  "domain": "enterprise-attack",
  "description": "Hayabusa detection result heatmap",
  "techniques": [
		{
			"techniqueID": "T1562",
			"tactic": "defense-evasion",
			"score": 1,
			"comment": "Windows Firewall Settings Have Been Changed",
			"enabled": true,
			"metadata": [],
			"links": [],
			"showSubtechniques": false
		},
		{
			"techniqueID": "T1070",
			"tactic": "defense-evasion",
			"score": 25,
			"comment": "hogehoge",
			"enabled": true,
			"metadata": [],
			"links": [],
		},
		{
			"techniqueID": "T1187",
			"tactic": "defense-evasion",
			"score": 50,
			"comment": "hogehoge",
			"enabled": true,
			"metadata": [],
			"links": [],
		},
    {
			"techniqueID": "T1134",
			"tactic": "defense-evasion",
			"score": 75,
			"comment": "hogehoge",
			"enabled": true,
			"metadata": [],
			"links": [],
		},
		{
			"techniqueID": "T1610",
			"tactic": "defense-evasion",
			"score": 100,
			"comment": "XSL Script Execution Via WMIC.EXE",
			"enabled": true,
			"metadata": [],
			"links": [],
		}
  ],
  "gradient": {
      "colors": [
        "#8ec843ff",
        "#ffe766ff",
        "#ff6666ff"
      ],
    "minValue": 0,
    "maxValue": 100
    },
    "legendItems": [],
    "metadata": [],
    "links": [],
    "showTacticRowBackground": false,
    "tacticRowBackground": "#dddddd",
    "selectTechniquesAcrossTactics": true,
    "selectSubtechniquesWithParent": false,
    "selectVisibleTechniques": false
}

In this example, T1610 was used exactly 100 times so that is why maxValue was set to 100.

We specify the low, medium and high colors in gradient.
The lowest is green, middle is yellow and highest is red.
I was thinking on doing a light red to dark red gradient but when I tested it, it was very hard to determine which colors are lighter/darker so I think a 3 color scheme would be easier to see.

[fukusuket]

@YamatoSecurity
Thank you so much for detailed comment :) I updated #91 (comment) 's logic!

What do you think? If there is anything that should be changed, please let me know!

[YamatoSecurity]

@fukusuket Looks great! Thanks so much!