misp-modules/website/app/templates/home.html

332 lines
13 KiB
HTML
Raw Normal View History

2024-02-07 14:39:19 +01:00
<!--
Author: David Cruciani
-->
{% extends 'base.html' %}
{% block content %}
<div>
<header>
</header>
<h1>MISP Modules</h1>
</div>
<hr>
<br>
2024-02-20 14:12:26 +01:00
<div class="row">
<div class="col-1">
<button style="position: fixed; top: 35%" class="btn btn-primary" @click="actionQuery()">Query</button>
2024-02-07 14:39:19 +01:00
</div>
2024-02-20 14:12:26 +01:00
<div class="col-11">
<div style="width:50%; transform: translate(50%, 0);">
<template v-for="elem in cp_entries">
<div style="margin-top: 10px;">
<input type="hidden" id="parent_id" value="{{sid}}">
<input type="text" v-if="queries" :value="queries[elem-1]" :id="'process-query-'+elem" placeholder="Enter here..." autofocus class="form-control" style="border-radius: 5px;" />
<input type="text" v-else :id="'process-query-'+elem" placeholder="Enter here..." autofocus class="form-control" style="border-radius: 5px;" />
</div>
</template>
<button @click="add_entry()" class="btn btn-secondary" style="margin-top: 10px;">Add new entry</button>
<button @click="delete_entry()" class="btn btn-danger" style="margin-top: 10px;">Delete entry</button>
<span v-if="status_site" style="color: brown;" id="status">[[status_site]]</span>
2024-02-20 14:12:26 +01:00
</div>
<br>
<!-- Attributes selection -->
<div v-if="misp_attributes_list.length" style="margin-top: 10px; transform: translate(25%, 0);">
<div>
<h4>Input Attributes</h4>
</div>
<div>
<select data-placeholder="Input" class="select2-input form-control" name="input_select" id="input_select">
<option value="None">--</option>
<template v-for="attributes in misp_attributes_list">
<option :value="attributes">[[attributes]]</option>
</template>
</select>
</div>
2024-02-07 14:39:19 +01:00
</div>
2024-02-20 14:12:26 +01:00
<!-- Results modules selection -->
<template v-if="modules_list.length">
<div v-if="attr_selected.length" style="margin-top: 10px; width: 50%; transform: translate(50%, 0);">
<h4>Modules</h4>
<select data-placeholder="Modules" class="select2-modules form-control" multiple name="modules_select" id="modules_select">
<template v-for="key in modules_list">
<option v-if="checked_attr(key.mispattributes.input)" :value="key.name" :title="key.meta.description">[[key.name]]</option>
2024-02-20 14:12:26 +01:00
</template>
</select>
</div>
</template>
<div title="Configure modules even if a configuration as already been given" style="margin-top: 10px; transform: translate(25%, 0);">
<input type="checkbox" id="own_config" name="own_config" @click="own_config()" style="margin-right: 5px;">
<label for="own_config">Configure all modules </label>
</div>
2024-02-20 14:12:26 +01:00
<!-- Display in case a module as request_on_query activate -->
<div v-if="config_query.length" style="margin-top: 10px; padding: 6px" class="row">
2024-02-20 14:12:26 +01:00
<h4>Config</h4>
<div class="card col-4" style="margin-top: 10px; padding: 15px" v-for="module in config_query">
<h4>[[module.name]]</h4>
<div v-for="conf in module.meta.config" class="mb-3">
<label :for="'form-'+conf+'-'+module.name" class="form-label">[[conf]]</label>
<input type="text" class="form-control" :id="'form-'+conf+'-'+module.name">
<span style="color: brown;" :id="'error-'+conf+'-'+module.name"></span>
</div>
</div>
</div>
<br/>
2024-02-07 14:39:19 +01:00
</div>
</div>
{% endblock %}
{% block script %}
<script type="module">
const { createApp, ref, onMounted, nextTick, defineComponent} = Vue
import {message_list} from '/static/js/toaster.js'
createApp({
delimiters: ['[[', ']]'],
setup() {
const modules_list = ref([])
2024-02-07 14:39:19 +01:00
const misp_attributes_list = ref({})
const attr_selected = ref([])
const progress = ref(0)
const current_query = ref([])
2024-02-07 14:39:19 +01:00
const status_site = ref()
const config_query = ref([])
const cp_entries = ref(1)
const queries = ref()
let own_config_bool = false
async function fetchQuery(){
const res = await fetch('/get_query')
let loc = await res.json()
if("message" in loc){
queries.value = false
}else{
queries.value = loc["query"]
cp_entries.value = queries.value.length
}
}
fetchQuery()
2024-02-07 14:39:19 +01:00
async function actionQuery(){
current_query.value = []
for(let i=1;i<=cp_entries.value;i++){
let loc_query_res = $("#process-query-"+i).val()
if(loc_query_res)
current_query.value.push(loc_query_res)
}
2024-02-07 14:39:19 +01:00
if (!current_query.value) {
status_site.value = '↖ You need to type something'
window.scrollTo(0, 0);
2024-02-07 14:39:19 +01:00
return
}else{
status_site.value = ""
}
2024-02-09 09:19:35 +01:00
progress.value = 0
let error_flag = false
2024-02-07 14:39:19 +01:00
let loc = undefined
if($("#input_select").val() != "None"){
loc = $("#input_select").val()
}
let loc_modules = undefined
2024-02-23 14:47:25 +01:00
if($("#modules_select").val().length){
loc_modules = $("#modules_select").val()
}
let result_dict = {"modules": loc_modules,
"input": loc,
"query": current_query.value,
"parent_id": $("#parent_id").val()
2024-02-09 09:19:35 +01:00
}
result_dict["config"] = {}
for(let el in config_query.value){
result_dict["config"][config_query.value[el].name] = {}
for(let conf in config_query.value[el].meta.config){
$("#error-"+config_query.value[el].meta.config[conf]+"-"+config_query.value[el].name).text("")
let loc = $("#form-"+config_query.value[el].meta.config[conf]+"-"+config_query.value[el].name).val()
if(!loc){
error_flag = true
$("#error-"+config_query.value[el].meta.config[conf]+"-"+config_query.value[el].name).text("Please enter value")
}else{
result_dict["config"][config_query.value[el].name][config_query.value[el].meta.config[conf]] = loc
2024-02-07 14:39:19 +01:00
}
}
2024-02-09 09:19:35 +01:00
}
if(!error_flag){
const res = await fetch('/run_modules',{
headers: { "X-CSRFToken": $("#csrf_token").val(), "Content-Type": "application/json" },
method: "POST",
body: JSON.stringify(result_dict)
})
if(await res.status == 201){
let loc = await res.json()
await nextTick()
window.location.href="/query/" + loc['id']
}else{
let loc = await res.json()
status_site.value = loc['message'] || 'Something went wrong'
if(status_site.value.includes("]")){
status_site.value = status_site.value.split("]")[1]
2024-02-07 14:39:19 +01:00
}
}
}
}
async function query_modules(){
let res = await fetch("/get_modules")
2024-02-07 14:39:19 +01:00
let loc = await res.json()
modules_list.value = loc
await query_misp_attributes()
}
query_modules()
2024-02-07 14:39:19 +01:00
async function query_misp_attributes(){
let res = await fetch("/get_list_misp_attributes")
2024-02-07 14:39:19 +01:00
let loc = await res.json()
misp_attributes_list.value = loc
await nextTick()
if (!$('.select2-input').hasClass("select2-hidden-accessible")) {
$('.select2-input').select2({
theme: 'bootstrap-5',
width: '50%'
2024-02-07 14:39:19 +01:00
})
}
$('#input_select').on('change.select2', async function (e) {
attr_selected.value = $(this).select2('data').map(item => item.id)[0]
if(attr_selected.value == 'None' ){
attr_selected.value = []
}
await nextTick()
if (!$('.select2-modules').hasClass("select2-hidden-accessible")) {
$('.select2-modules').select2({
theme: 'bootstrap-5',
closeOnSelect: false
2024-02-07 14:39:19 +01:00
})
$('#modules_select').on('change.select2', async function (e) {
2024-02-07 14:39:19 +01:00
let loc_list = $(this).select2('data').map(item => item.id)
config_query.value = []
for(let el in loc_list){
for(let index in modules_list.value){
if(modules_list.value[index].name == loc_list[el]){
if (own_config_bool){
config_query.value.push(modules_list.value[index])
}
else if(modules_list.value[index].request_on_query){
config_query.value.push(modules_list.value[index])
2024-02-07 14:39:19 +01:00
}
break
}
}
}
})
}
2024-02-07 14:39:19 +01:00
})
$('#input_select').on('select2:open', function (e) {
document.querySelector('.select2-search__field').focus();
})
}
function pairedList() {
let pairs = [];
for (let i = 0; i < this.items.length; i += 2) {
pairs.push(this.items.slice(i, i + 2));
}
return pairs;
}
function checked_attr(arr1){
let loc = arr1.includes(attr_selected.value)
if(!loc && attr_selected.value == 'ip'){
loc = arr1.includes('ip-dst')
if(!loc && attr_selected.value == 'ip'){
loc = arr1.includes('ip-src')
}
}
return loc
2024-02-07 14:39:19 +01:00
}
function add_entry(){
cp_entries.value += 1
}
function delete_entry(){
cp_entries.value -= 1
}
function own_config(){
own_config_bool = !own_config_bool
if(own_config_bool){
let loc_list = $('#modules_select').val()
config_query.value = []
for(let el in loc_list){
for(let index in modules_list.value){
if(modules_list.value[index].name == loc_list[el]){
config_query.value.push(modules_list.value[index])
break
}
}
}
}else{
let loc_list = $('#modules_select').val()
config_query.value = []
for(let el in loc_list){
for(let index in modules_list.value){
if(modules_list.value[index].name == loc_list[el]){
if(modules_list.value[index].request_on_query){
config_query.value.push(modules_list.value[index])
}
break
}
}
}
}
}
2024-02-07 14:39:19 +01:00
return {
message_list,
progress,
modules_list,
misp_attributes_list,
attr_selected,
status_site,
config_query,
cp_entries,
queries,
2024-02-07 14:39:19 +01:00
actionQuery,
pairedList,
checked_attr,
add_entry,
delete_entry,
generateCoreFormatUI,
own_config
2024-02-07 14:39:19 +01:00
}
}
2024-02-19 14:01:06 +01:00
}).mount('.container-fluid')
2024-02-07 14:39:19 +01:00
</script>
{% endblock %}