-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathfirewall.html
More file actions
175 lines (167 loc) · 9.71 KB
/
Copy pathfirewall.html
File metadata and controls
175 lines (167 loc) · 9.71 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
167
168
169
170
171
172
173
174
175
<!DOCTYPE html>
<html lang="en" data-wardenone-page="firewall">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WardenOne - Site firewall</title>
<link rel="stylesheet" href="theme.css">
<link rel="stylesheet" href="guide-shell.css">
<script src="theme.js"></script>
<style>
/* --guide-* only. An undefined custom property invalidates the whole
declaration, so a wrong name deletes the border rather than erroring. */
.fw-bar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:14px; }
.fw-add { flex:1; min-width:220px; max-width:420px; border:1px solid var(--guide-line);
border-radius:9px; background:var(--guide-paper); color:var(--guide-ink); padding:7px 11px;
font:inherit; font-size:12.5px; }
.fw-add:focus-visible { outline:2px solid var(--guide-violet); outline-offset:1px; }
.fw-count { font-size:12.5px; color:var(--guide-faint); font-variant-numeric:tabular-nums; }
.fw-status { font-size:12.5px; color:var(--guide-soft); min-height:18px; margin:0 0 12px; }
.fw-table { width:100%; border-collapse:collapse; font-size:12.5px; }
.fw-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; }
.fw-table th.fw-col { text-align:center; width:82px; }
.fw-table td { padding:6px 8px; border-bottom:1px solid var(--guide-line); vertical-align:middle; }
.fw-table tr.is-first-party td { background:var(--guide-mist); }
.fw-domain { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; word-break:break-all; }
.fw-note-sm { margin-top:2px; font-size:10.5px; color:var(--guide-faint); font-family:var(--body); }
.fw-cell { text-align:center; }
.fw-btn { width:72px; border:1px solid var(--guide-line); border-radius:8px; padding:5px 0;
background:var(--guide-paper); color:var(--guide-faint); font:700 11px var(--body); cursor:pointer; }
.fw-btn:hover { border-color:var(--guide-violet); }
.fw-btn:focus-visible { outline:2px solid var(--guide-violet); outline-offset:1px; }
.fw-btn.is-allow { background:var(--wo-success-bg,#dcefe4); color:var(--guide-success); border-color:var(--guide-success); }
.fw-btn.is-block { background:var(--wo-danger-bg,#f3dbe5); color:var(--guide-danger); border-color:var(--guide-danger); }
.fw-btn.is-inert { text-decoration: line-through; opacity: .55; outline: 1px dashed var(--guide-warning); outline-offset: -1px; }
.fw-btn.is-strip { background:var(--wo-warning-bg,#f4e4ce); color:var(--guide-warning); border-color:var(--guide-warning); }
.fw-once-row { display:flex; gap:6px; align-items:center; margin-top:4px; font-family:var(--body); }
.fw-once { border:1px dashed var(--guide-line); border-radius:6px; padding:2px 7px; background:transparent;
color:var(--guide-faint); font:700 10px var(--body); cursor:pointer; }
.fw-once:hover { border-color:var(--guide-violet); color:var(--guide-violet); }
.fw-once-tag { font-size:10px; color:var(--guide-success); font-weight:700; }
.fw-scroll { max-height:58vh; overflow:auto; border:1px solid var(--guide-line); border-radius:12px;
background:var(--guide-paper); }
.fw-empty { padding:26px 8px; text-align:center; color:var(--guide-faint); font-size:13px; }
.fw-note { font-size:12.5px; line-height:1.6; color:var(--guide-soft); }
.fw-danger { border:1px solid var(--guide-danger); border-radius:12px; padding:14px 16px; margin-top:20px;
background:var(--wo-danger-bg,#f3dbe5); }
.fw-danger h3 { margin:0 0 6px; font:800 13px var(--body); color:var(--guide-danger); }
</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">Site firewall</span></span>
</a>
<div class="guide-toplinks">
<nav class="guide-nav" aria-label="Sections">
<a href="logger.html">Network logger</a>
<a href="history.html">Activity</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>Decide what each domain may do here.</h1>
<p class="guide-lead"><strong>Every domain this site loads, and what you allow it to do — on this site
only.</strong> Your decisions beat every list WardenOne ships. This is the tool that can break a site
completely, so undoing it is always one click away.</p>
<div class="guide-hero-actions">
<a class="guide-btn primary" href="#matrix">See the domains</a>
<a class="guide-btn" href="logger.html">Network logger</a>
</div>
<div class="guide-pills" aria-label="How the firewall behaves">
<span>This site only</span>
<span>Beats every list</span>
<span>One-click undo</span>
</div>
</div>
<aside class="guide-summary" aria-label="Firewall summary">
<div class="summary-label">Site</div>
<div class="metric-grid">
<div class="metric"><div class="n" id="site-name" style="font-size:15px;word-break:break-all;">—</div><div class="l">Current</div></div>
</div>
<p class="summary-copy" id="capture-state">Connecting…</p>
<p class="summary-copy" id="all-sites"></p>
</aside>
</div>
</section>
<section class="guide-section" id="matrix">
<div class="guide-wrap">
<div class="guide-section-head">
<div><div class="guide-kicker">Dynamic filtering</div><h2>The domains this page loads.</h2></div>
<p>A row exists because a request actually happened. Click a cell to cycle it:
<strong>—</strong> leaves it to WardenOne, <strong>allow</strong> forces it through every
blocklist, <strong>block</strong> stops it here. <strong>Cookie</strong> is different: it lets the
request happen but strips the cookie, so the domain still works and still cannot recognise you.
<strong>Allow once</strong>, under a domain, lets it load freely until the browser closes and stores
nothing — the way to test whether a domain is what broke a page without making a rule.</p>
</div>
<div class="fw-bar">
<button class="btn" id="reload" type="button">Reload the site and watch</button>
<!-- The matrix only knows what it saw. A domain you already know you want
to rule on -- one that loads later, or only on another page of the
site -- needs a way in that does not depend on catching it. -->
<input class="fw-add" id="add-domain" type="text" spellcheck="false"
placeholder="Add a domain yourself, e.g. tracker.example.com"
aria-label="Add a domain to the matrix">
<button class="btn" id="add" type="button">Add</button>
<span class="fw-count" id="count"></span>
<span style="flex:1;"></span>
<button class="btn" id="reset-site" type="button">Undo my rules here</button>
</div>
<p class="fw-status" id="status"></p>
<div class="fw-scroll">
<table class="fw-table">
<thead>
<tr>
<th>Domain</th>
<th class="fw-col">Script</th>
<th class="fw-col">XHR</th>
<th class="fw-col">Frame</th>
<th class="fw-col">Media</th>
<th class="fw-col">Cookie</th>
<th class="fw-col">All</th>
</tr>
</thead>
<tbody id="rows"></tbody>
</table>
<div class="fw-empty" id="empty">Nothing seen yet. Press <strong>Reload the site and watch</strong> above
— the matrix fills with what the page actually requests.</div>
</div>
<p class="fw-note" style="margin-top:14px;">A cell showing <strong>· loaded</strong> or
<strong>· blocked</strong> is telling you what happened, not what you chose — and where
WardenOne blocked something, the row says which list decided. <strong>All</strong> covers everything,
including stylesheets and the request types with no column of their own. A specific column beats
<strong>All</strong>: allow everything and block scripts, and the scripts are blocked. <strong>Cookie</strong>
strip beats an allow in the same row. A temporary allowance beats every stored decision while it lasts.</p>
<div class="fw-danger">
<h3>This is the tool that can break a site</h3>
<p class="fw-note" style="margin:0;">Blocking a site's own CDN will stop it working, and nothing here
tries to stop you doing that — it is your browser. What it does instead is keep undo in front of
you. <strong>Undo my rules here</strong> clears this site; the button below clears every site at once.
Rules apply from the next load, so if something breaks, undo and reload.</p>
<div style="margin-top:12px;">
<button class="btn" id="reset-all" type="button">Remove every firewall rule on every site</button>
</div>
</div>
</div>
</section>
</main>
<footer class="guide-footer">
<div class="guide-wrap guide-footer-inner">
<span><strong>Your rules beat every list WardenOne ships.</strong> They apply to this site alone.</span>
<span>Nothing here leaves your computer.</span>
</div>
</footer>
<script src="firewall.js"></script>
</body>
</html>