risk table overview, fixing charts to start at 0

parent 2bfb2589
......@@ -101,6 +101,151 @@ const report_mixin = {
})
},
methods: {
total_summary_row: function(url){
let ftp = this.worstof("ftp", url.endpoints);
let dnssec = this.worstof("DNSSEC", [url]);
let xxss = this.worstof("security_headers_x_xss_protection", url.endpoints);
let xcto = this.worstof("security_headers_x_content_type_options", url.endpoints);
let xfo = this.worstof("security_headers_x_frame_options", url.endpoints);
let https = this.worstof("tls_qualys", url.endpoints);
let hsts = this.worstof("security_headers_strict_transport_security", url.endpoints);
let plain_https = this.worstof("plain_https", url.endpoints);
text = `<td><b>${url.url}</b></td>`;
let findings =
`<td class='text-center' style='background-color: ${dnssec.bgcolor}'>${dnssec.text}</td>` +
`<td class='text-center' style='background-color: ${https.bgcolor}'>${https.text}</td>` +
`<td class='text-center' style='background-color: ${plain_https.bgcolor}'>${plain_https.text}</td>` +
`<td class='text-center' style='background-color: ${hsts.bgcolor}'>${hsts.text}</td>` +
`<td class='text-center' style='background-color: ${xfo.bgcolor}'>${xfo.text}</td>` +
`<td class='text-center' style='background-color: ${xcto.bgcolor}'>${xcto.text}</td>` +
`<td class='text-center' style='background-color: ${xxss.bgcolor}'>${xxss.text}</td>` +
`<td class='text-center' style='background-color: ${ftp.bgcolor}'>${ftp.text}</td>`;
return text + findings;
},
worstof: function(risk, endpoints){
let high = 0, medium = 0, low = 0;
let risk_found = false;
let explained = false;
for(let i=0; i<endpoints.length; i++) {
let endpoint = endpoints[i];
for (let i = 0; i < endpoint.ratings.length; i++) {
let rating = endpoint.ratings[i];
if (rating.type === risk) {
risk_found = true;
high += rating.high;
medium += rating.medium;
low += rating.low;
if (rating.comply_or_explain_valid_at_time_of_report)
explained = true;
}
}
}
let text = "";
let bgcolor = ""; // green, todo: use classes
if (high){
text = "";
bgcolor = "rgba(251, 173, 173, 0.3)";
} else if (medium){
text = "";
bgcolor = "rgba(249, 209, 139, 0.3)";
} else if (low){
text = "";
bgcolor = "rgba(249, 247, 139, 0.3)";
} else if (risk_found) {
text = "";
bgcolor = "rgba(191, 255, 171, 0.3)";
}
if (explained) {
text = "<i class='fas fa-comments'></i>";
bgcolor = "rgba(191, 255, 171, 0.3)";
}
return {'bgcolor': bgcolor, 'text': text}
},
endpoint_summary_row: function(endpoint, is_endpoint=false){
let ftp = {"bgcolor": '', "text": '-'};
let dnssec = {"bgcolor": '', "text": '-'};
let xxss = {"bgcolor": '', "text": '-'};
let xcto = {"bgcolor": '', "text": '-'};
let xfo = {"bgcolor": '', "text": '-'};
let https = {"bgcolor": '', "text": '-'};
let hsts = {"bgcolor": '', "text": '-'};
let plain_https = {"bgcolor": '', "text": '-'};
let text = '';
if (is_endpoint) {
text = `<td>${endpoint.protocol}/${endpoint.port} IPv${endpoint.ip_version}</td>`;
} else {
text = `<td>${endpoint.url}</td>`;
}
console.log(endpoint);
for(let i=0; i<endpoint.ratings.length; i++){
let rating = endpoint.ratings[i];
console.log(rating.type);
if (rating.type === "security_headers_strict_transport_security"){
hsts.bgcolor = this.colorizebg(rating.high, rating.medium, rating.low);
hsts.text = this.rating_text(rating);
}
if (rating.type === "tls_qualys"){
https.bgcolor = this.colorizebg(rating.high, rating.medium, rating.low);
https.text = this.rating_text(rating);
}
if (rating.type === "plain_https"){
plain_https.bgcolor = this.colorizebg(rating.high, rating.medium, rating.low);
plain_https.text = this.rating_text(rating);
}
if (rating.type === "security_headers_x_xss_protection"){
xxss.bgcolor = this.colorizebg(rating.high, rating.medium, rating.low);
xxss.text = this.rating_text(rating);
}
if (rating.type === "security_headers_x_frame_options"){
xfo.bgcolor = this.colorizebg(rating.high, rating.medium, rating.low);
xfo.text = this.rating_text(rating);
}
if (rating.type === "security_headers_x_content_type_options"){
xcto.bgcolor = this.colorizebg(rating.high, rating.medium, rating.low);
xcto.text = this.rating_text(rating);
}
if (rating.type === "DNSSEC"){
dnssec.bgcolor = this.colorizebg(rating.high, rating.medium, rating.low);
dnssec.text = this.rating_text(rating);
}
if (rating.type === "ftp"){
ftp.bgcolor = this.colorizebg(rating.high, rating.medium, rating.low);
ftp.text = this.rating_text(rating);
}
}
let findings =
`<td style='background-color: ${dnssec.bgcolor}'>${dnssec.text}</td>` +
`<td style='background-color: ${https.bgcolor}'>${https.text}</td>` +
`<td style='background-color: ${plain_https.bgcolor}'>${plain_https.text}</td>` +
`<td style='background-color: ${hsts.bgcolor}'>${hsts.text}</td>` +
`<td style='background-color: ${xfo.bgcolor}'>${xfo.text}</td>` +
`<td style='background-color: ${xcto.bgcolor}'>${xcto.text}</td>` +
`<td style='background-color: ${xxss.bgcolor}'>${xxss.text}</td>` +
`<td style='background-color: ${ftp.bgcolor}'>${ftp.text}</td>`;
return text + findings;
},
vulnerability_timeline_for_organization: function(organization_id){
fetch('/data/organization_vulnerability_timeline/' + organization_id)
......@@ -255,6 +400,9 @@ const report_mixin = {
scaleLabel: {
display: false,
labelString: 'Value'
},
ticks: {
min: 0,
}
}]
}
......@@ -264,6 +412,14 @@ const report_mixin = {
}).catch((fail) => {console.log('An error occurred: ' + fail)});
},
rating_text: function (rating) {
if (rating.comply_or_explain_valid_at_time_of_report) return "<i class='fas fa-comments'></i>";
if (rating.high > 0) return "red";
if (rating.medium > 0) return "orange";
if (rating.low > 0) return "yellow";
return "";
},
colorize: function (high, medium, low) {
if (high > 0) return "red";
if (medium > 0) return "orange";
......@@ -695,6 +851,9 @@ function views() {
scaleLabel: {
display: false,
labelString: 'Value'
},
ticks: {
min: 0,
}
}]
}
......
......@@ -266,15 +266,31 @@
</select>
<span v-if='loading'><div class="fa fa-spinner fa-spin"></div></span>
{% endverbatim %}
<br />
</div>
</div>
<br /><br />
<div class="row">
<div v-if="name" id="reportcontent" class="col-md-12">
<h3>{% trans "Report for" %} {% verbatim %}{{ name }}{% endverbatim %}</h3>
<br />
<br/>
<a @click="closereport()" class="btn btn-primary" style="color:white;"><i class="fas fa-times"></i> {% trans "close report" %}</a>
<a @click="printreport('reportcontent')" class="btn btn-success" style="color:white;"><i class="fas fa-print"></i> {% trans "print report" %}</a>
<br /><br />
<br style="clear: both">
<i>{% trans "Data from" %}: {% verbatim %}{{ humanize(when) }}{% endverbatim %}.</i><br/>
<br/>
<ul>
<li v-if="promise" id="promise"><strong>*</strong> {% trans "Promise message" %}
</li>
<li>{% trans "RSS change feed teaser" %}
<a :href="'/data/updates_on_organization_feed/' + selected"
target="_blank"> <i class="fas fa-rss"></i> {% trans "rss feed" %}</a>.</li>
<li>
{% trans "Report ask domains leader" %} <a
:href="'mailto:' + mailto + '?subject={% trans "Report ask domains subject" %}' + name + '&body={% trans "Report ask domains body" %}'">{% trans "Report ask sendin domains" %}</a><br/>
</li>
</ul>
<br style="clear: both">
<div class="score high">
<span class="score_value high_text">{% verbatim %}{{ high }}{% endverbatim %}</span><br/>
<span class="score_label">{% trans "High" %}</span>
......@@ -289,36 +305,60 @@
<span class="score_value low_text">{% verbatim %}{{ low }}{% endverbatim %}</span><br/>
<span class="score_label">{% trans "Low" %}</span>
</div>
<br /><br /><br />
<br style="clear: both">
<br />
<h4>{% trans "Risks and internet connectivity over time" %}</h4>
<p></p>
<br style="clear: both">
<br>
<div class="chart-container" style="position: relative; height:555px; width:100%">
<canvas id="organization_vulnerability_timeline"></canvas>
</div>
<br style="clear: both">
<br>
<br />
<div class="chart-container" style="position: relative; height:555px; width:100%">
<canvas id="organization_connectivity_timeline"></canvas>
</div>
<br style="clear: both">
<br />
<i>{% trans "Data from" %}: {% verbatim %}{{ humanize(when) }}{% endverbatim %}.</i><br/>
<br/>
<ul>
<li v-if="promise" id="promise"><strong>*</strong> {% trans "Promise message" %}
</li>
<li>{% trans "RSS change feed teaser" %}
<a :href="'/data/updates_on_organization_feed/' + selected"
target="_blank"> <i class="fas fa-rss"></i> {% trans "rss feed" %}</a>.</li>
<li>
{% trans "Report ask domains leader" %} <a
:href="'mailto:' + mailto + '?subject={% trans "Report ask domains subject" %}' + name + '&body={% trans "Report ask domains body" %}'">{% trans "Report ask sendin domains" %}</a><br/>
</li>
</ul>
<br/>
<h4>{% trans "Risk summary overview" %}</h4>
<p></p>
{% verbatim %}
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover table-sm">
<thead>
<tr>
<th style="width:40%"></th>
<th style="white-space: nowrap; vertical-align: bottom; height: 240px;"><div style="transform: translate(21px, -10px) rotate(315deg); width: 30px;"><span>{% endverbatim %}{% trans "DNSSEC" %}{% verbatim %}</span></div></th>
<th style="white-space: nowrap; vertical-align: bottom; height: 240px;"><div style="transform: translate(21px, -10px) rotate(315deg); width: 30px;"><span>{% endverbatim %}{% trans "tls_qualys" %}{% verbatim %}</span></div></th>
<th style="white-space: nowrap; vertical-align: bottom; height: 240px;"><div style="transform: translate(21px, -10px) rotate(315deg); width: 30px;"><span>{% endverbatim %}{% trans "plain_https" %}{% verbatim %}</span></div></th>
<th style="white-space: nowrap; vertical-align: bottom; height: 240px;"><div style="transform: translate(21px, -10px) rotate(315deg); width: 30px;"><span>{% endverbatim %}{% trans "Strict-Transport-Security" %}{% verbatim %}</span></div></th>
<th style="white-space: nowrap; vertical-align: bottom; height: 240px;"><div style="transform: translate(21px, -10px) rotate(315deg); width: 30px;"><span>{% endverbatim %}{% trans "X-Frame-Options" %}{% verbatim %}</span></div></th>
<th style="white-space: nowrap; vertical-align: bottom; height: 240px;"><div style="transform: translate(21px, -10px) rotate(315deg); width: 30px;"><span>{% endverbatim %}{% trans "X-Content-Type-Options" %}{% verbatim %}</span></div></th>
<th style="white-space: nowrap; vertical-align: bottom; height: 240px;"><div style="transform: translate(21px, -10px) rotate(315deg); width: 30px;"><span>{% endverbatim %}{% trans "X-XSS-Protection" %}{% verbatim %}</span></div></th>
<th style="white-space: nowrap; vertical-align: bottom; height: 240px;"><div style="transform: translate(21px, -10px) rotate(315deg); width: 30px;"><span>{% endverbatim %}{% trans "FTP" %}{% verbatim %}</span></div></th>
</thead>
<tbody style="max-height: 240px; overflow-y: scroll">
<template v-for="url in urls" >
<tr v-html="total_summary_row(url)"></tr>
<!-- Use this for debugging. -->
<!-- <tr v-html="endpoint_summary_row(url, false)"></tr>
<tr v-for="endpoint in url.endpoints" v-html="endpoint_summary_row(endpoint, true)"></tr>
-->
</template>
</tbody>
</table>
</div>
{% endverbatim %}
<br style="clear: both">
<h4>{% trans "Full report" %}</h4>
<p></p>
{% verbatim %}
<div v-for="url in urls" class="perurl"
:style="'background: linear-gradient(' + colorizebg(url.high, url.medium, url.low) + ', rgba(255, 255, 255, 0.0));'">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment