зеркало из https://github.com/openwpm/OpenWPM.git
Cleaned up functionality; started adding covariance betwen features
This commit is contained in:
Christian
Родитель
da7d7b696b
Коммит
ff351e8999
|
|
@ -19,13 +19,16 @@ def build_sync_graph(db_name, known_cookies):
|
|||
|
||||
# iterates through all the cookie ids to look from them flowing throughout the graph
|
||||
for cookie in value_dict:
|
||||
# ignore cookies with blank domains
|
||||
if len(cookie[0]) == 0:
|
||||
continue
|
||||
|
||||
query = 'SELECT url, referrer FROM http_requests WHERE url LIKE \'%' + value_dict[cookie] + '%\''
|
||||
for url, referrer in cur.execute(query):
|
||||
url = census_util.extract_domain(url)
|
||||
referrer = census_util.extract_domain(referrer)
|
||||
|
||||
# adds edges and adds cookies to nodes + edges
|
||||
# TODO: error with blank strings?
|
||||
cookie_str = str(cookie[0]) + " " + str(cookie[1])
|
||||
if url not in g:
|
||||
g.add_node(url, cookies={})
|
||||
|
|
@ -39,7 +42,6 @@ def build_sync_graph(db_name, known_cookies):
|
|||
g.node[url]['cookies'][cookie_str] = 1
|
||||
|
||||
# adds the weights to the nodes and edges
|
||||
# TODO: fix this, wrong under cookie dictionary scheme
|
||||
for node in g.nodes(data=True):
|
||||
g.node[node[0]]['weight'] = len(node[1])
|
||||
|
||||
|
|
|
|||
|
|
@ -9,8 +9,6 @@ def build_node(G, node):
|
|||
"label": str(node),
|
||||
"x": G.node[node]['x'],
|
||||
"y": G.node[node]['y'],
|
||||
"size": 3,
|
||||
"color": "ff0000",
|
||||
"cookies": G.node[node]['cookies']
|
||||
}
|
||||
return str(val).replace("\'", "\"")
|
||||
|
|
|
|||
|
|
@ -10,19 +10,22 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Princeton Web Transparency</h1>
|
||||
<center><h1>Web Measurement Census: Cookie Synchronization</h1></center>
|
||||
<p>
|
||||
<label for="cookie_weight">Cookie weight:</label>
|
||||
<div id="cookie_weight"></div>
|
||||
</p>
|
||||
<div id="weight_slider" style='width:30%'></div>
|
||||
<div class="ui-widget" style ='width:30%'>
|
||||
<label for="tags">Tags: </label>
|
||||
<input id="tags">
|
||||
<label for="cookie_search">Search for cookies: </label>
|
||||
<input id="cookie_search">
|
||||
</div>
|
||||
<div id="graph" style='height:80%; width:100%'></div>
|
||||
<div id="cookie_panel">
|
||||
<div id="cookie_panel" style="position:absolute">
|
||||
<div id="owners"></div>
|
||||
<div id="cookies"></div>
|
||||
</div>
|
||||
<div id="graph" style='height:100%; width:100%'></div>
|
||||
|
||||
|
||||
<script>init();</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,11 @@
|
|||
var curr_clicked = null; // currently clicked node
|
||||
var curr_cookies = null; // list of cookies held at currently clicked node
|
||||
var highlighted = "ff0000"; // color to highlight node
|
||||
var faded = "fffaf0"; // color for faded out nodes
|
||||
|
||||
// dummy function: colors a node gray
|
||||
function hover_node(n) {
|
||||
// either we are not clicking on a node or we are hovering over that node
|
||||
// also, ignore nodes that are not currently highlighed
|
||||
if (curr_clicked == null || n.data.node.id == curr_clicked || n.data.node.color != highlighted) {
|
||||
if (curr_clicked == null || n.data.node.id == curr_clicked || n.data.node.color != node_color) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -41,12 +39,24 @@ function click_stage(stage) {
|
|||
|
||||
// sets the graph to its original coloring
|
||||
function reset_settings(stage) {
|
||||
$("#cookie_panel").hide();
|
||||
s.graph.nodes().forEach(function(n) {
|
||||
n.color = n.original_color;
|
||||
if (n.weight < curr_weight) {
|
||||
n.color = faded;
|
||||
}
|
||||
else {
|
||||
n.color = node_color;
|
||||
}
|
||||
});
|
||||
|
||||
s.graph.edges().forEach(function(e) {
|
||||
e.color = e.original_color;
|
||||
if (s.graph.nodes(e.source).color == faded
|
||||
|| s.graph.nodes(e.target).color == faded) {
|
||||
e.color = faded;
|
||||
}
|
||||
else {
|
||||
e.color = edge_color;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -56,6 +66,7 @@ function click_node(e) {
|
|||
}
|
||||
|
||||
color_flow(e);
|
||||
$("#cookie_panel").show()
|
||||
fill_cookie_data(null);
|
||||
}
|
||||
|
||||
|
|
@ -71,7 +82,7 @@ function color_flow(e) {
|
|||
s.graph.nodes().forEach(function(n) {
|
||||
cookies.some(function(c) {
|
||||
if (c in n.cookies) {
|
||||
n.color = highlighted;
|
||||
n.color = node_color;
|
||||
}
|
||||
else {
|
||||
n.color = faded;
|
||||
|
|
@ -83,7 +94,7 @@ function color_flow(e) {
|
|||
s.graph.edges().forEach(function(e) {
|
||||
cookies.some(function(c) {
|
||||
if (c in e.cookies) {
|
||||
e.color = highlighted;
|
||||
e.color = edge_color;
|
||||
}
|
||||
else {
|
||||
e.color = faded;
|
||||
|
|
@ -95,7 +106,8 @@ function color_flow(e) {
|
|||
|
||||
function fill_cookie_data(hovered_node) {
|
||||
if (hovered_node == null) {
|
||||
$("#owners").html(s.graph.nodes(curr_clicked).label);
|
||||
msg = "<b>ID cookies known by: " +s.graph.nodes(curr_clicked).label + "</b>";
|
||||
$("#owners").html("<b>ID cookies known by: " +s.graph.nodes(curr_clicked).label + "</b>");
|
||||
// in this case, we fill in all of the current cookies
|
||||
owned_cookies = "";
|
||||
curr_cookies.forEach(function(c) {
|
||||
|
|
@ -107,7 +119,9 @@ function fill_cookie_data(hovered_node) {
|
|||
|
||||
else {
|
||||
console.log(s.graph.nodes(hovered_node).label);
|
||||
$("#owners").html(s.graph.nodes(curr_clicked).label + " and " + s.graph.nodes(hovered_node).label);
|
||||
msg = "<b>ID cookies jointly known by: " + s.graph.nodes(curr_clicked).label;
|
||||
msg += " and " + s.graph.nodes(hovered_node).label
|
||||
$("#owners").html(msg);
|
||||
|
||||
owned_cookies = "";
|
||||
curr_cookies.forEach(function(c) {
|
||||
|
|
@ -127,7 +141,7 @@ function filter_out_low_weights(threshold_weight) {
|
|||
n.color = faded;
|
||||
}
|
||||
else {
|
||||
n.color = highlighted;
|
||||
n.color = node_color;
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -138,18 +152,17 @@ function filter_out_low_weights(threshold_weight) {
|
|||
e.color = faded;
|
||||
}
|
||||
else {
|
||||
e.color = highlighted;
|
||||
e.color = edge_color;
|
||||
}
|
||||
});
|
||||
s.refresh();
|
||||
}
|
||||
|
||||
function highlight_cookie_owners(cookie) {
|
||||
console.log(cookie);
|
||||
// highlight only the nodes and edges with a single value
|
||||
s.graph.nodes().forEach(function(n) {
|
||||
if (cookie in n.cookies) {
|
||||
n.color = highlighted;
|
||||
n.color = node_color;
|
||||
}
|
||||
else {
|
||||
n.color = faded;
|
||||
|
|
@ -158,7 +171,7 @@ function highlight_cookie_owners(cookie) {
|
|||
// next, highlight the edges with a single value
|
||||
s.graph.edges().forEach(function(e) {
|
||||
if (cookie in e.cookies) {
|
||||
e.color = highlighted;
|
||||
e.color = edge_color;
|
||||
}
|
||||
else {
|
||||
e.color = faded;
|
||||
|
|
|
|||
|
|
@ -1,168 +0,0 @@
|
|||
var curr_clicked = null; // currently clicked node
|
||||
var curr_cookies = null; // list of cookies held at currently clicked node
|
||||
var highlighted = "ff0000"; // color to highlight node
|
||||
var faded = "fffaf0"; // color for faded out nodes
|
||||
|
||||
// dummy function: colors a node gray
|
||||
function hover_node(n) {
|
||||
// either we are not clicking on a node or we are hovering over that node
|
||||
// also, ignore nodes that are not currently highlighed
|
||||
if (curr_clicked == null || n.data.node.id == curr_clicked || n.data.node.color != highlighted) {
|
||||
return;
|
||||
}
|
||||
|
||||
// try to find the common cookies
|
||||
common_cookies = [];
|
||||
curr_cookies.forEach(function (c) {
|
||||
if (c in n.data.node.cookies) {
|
||||
common_cookies.push(c);
|
||||
}
|
||||
});
|
||||
|
||||
common_cookies.sort();
|
||||
console.log(common_cookies);
|
||||
fill_cookie_data(n.data.node.id);
|
||||
|
||||
s.refresh();
|
||||
}
|
||||
|
||||
function unhover_node(n) {
|
||||
if (curr_clicked == null) {
|
||||
return;
|
||||
}
|
||||
|
||||
fill_cookie_data(null);
|
||||
}
|
||||
|
||||
function click_stage(stage) {
|
||||
reset_settings(stage);
|
||||
s.refresh();
|
||||
}
|
||||
|
||||
// sets the graph to its original coloring
|
||||
function reset_settings(stage) {
|
||||
s.graph.nodes().forEach(function(n) {
|
||||
n.color = n.original_color;
|
||||
});
|
||||
|
||||
s.graph.edges().forEach(function(e) {
|
||||
e.color = e.original_color;
|
||||
});
|
||||
}
|
||||
|
||||
function click_node(e) {
|
||||
if (e.data.node.id == curr_clicked) {
|
||||
return;
|
||||
}
|
||||
|
||||
color_flow(e);
|
||||
fill_cookie_data(null);
|
||||
}
|
||||
|
||||
// used for clicking, colors all nodes and edges that share a common cookie
|
||||
// with the currently clicked node
|
||||
function color_flow(e) {
|
||||
// gets the cookies placed at this node
|
||||
cookies = Object.keys(e.data.node.cookies);
|
||||
curr_clicked = e.data.node.id;
|
||||
curr_cookies = cookies;
|
||||
|
||||
// color all nodes that have a cookie shared with this node
|
||||
s.graph.nodes().forEach(function(n) {
|
||||
cookies.some(function(c) {
|
||||
if (c in n.cookies) {
|
||||
n.color = highlighted;
|
||||
}
|
||||
else {
|
||||
n.color = faded;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// next, color the edges
|
||||
s.graph.edges().forEach(function(e) {
|
||||
cookies.some(function(c) {
|
||||
if (c in e.cookies) {
|
||||
e.color = highlighted;
|
||||
}
|
||||
else {
|
||||
e.color = faded;
|
||||
}
|
||||
});
|
||||
});
|
||||
s.refresh();
|
||||
}
|
||||
|
||||
function fill_cookie_data(hovered_node) {
|
||||
if (hovered_node == null) {
|
||||
$("#owners").html(s.graph.nodes(curr_clicked).label);
|
||||
// in this case, we fill in all of the current cookies
|
||||
owned_cookies = "";
|
||||
curr_cookies.forEach(function(c) {
|
||||
owned_cookies += c + "</br>";
|
||||
});
|
||||
|
||||
$("#cookies").html(owned_cookies);
|
||||
}
|
||||
|
||||
else {
|
||||
console.log(s.graph.nodes(hovered_node).label);
|
||||
$("#owners").html(s.graph.nodes(curr_clicked).label + " and " + s.graph.nodes(hovered_node).label);
|
||||
|
||||
owned_cookies = "";
|
||||
curr_cookies.forEach(function(c) {
|
||||
if (c in s.graph.nodes(hovered_node).cookies) {
|
||||
owned_cookies += c + "</br>";
|
||||
}
|
||||
});
|
||||
|
||||
$("#cookies").html(owned_cookies);
|
||||
}
|
||||
}
|
||||
|
||||
function filter_out_low_weights(threshold_weight) {
|
||||
// first fade out the low-weight nodes
|
||||
s.graph.nodes().forEach(function(n) {
|
||||
if (n.weight < threshold_weight) {
|
||||
n.color = faded;
|
||||
}
|
||||
else {
|
||||
n.color = highlighted;
|
||||
}
|
||||
});
|
||||
|
||||
// next, fade out the edges with at least one faded node
|
||||
s.graph.edges().forEach(function(e) {
|
||||
if (s.graph.nodes(e.source).color == faded
|
||||
|| s.graph.nodes(e.target).color == faded) {
|
||||
e.color = faded;
|
||||
}
|
||||
else {
|
||||
e.color = highlighted;
|
||||
}
|
||||
});
|
||||
s.refresh();
|
||||
}
|
||||
|
||||
function highlight_cookie_owners(cookie) {
|
||||
console.log(cookie);
|
||||
// highlight only the nodes and edges with a single value
|
||||
s.graph.nodes().forEach(function(n) {
|
||||
if (cookie in n.cookies) {
|
||||
n.color = highlighted;
|
||||
}
|
||||
else {
|
||||
n.color = faded;
|
||||
}
|
||||
});
|
||||
// next, highlight the edges with a single value
|
||||
s.graph.edges().forEach(function(e) {
|
||||
if (cookie in e.cookies) {
|
||||
e.color = highlighted;
|
||||
}
|
||||
else {
|
||||
e.color = faded;
|
||||
}
|
||||
});
|
||||
s.refresh();
|
||||
}
|
||||
|
|
@ -1,4 +1,7 @@
|
|||
var base_color = "0066ff"; // standard node for colors
|
||||
var node_color = "0066ff"; // standard color for nodes
|
||||
var edge_color = "999999"; // standard color for edges
|
||||
var faded = "fffaf0"; // color for faded out parts of the graph
|
||||
var curr_weight;
|
||||
|
||||
function init() {
|
||||
// setup the graph
|
||||
|
|
@ -12,30 +15,38 @@ function init() {
|
|||
// save the original color of the graph for later re-coloring
|
||||
// also, save the weights for each node and edge
|
||||
s.graph.nodes().forEach(function(n) {
|
||||
n.color = base_color;
|
||||
n.color = node_color;
|
||||
n.original_color = n.color;
|
||||
n.weight = Object.keys(n.cookies).length;
|
||||
n.size = 1;
|
||||
if (n.weight > max_weight) {
|
||||
max_weight = n.weight;
|
||||
}
|
||||
});
|
||||
s.graph.edges().forEach(function(e) {
|
||||
e.color = "e6e6e6";
|
||||
e.color = edge_color;
|
||||
e.original_color = e.color;
|
||||
e.weight = Object.keys(e.cookies).length;
|
||||
});
|
||||
s.refresh();
|
||||
|
||||
// ui, pt 1: build up a slider that filters nodes by weights
|
||||
starting_weight = Math.floor(max_weight / 4);
|
||||
curr_weight = starting_weight;
|
||||
$("#cookie_weight").html(starting_weight)
|
||||
$("#weight_slider").slider({
|
||||
range: "max",
|
||||
min: 0,
|
||||
min: 1,
|
||||
max: max_weight,
|
||||
value: max_weight / 2,
|
||||
value: starting_weight,
|
||||
slide: function(event, ui) {
|
||||
curr_weight = ui.value;
|
||||
$("#cookie_weight").html(ui.value);
|
||||
filter_out_low_weights(ui.value);
|
||||
}
|
||||
});
|
||||
filter_out_low_weights(starting_weight);
|
||||
curr_weight = starting_weight;
|
||||
|
||||
// ui, pt 2: build up an autocomplete feature to look up cookies
|
||||
// first get the list of all the cookies
|
||||
|
|
@ -47,7 +58,7 @@ function init() {
|
|||
});
|
||||
cookie_list = Object.keys(cookie_dict);
|
||||
cookie_list.sort();
|
||||
$("#tags").autocomplete({
|
||||
$("#cookie_search").autocomplete({
|
||||
source: cookie_list,
|
||||
select: function(event, ui) {
|
||||
highlight_cookie_owners(ui.item.value);
|
||||
|
|
|
|||
|
|
@ -1,64 +0,0 @@
|
|||
var base_color = "0066ff"; // standard node for colors
|
||||
|
||||
function init() {
|
||||
// setup the graph
|
||||
s = new sigma(document.getElementById('graph'));
|
||||
sigma.parsers.json(
|
||||
'graph.json',
|
||||
s,
|
||||
function() {
|
||||
max_weight = 0; // max weight of a node
|
||||
|
||||
// save the original color of the graph for later re-coloring
|
||||
// also, save the weights for each node and edge
|
||||
s.graph.nodes().forEach(function(n) {
|
||||
n.color = base_color;
|
||||
n.original_color = n.color;
|
||||
n.weight = Object.keys(n.cookies).length;
|
||||
if (n.weight > max_weight) {
|
||||
max_weight = n.weight;
|
||||
}
|
||||
});
|
||||
s.graph.edges().forEach(function(e) {
|
||||
e.color = "e6e6e6";
|
||||
e.original_color = e.color;
|
||||
e.weight = Object.keys(e.cookies).length;
|
||||
});
|
||||
s.refresh();
|
||||
|
||||
// ui, pt 1: build up a slider that filters nodes by weights
|
||||
$("#weight_slider").slider({
|
||||
range: "max",
|
||||
min: 0,
|
||||
max: max_weight,
|
||||
value: max_weight / 2,
|
||||
font-size: 1px,
|
||||
slide: function(event, ui) {
|
||||
filter_out_low_weights(ui.value);
|
||||
}
|
||||
});
|
||||
|
||||
// ui, pt 2: build up an autocomplete feature to look up cookies
|
||||
// first get the list of all the cookies
|
||||
cookie_dict = {};
|
||||
s.graph.nodes().forEach(function(n) {
|
||||
Object.keys(n.cookies).forEach(function(c) {
|
||||
cookie_dict[c] = true;
|
||||
});
|
||||
});
|
||||
cookie_list = Object.keys(cookie_dict);
|
||||
cookie_list.sort();
|
||||
$("#tags").autocomplete({
|
||||
source: cookie_list,
|
||||
select: function(event, ui) {
|
||||
highlight_cookie_owners(ui.item.value);
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
// bind actions from graph_actions.js
|
||||
s.bind('overNode', hover_node);
|
||||
s.bind('outNode', unhover_node);
|
||||
s.bind('clickStage', click_stage);
|
||||
s.bind('clickNode', click_node);
|
||||
}
|
||||
Загрузка…
Ссылка в новой задаче