\n ${obj.flow ? renderFlowFlag(obj.flow) : \"\"}\n
\n \n ${obj.http_request ? \"HTTP\" : \"DNS\"}\n
\n \n ${obj.http_request ? obj.http_request.url : \"\"}\n ${obj && obj.dns_request && obj.dns_request.domains[0] ? obj.dns_request.domains[0] : \"\"}\n
\n ${flow_id ? renderProcess(flow_id) : \"\"}\n ${renderContextMenu(flow_id, \"request\")}\n \n
\n \n ${obj.flow ? renderFlowData(obj.flow) : \"\"}\n
\n \n
\n `.toString()\n );\n\n if (obj.http_request) {\n holder.querySelector(\".network-requests__header__type\").innerHTML = Hatch`${obj.http_request.method}`.toString();\n holder.querySelector(\".network-requests__header__location-domain\").innerHTML =\n Hatch`${obj.http_request.url}`.toString();\n }\n\n content.appendChild(contentTemplate);\n}\nfunction renderFlowRequests(data: TaskReport) {\n if (!document.querySelector(\"#network\")) return;\n\n let renderList = function (list: Array\n ${isReq ? \"Request\" : \"Response\"}\n
\n ${obj.http_request ? renderObject(obj.http_request) : \"\"}\n ${obj.http_response ? renderObject(obj.http_response) : \"\"}\n ${obj.dns_response && obj.dns_response.answers ? renderBlock(obj.dns_response.answers) : \"\"}\n ${obj.dns_request && obj.dns_request.questions ? renderBlock(obj.dns_request.questions) : \"\"}\n ${\n !(obj.dns_response && obj.dns_response.answers) && obj.dns_response && obj.dns_response.ip\n ? renderBlock(obj.dns_response.ip)\n : \"\"\n }\n ${\n !(obj.dns_request && obj.dns_request.questions) && obj.dns_request && obj.dns_request.domains\n ? renderBlock(obj.dns_request.domains)\n : \"\"\n }\n ${\n !(obj.dns_response && obj.dns_response.answers) && obj.dns_response && obj.dns_response.domains\n ? renderBlock(obj.dns_response.domains)\n : \"\"\n }\n \n
${header}
\n\n ${HatchMap(list, (li: string) => {\n return Hatch`\n
\n ${li}
\n `;\n })}\n `;\n };\n\n function renderHttpRequest(re: NetworkWebRequest) {\n if (!re) {\n return \"\";\n }\n return Hatch`\n
\n
`;\n }\n\n function renderHttpResponse(re: NetworkWebResponse) {\n if (!re) {\n return \"\";\n }\n return Hatch`\n HTTP Request
\n${re.method ? re.method : \"\"} ${re.url ? re.url : \"\"}
\n \n \n
`;\n }\n\n function renderDnsRequest(re: NetworkDomainRequest) {\n if (!re) {\n return \"\";\n }\n return renderList(re.domains, `DNS Request`);\n }\n\n function renderDnsResponse(re: NetworkDomainResponse) {\n if (!re) {\n return \"\";\n }\n return renderList(re.ip, `DNS Response`);\n }\n\n if (data.network && data.network.flows && data.network.flows.length) {\n let flowList = {};\n let flowMetas = {};\n if (data.network.requests) {\n data.network.requests.forEach((req) => {\n if (!flowList[req.flow]) {\n flowList[req.flow] = \"\";\n }\n flowList[req.flow] += renderHttpRequest(req.http_request);\n flowList[req.flow] += renderHttpResponse(req.http_response);\n flowList[req.flow] += renderDnsRequest(req.dns_request);\n flowList[req.flow] += renderDnsResponse(req.dns_response);\n\n if (!flowMetas[req.flow]) {\n flowMetas[req.flow] = {};\n }\n if (req.http_request) {\n flowMetas[req.flow].http_method = req.http_request.method;\n flowMetas[req.flow].url = req.http_request.url;\n }\n if (req.http_response) {\n flowMetas[req.flow].http_status = req.http_response.status;\n }\n if (req.dns_request && req.dns_request) {\n flowMetas[req.flow].dns_domains = req.dns_request.domains;\n }\n });\n }\n // TODO: artificially limited because some reports have >15k flows,\n // which freezes the browser!\n data.network.flows.slice(0, 500).forEach((flow) => {\n let maxNetworkTimePercent = data.analysis.max_time_network;\n let startPercentage = (flow.first_seen / maxNetworkTimePercent) * 100;\n let endPercentage = (flow.last_seen / maxNetworkTimePercent) * 100;\n let flowMeta = flowMetas[flow.id] || {};\n\n let pName =\n globalThis.reportHelpers.getProcessLabel(flow.procid).pid !== \"?\"\n ? globalThis.reportHelpers.getProcessLabel(flow.procid).name\n : \"\";\n\n if (flowMeta.url) {\n flowMeta.domain = flowMeta.url;\n } else if (flow.tls_sni) {\n flowMeta.domain = flow.tls_sni;\n } else if (flow.domain) {\n flowMeta.domain = flow.domain;\n } else if (flowMeta.dns_domains) {\n flowMeta.domain = flowMeta.dns_domains;\n }\n\n let escapedString = Domifier(\n Hatch`\n HTTP Response
\n${re.status ? re.status : \"\"}
\n \n ![](\"/static/flags/4x3/${flow.cc\n)
\n
\n \n ${flow.dst}\n
\n\n \n ${flowMeta.domain || \"\"}\n
\n\n \n ${flow.protocols ? flow.protocols.join(\", \") : \"\"}\n
\n\n ${\n pName\n ? Hatch``\n : Hatch``\n }\n ${renderContextMenu(flow.id, \"flow\")}\n \n ${\n startPercentage && endPercentage\n ? Hatch`
\n \n \n
\n `\n : \"\"\n }\n\n \n ${\n flow.tx_bytes\n ? Hatch`\n \n ${Utils.humanByteSize(flow.tx_bytes, 1).string}\n \n `\n : \"\"\n }\n ${\n flow.rx_bytes\n ? Hatch`\n \n ${Utils.humanByteSize(flow.rx_bytes, 1).string}\n \n `\n : \"\"\n }\n ${\n flow.tx_packets\n ? Hatch`\n \n ${flow.tx_packets} \n \n `\n : \"\"\n }\n ${\n flow.rx_packets\n ? Hatch`\n \n ${flow.rx_packets} \n \n `\n : \"\"\n }\n
\n ${\n flowList[flow.id]\n ? Hatch`\n \n ${new SafeString(flowList[flow.id] || \"\")}\n
`\n : \"\"\n }\n\n \n
\n `;\n\n document.querySelector(\"#network\").querySelector(\".tab-view__bar\").appendChild(Domifier(tabButton.toString()));\n document.querySelector(\"#network\").querySelector(\".tab-view__view\").appendChild(Domifier(tabView.toString()));\n }\n\n document\n .querySelector(\"#network\")\n .querySelector(\"#\" + flow.proto)\n .appendChild(escapedString);\n });\n }\n\n document.querySelectorAll(\"#network .tab-view__view__tab\").forEach((i) => {\n if (!i.querySelector(\"li\") && i.getAttribute(\"id\") !== \"requests\") {\n i.innerHTML = ` No results found`;\n }\n });\n\n document.querySelectorAll(\"#network [data-clipboard]\").forEach((item) => {\n item.addEventListener(\"click\", () => {\n Utils.copyToClipboard(item);\n });\n });\n\n document.querySelectorAll(\"#network [data-tooltip]\").forEach((tooltip) => {\n new Tooltip({\n text: tooltip.getAttribute(\"data-tooltip\"),\n target: tooltip,\n });\n });\n\n globalThis.networkTabs = new TabView({\n el: document.querySelector(\"#network\"),\n });\n}\nfunction renderSimple(flow: any, request: any, response: any) {\n let line = Domifier(\n Hatch`\n - \n\n
\n ![](\"/static/flags/4x3/${flow.cc.toLowerCase()}.svg\")
\n
\n \n \n ${(request && request.http_request) || (response && response.http_response) ? \"HTTP\" : \"DNS\"}\n
\n \n ${request && request.http_request ? request.http_request.url : \"\"}\n ${request && request.dns_request && request.dns_request.domains[0] ? request.dns_request.domains[0] : \"\"}\n
\n ${flow ? renderProcess(flow) : \"\"}\n \n
\n \n ${\n (request && request.flow) || (response && response.flow)\n ? renderFlowData(request && request.flow ? request.flow : response.flow)\n : \"\"\n }\n
\n ${\n request\n ? Hatch`\n \n
\n `\n : \"\"\n }\n ${\n response\n ? Hatch`\n \n Request\n
\n ${request.http_request ? renderObject(request.http_request) : \"\"}\n ${\n request.dns_request && request.dns_request.questions\n ? renderBlock(request.dns_request.questions)\n : request.dns_request\n ? renderBlock(request.dns_request.domains)\n : \"\"\n }\n \n
\n `\n : \"\"\n }\n \n Response\n
\n ${response.http_response ? renderObject(response.http_response) : \"\"}\n ${\n response.dns_response && response.dns_response.answers\n ? renderBlock(response.dns_response.answers)\n : \"\"\n }\n ${\n !(response.dns_response && response.dns_response.answers) &&\n response.dns_response &&\n response.dns_response.domains\n ? renderBlock(response.dns_response.domains)\n : \"\"\n }\n ${\n !(response.dns_response && response.dns_response.answers) &&\n response.dns_response &&\n response.dns_response.ip\n ? renderBlock(response.dns_response.ip)\n : \"\"\n }\n ![\"flag-${flowData.cc.toLowerCase()}\"](\"/static/flags/4x3/${flowData.cc.toLowerCase()}.svg\")
`;\n}\nfunction renderFlowData(flow_id: number) {\n let flowData = globalThis.reportHelpers.getFlow(flow_id);\n if (!flowData) return \"\";\n return Hatch`\n \n Remote address:\n
\n \n ${flowData.dst}\n
\n `;\n}\nfunction renderProcess(flow_id: number) {\n let flowData = globalThis.reportHelpers.getFlow(flow_id);\n if (!flowData) return \"\";\n let procLabel = globalThis.reportHelpers.getProcessLabel(flowData.procid);\n if (procLabel.pid === \"?\") return \"\";\n return Hatch``;\n}\nfunction renderObject(obj: any) {\n return Hatch`\n \n ${obj.request || obj.response ? Hatch`${obj.request ? obj.request : obj.response}` : \"\"}\n ${!obj.request ? Hatch`
\n `;\n}\nfunction renderArrayRow(obj: DNSEntry) {\n return HatchMap(\n Object.entries(obj),\n (entry: Array${obj.method ? obj.method : \"\"} ${obj.url ? obj.url : \"\"}
` : \"\"}\n ${!obj.response && obj.status ? Hatch`${obj.status}
` : \"\"}\n ${obj.headers ? HatchMap(obj.headers, (item: string) => Hatch`${item}`) : \"\"}\n \n
\n `;\n } else {\n return Hatch`\n \n ${HatchMap(\n block,\n (item: any) => Hatch`\n ${\n typeof item === \"object\"\n ? Hatch`
\n ${renderArrayRow(\n item\n )}
`\n : Hatch`${item}
`\n }\n `\n )}\n \n
\n `;\n }\n}\nasync function renderMap(data: any) {\n let map = document.querySelector(\".network-map\");\n if (!data || !Object.entries(data).length) {\n map.remove();\n return;\n }\n let max =\n data[\n Object.keys(data).reduce(function (a, b) {\n return data[a] > data[b] ? a : b;\n })\n ];\n const ccs = await Utils.ccToLabel();\n Object.entries(data).forEach((item) => {\n let paths: any = [map.querySelector(`#${item[0]}`)];\n let label = ccs.find((e) => e.code === item[0])?.name;\n if (!paths[0]) {\n paths = map.querySelectorAll(`.${label.replaceAll(\" \", \".\")}`);\n }\n let per = Math.floor((100 / max) * parseInt(item[1] as string));\n if (per === 100) per = 99;\n\n paths.forEach((path: HTMLElement) => {\n path.style.fill = globalThis.window.darkmode ? \"#FFFFFF\" + per : \"#2673B3\" + per;\n path.style.stroke = \"#2673B3\";\n path.style.strokeWidth = \"1px\";\n\n new Tooltip({\n target: path,\n text: Hatch`${label}: ${item[1]}`,\n position: \"bottom\",\n });\n });\n });\n}\nfunction isRequest(req: any) {\n if (req.dns_request) return true;\n if (req.http_request) return true;\n if (req.ftp_request) return true;\n if (req.smtp_request) return true;\n\n return false;\n}\nlet renderContextMenu = (flowId: number, type: string) => {\n return Hatch`\n \n ${Hatch`
\n ${block}
`}\n