CIRCL
/
lookyloo
mirror of https://github.com/CIRCL/lookyloo
2
0
Fork 0
Code Issues Releases Wiki Activity

chg: Improve notification of insecure content

pull/81/head
Raphaël Vinot 2020-08-06 17:24:06 +02:00
parent 77d1f872da
commit 5e2a5cf993
1 changed files with 41 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
website/web/static/tree.js
View File

@ -15,6 +15,13 @@ var main_svg = d3.select("body").append("svg")
.attr("width", width + margin.right + margin.left) .attr("width", width + margin.right + margin.left)
.attr("height", height + margin.top + margin.bottom) .attr("height", height + margin.top + margin.bottom)
// dummy container for tooltip
d3.select('body')
.append('div')
.attr('id', 'tooltip')
.attr('class', 'tooltip')
.attr('style', 'position: absolute; opacity: 0;');
main_svg.append("clipPath") main_svg.append("clipPath")
.attr("id", "textOverlay") .attr("id", "textOverlay")
.append("rect") .append("rect")
@ -383,19 +390,9 @@ function update(root, computed_node_width=0) {
.attr('x', 12) .attr('x', 12)
.attr('y', 0) .attr('y', 0)
.style("opacity", "0.5") .style("opacity", "0.5")
.attr("stroke", d => { .attr("stroke", 'black')
if (d.data.http_content){
return "red";
}
return "black";
})
.attr('stroke-opacity', "0.8") .attr('stroke-opacity', "0.8")
.attr("stroke-width", d => { .attr("stroke-width", "2")
if (d.data.http_content){
return "4";
}
return "2";
})
.attr("stroke-linecap", "round") .attr("stroke-linecap", "round")
.attr("fill", "white"); .attr("fill", "white");
@ -437,27 +434,40 @@ function update(root, computed_node_width=0) {
.on('click', function(d) { .on('click', function(d) {
PermanentNodeHighlight(d.data.uuid); PermanentNodeHighlight(d.data.uuid);
}); });
// set lock
var icon_size = 24;
if (p.data.http_content) {
// set lock insecure connection
d3.select(this).append("svg").append('rect')
.attr('x', selected_node_bbox.width - 22)
.attr('y', selected_node_bbox.height - 13)
.attr('width', icon_size)
.attr('height', icon_size)
.attr('fill', 'white')
.attr('stroke', 'black');
// Source: https://icons.getbootstrap.com/icons/lock/ // Source: https://icons.getbootstrap.com/icons/lock/
d3.select(this).append("svg") d3.select(this).append('image')
.attr('x', selected_node_bbox.width - 20) .attr('x', selected_node_bbox.width - 22)
.attr('y', selected_node_bbox.height - 15) .attr('y', selected_node_bbox.height - 13)
.attr('width', '3em') .attr('id', 'insecure_image')
.attr('height', '3em') .attr("width", icon_size)
.attr('viewBox', '0 0 32 32') .attr("height", icon_size)
.attr('class', 'bi bi-lock') .attr("title", 'This node contents insecure requests')
.attr('fill', 'currentColor') .attr("xlink:href", '/static/insecure.svg')
.append('path') .on('mouseover', d => {
.attr('fill-rule', "evenodd") d3.select('#tooltip')
.attr('d', d => { .style('opacity', 1)
if (d.data.http_content) { .style('left', (d3.event.pageX+10) + 'px')
// opened lock .style('top', (d3.event.pageY+10) + 'px')
return 'M9.655 8H2.333c-.264 0-.398.068-.471.121a.73.73 0 0 0-.224.296 1.626 1.626 0 0 0-.138.59V14c0 .342.076.531.14.635.064.106.151.18.256.237a1.122 1.122 0 0 0 .436.127l.013.001h7.322c.264 0 .398-.068.471-.121a.73.73 0 0 0 .224-.296 1.627 1.627 0 0 0 .138-.59V9c0-.342-.076-.531-.14-.635a.658.658 0 0 0-.255-.237A1.122 1.122 0 0 0 9.655 8zm.012-1H2.333C.5 7 .5 9 .5 9v5c0 2 1.833 2 1.833 2h7.334c1.833 0 1.833-2 1.833-2V9c0-2-1.833-2-1.833-2zM8.5 4a3.5 3.5 0 1 1 7 0v3h-1V4a2.5 2.5 0 0 0-5 0v3h-1V4z'; .text('This node containts insecure requests');
} })
// closed lock .on('mouseout', function() {
return 'M11.5 8h-7a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1zm-7-1a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-7zm0-3a3.5 3.5 0 1 1 7 0v3h-1V4a2.5 2.5 0 0 0-5 0v3h-1V4z'; d3.select('#tooltip')
.style('opacity', 0);
}); });
};
}); });
return node_group; return node_group;
}, },
update => update, update => update,