Files
2024-09-05 11:12:44 +02:00

282 lines
12 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hunting Keywords</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@latest/dist/handsontable.full.min.css">
<script src="https://cdn.jsdelivr.net/npm/handsontable@latest/dist/handsontable.full.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/papaparse@latest"></script>
<style>
/* GitHub logo style */
.github-logo {
position: absolute;
top: 10px;
right: 10px;
width: 32px;
height: 32px;
background-color: white; /* Add background color */
border-radius: 50%; /* Make it circular */
padding: 4px; /* Add padding to create a border effect */
}
.handsontable .htCore .ht_master .wtHolder {
overflow-y: hidden !important;
}
.handsontable td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
height: 23px !important;
line-height: 23px !important;
border-color: #2f4f4f !important; /* Darker color for cell borders */
}
.handsontable th {
border-color: #2f4f4f !important; /* Darker color for header cell borders */
}
/* Dark theme overrides for Handsontable */
html, body {
height: 100%; /* Full height */
margin: 0;
padding: 0;
background-color: #0d1b2a; /* Dark background for the page */
}
/* Ensure the container also has a dark background and full height */
#example {
background-color: #0d1b2a; /* Dark background for the container */
height: 100%; /* Full height */
}
.handsontable, .wtHolder {
color: #53A757; /* Green text */
background-color: #201F1F !important; /* Dark background for the table */
}
/* Specific overrides for table cells */
.handsontable .htCore td, .handsontable .htCore th {
background-color: #04151f !important; /* Dark background for cells */
color: #a7c957 !important; /* Green text */
}
/* Header cells */
.handsontable .htCore th {
background-color: #1b263b !important; /* Slightly lighter background for header cells */
color: #a7c957;
}
/* Override for current row & column highlight */
.ht__highlight {
background-color: #0d1b2a !important; /* Darker background for highlight */
}
/* Adjusting selection colors to fit the dark theme */
.ht_master .htBorders .current {
border-color: #4f772d !important; /* Green border for current selection */
}
.ht_master .htBorders .area {
border-color: #90a955 !important; /* Green border for selected area */
}
/* Customizing scrollbar for dark theme */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: #003049;
}
::-webkit-scrollbar-thumb {
background: #555;
}
::-webkit-scrollbar-thumb:hover {
background: #444;
}
.ascii-art-container {
white-space: nowrap; /* Prevents the content from wrapping */
text-align: center; /* Center the content horizontally */
width: 100%; /* Ensure the container spans the full width */
max-width: 100%; /* Ensures the container does not exceed the viewport width */
overflow: auto; /* In case the ASCII art is wider than the screen */
overflow-x: auto; /* Enables horizontal scrolling */
}
pre {
display: inline-block; /* Allows the <pre> block to be centered by text-align */
white-space: pre-wrap; /* Ensures that the ASCII art does not overflow the container */
word-wrap: break-word; /* Breaks the text to prevent overflow */
}
.ascii-art-container pre {
white-space: pre; /* Maintains spacing and formatting of the ASCII art */
overflow-x: auto; /* Allows horizontal scrolling if needed */
color: #32CD32; /* Light green color */
display: inline-block; /* Treats the pre element as a block while keeping it inline */
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Responsive design adjustments */
@media (max-width: 768px) {
.github-logo {
width: 24px;
height: 24px;
}
.handsontable td {
font-size: 12px;
height: 20px !important;
line-height: 20px !important;
}
.handsontable th {
font-size: 12px;
}
#example {
overflow-x: auto;
}
}
</style>
</head>
<body>
<a href="https://github.com/mthcht/ThreatHunting-Keywords" target="_blank">
<img src="https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg" alt="GitHub" class="github-logo">
</a>
<div class="ascii-art-container">
<pre>
▐▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▌
▐░▀█▀░█░█░█▀▄░█▀▀░█▀█░▀█▀░░░█░█░█░█░█▀█░▀█▀░▀█▀░█▀█░█▀▀░░░█░█░█▀▀░█░█░█░█░█▀█░█▀▄░█▀▄░█▀▀ ▌
▐░░█░░█▀█░█▀▄░█▀▀░█▀█░░█░░░░█▀█░█░█░█░█░░█░░░█░░█░█░█░█░░░█▀▄░█▀▀░░█░░█▄█░█░█░█▀▄░█░█░▀▀█ ▌
▐░░▀░░▀░▀░▀░▀░▀▀▀░▀░▀░░▀░░░░▀░▀░▀▀▀░▀░▀░░▀░░▀▀▀░▀░▀░▀▀▀░░░▀░▀░▀▀▀░░▀░░▀░▀░▀▀▀░▀░▀░▀▀░░▀▀▀ ▌
▐▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▌
</pre>
</div>
<div id="loadingIndicator" style="display:none; text-align:center; color: #0D5C2D;">
<div class="spinner" style="display:inline-block; margin-left:10px; border: 4px solid rgba(50,205,50,.3); border-radius: 50%; border-top-color: #fff; width: 24px; height: 24px; animation: spin 1s ease-in-out infinite;"></div>
</div>
<div id="example"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
loadCSV('threathunting-keywords.csv');
});
function loadCSV(filePath) {
// Show loading indicator
document.getElementById('loadingIndicator').style.display = 'block';
fetch(filePath)
.then(response => response.text())
.then(csvText => {
Papa.parse(csvText, {
header: true,
dynamicTyping: true,
skipEmptyLines: true,
complete: function(results) {
var data = results.data;
if (data.length === 0 || (data.length === 1 && !data[0])) {
return;
}
// Original column headers from the data
var originalColHeaders = Object.keys(data[0]);
// Adjusted column headers for display
var colHeaders = originalColHeaders.map(header =>
header.startsWith('metadata_') ? header.substring(9) : header
);
// Map original data fields to adjusted column headers for Handsontable
var columns = originalColHeaders.map(header => ({
data: header,
type: 'text',
title: header.startsWith('metadata_') ? header.substring(9) : header
}));
createHandsontable(data, colHeaders, columns);
// Hide loading indicator once loading is complete
document.getElementById('loadingIndicator').style.display = 'none';
}
});
})
.catch(error => {
console.error('Error loading the CSV file:', error);
// Hide loading indicator in case of error
document.getElementById('loadingIndicator').style.display = 'none';
});
}
function createHandsontable(data, colHeaders, columns) {
var container = document.getElementById('example');
if (window.hot) {
window.hot.destroy(); // Destroy existing Handsontable instance if exists
}
window.hot = new Handsontable(container, {
data: data,
colHeaders: colHeaders,
rowHeaders: true,
columns: columns.map(column => {
// Check if the column is the one that needs custom width
if (column.data === 'keyword') {
return { ...column, width: 200 }; // Custom width for this specific column
}
if (column.data === 'metadata_keyword_regex') {
return { ...column, width: 110 }; // Custom width for this specific column
}
if (column.data === 'metadata_keyword_type') {
return { ...column, width: 150 }; // Custom width for this specific column
}
if (column.data === 'metadata_description') {
return { ...column, width: 200 }; // Custom width for this specific column
}
if (column.data === 'metadata_malwares_name') {
return { ...column, width: 50 }; // Custom width for this specific column
}
if (column.data === 'metadata_tool_techniques') {
return { ...column, width: 120 }; // Custom width for this specific column
}
if (column.data === 'metadata_tool_tactics') {
return { ...column, width: 120 }; // Custom width for this specific column
}
if (column.data === 'metadata_groups_name') {
return { ...column, width: 50 }; // Custom width for this specific column
}
if (column.data === 'metadata_category') {
return { ...column, width: 150 }; // Custom width for this specific column
}
if (column.data === 'metadata_link') {
return { ...column, width: 150 }; // Custom width for this specific column
}
if (column.data === 'metadata_tool') {
return { ...column, width: 170 }; // Custom width for this specific column
}
if (column.data === 'metadata_comment') {
return { ...column, width: 100 }; // Custom width for this specific column
}
if (column.data === 'metadata_severity_score') {
return { ...column, width: 130 }; // Custom width for this specific column
}
if (column.data === 'metadata_popularity_score') {
return { ...column, width: 130 }; // Custom width for this specific column
}
return column; // Return other columns as is
}),
licenseKey: 'non-commercial-and-evaluation', // Specify the license key here
colWidths: 100, // Set fixed width for all columns
rowHeights: 23, // Set initial height for all rows
manualColumnResize: true, // Allow manual resizing of columns
manualRowResize: true, // Allow manual resizing of rows
filters: true,
dropdownMenu: true,
// enable sorting for all columns
columnSorting: true
});
}
</script>
</body>
</html>