-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathlogger.html
More file actions
166 lines (160 loc) · 9.07 KB
/
Copy pathlogger.html
File metadata and controls
166 lines (160 loc) · 9.07 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
<!DOCTYPE html>
<html lang="en" data-wardenone-page="logger">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WardenOne - Network logger</title>
<link rel="stylesheet" href="theme.css">
<link rel="stylesheet" href="guide-shell.css">
<script src="theme.js"></script>
<style>
/* Colours come from the guide shell, never from names invented here: an
undefined custom property makes the whole declaration invalid, so a wrong
variable name does not fall back to a default -- it silently deletes the
border, and the pressed filter chip becomes indistinguishable from the rest. */
.log-toolbar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:12px; }
.log-filters { display:flex; flex-wrap:wrap; gap:5px; }
.log-search { flex:1; min-width:180px; border:1px solid var(--guide-line); border-radius:10px;
background:var(--guide-paper); color:var(--guide-ink); padding:8px 11px; font:inherit; font-size:13px; }
.log-search:focus-visible { outline:2px solid var(--guide-violet); outline-offset:1px; }
.log-count { font-size:12px; color:var(--guide-faint); font-variant-numeric:tabular-nums; }
.log-table { width:100%; border-collapse:collapse; font-size:12.5px; color:var(--guide-ink); }
.log-table th { text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.05em;
color:var(--guide-faint); font-weight:700; padding:8px; background:var(--guide-paper);
border-bottom:1px solid var(--guide-line-strong); position:sticky; top:0; z-index:1; }
.log-table td { padding:7px 8px; border-bottom:1px solid var(--guide-line); vertical-align:top; }
.log-row { cursor:pointer; }
.log-row:hover, .log-row.is-open { background:var(--guide-mist); }
.log-row:focus-visible { outline:2px solid var(--guide-violet); outline-offset:-2px; }
.log-url { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:11.5px;
word-break:break-all; }
.log-badge { display:inline-block; border-radius:999px; padding:2px 8px; font-size:10.5px;
font-weight:700; white-space:nowrap; }
.log-blocked { background:var(--wo-danger-bg, #f3dbe5); color:var(--guide-danger); }
.log-allowed { background:var(--wo-success-bg, #dcefe4); color:var(--guide-success); }
.log-failed { background:var(--wo-warning-bg, #f4e4ce); color:var(--guide-warning); }
.log-pending { background:var(--guide-mist); color:var(--guide-faint); }
.log-dim { color:var(--guide-soft); }
.log-detail td { background:var(--guide-mist); border-bottom:1px solid var(--guide-line-strong); }
.log-detail dl { display:grid; grid-template-columns:auto 1fr; gap:5px 14px; margin:0 0 10px; }
.log-detail dt { color:var(--guide-faint); font-size:11.5px; }
.log-detail dd { margin:0; font-size:12px; word-break:break-all; }
.log-actions { display:flex; flex-wrap:wrap; gap:6px; }
.log-actions .btn { font-size:11.5px; padding:6px 10px; }
.log-empty { padding:26px 8px; text-align:center; color:var(--guide-faint); font-size:13px; }
.log-note { font-size:12px; color:var(--guide-soft); line-height:1.55; }
.log-scroll { max-height:60vh; overflow:auto; border:1px solid var(--guide-line);
border-radius:12px; background:var(--guide-paper); }
</style>
</head>
<body>
<header class="guide-topbar">
<div class="guide-wrap guide-topbar-inner">
<a class="guide-brand" href="popup.html" aria-label="Back to WardenOne popup">
<span class="guide-brand-mark" aria-hidden="true"><img src="icons/icon128.png" alt=""></span>
<span><span class="guide-brand-name">WardenOne</span><span class="guide-brand-sub">Network logger</span></span>
</a>
<div class="guide-toplinks">
<nav class="guide-nav" aria-label="Sections">
<a href="history.html">Activity</a>
<a href="notifications.html">Notifications</a>
</nav>
<div class="guide-credit">Developer <strong>iri.dev</strong></div>
</div>
</div>
</header>
<main>
<section class="guide-hero">
<div class="guide-wrap guide-hero-inner">
<div>
<div class="guide-eyebrow">Advanced tool</div>
<h1>Every request, and the rule behind it.</h1>
<p class="guide-lead"><strong>The Activity Centre says a security event happened. This says
which request it was, whether WardenOne blocked or allowed it, and which rule decided.</strong>
Use it when a site breaks and you need to know what stopped it.</p>
<div class="guide-hero-actions">
<a class="guide-btn primary" href="#rows">See the requests</a>
<a class="guide-btn" href="history.html">Activity centre</a>
</div>
<div class="guide-pills" aria-label="How the logger behaves">
<span>Records only while open</span>
<span>Memory only</span>
<span>Secrets removed</span>
</div>
</div>
<aside class="guide-summary" aria-label="Capture summary">
<div class="summary-label">This session</div>
<div class="metric-grid">
<div class="metric"><div class="n" id="m-total">0</div><div class="l">Seen</div></div>
<div class="metric"><div class="n" id="m-blocked">0</div><div class="l">Blocked</div></div>
<div class="metric"><div class="n" id="m-allowed">0</div><div class="l">Allowed</div></div>
</div>
<p class="summary-copy" id="capture-state">Connecting…</p>
</aside>
</div>
</section>
<section class="guide-section">
<div class="guide-wrap">
<div class="guide-section-head">
<div><div class="guide-kicker">Live capture</div><h2>What each request did, and why.</h2></div>
<p>Click any row for the full detail and to turn it into a rule. Rules made here go into
<strong>My rules</strong> in the popup, so nothing this page does is hidden from you.</p>
</div>
<!-- Nothing here is written to disk. Capture starts when this page opens and
stops when it closes, so ordinary browsing carries no per-request cost. -->
<div class="log-toolbar">
<div class="log-filters" id="action-filters" role="group" aria-label="Filter by outcome">
<button class="chip" data-action="all" aria-pressed="true">All</button>
<button class="chip" data-action="blocked" aria-pressed="false">Blocked</button>
<button class="chip" data-action="allowed" aria-pressed="false">Allowed</button>
<button class="chip" data-action="failed" aria-pressed="false">Failed</button>
</div>
<input class="log-search" id="search" type="search" placeholder="Search host, URL, rule or list…"
aria-label="Search requests" spellcheck="false">
<span class="log-count" id="count"></span>
<button class="btn" id="pause" type="button">Pause</button>
<button class="btn" id="clear" type="button">Clear</button>
<button class="btn" id="export" type="button">Export</button>
</div>
<div class="log-filters" id="type-filters" role="group" aria-label="Filter by request type" style="margin-bottom:12px;">
<button class="chip" data-type="all" aria-pressed="true">All types</button>
<button class="chip" data-type="script" aria-pressed="false">Script</button>
<button class="chip" data-type="xmlhttprequest" aria-pressed="false">XHR</button>
<button class="chip" data-type="sub_frame" aria-pressed="false">Frame</button>
<button class="chip" data-type="image" aria-pressed="false">Image</button>
<button class="chip" data-type="media" aria-pressed="false">Media</button>
<button class="chip" data-type="websocket" aria-pressed="false">WebSocket</button>
<button class="chip" data-type="other" aria-pressed="false">Other</button>
</div>
<div class="log-scroll">
<table class="log-table">
<thead>
<tr>
<th style="width:76px;">Outcome</th>
<th style="width:88px;">Type</th>
<th style="width:66px;">Party</th>
<th>Request</th>
<th style="width:170px;">Rule / list</th>
</tr>
</thead>
<tbody id="rows"></tbody>
</table>
<div class="log-empty" id="empty">Nothing captured yet. Browse in another tab and requests will appear here.</div>
</div>
<p class="log-note" style="margin-top:14px;" id="exact-note"></p>
<p class="log-note">Sign-in details, query values, the fragment and any part of a path that is not plain route vocabulary are removed
before the request is stored, so this log can never become the leak. What stays is the scheme, the host, the route
and the parameter names, plus a value only when it is a flag, a small number or a plain word.
Nothing is written to disk unless you press Export — and an export is still a list of the sites you visited.</p>
</div>
</section>
</main>
<footer class="guide-footer">
<div class="guide-wrap guide-footer-inner">
<span><strong>Recording only while this page is open.</strong> Kept in memory, never on disk.</span>
<span>Last <span id="cap">1000</span> requests.</span>
</div>
</footer>
<script src="logger.js"></script>
</body>
</html>