-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathfile-shield.html
More file actions
251 lines (229 loc) · 14 KB
/
Copy pathfile-shield.html
File metadata and controls
251 lines (229 loc) · 14 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
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
<!DOCTYPE html>
<html lang="en" data-wardenone-page="file-shield">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WardenOne - File Shield</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 (--guide-*), never from names invented
here: an undefined custom property invalidates the whole declaration, so a
wrong variable name silently deletes the border instead of erroring. */
.fs-drop {
border: 2px dashed var(--guide-line-strong); border-radius: 16px;
background: var(--guide-paper); padding: 34px 22px; text-align: center;
transition: border-color .15s ease, background .15s ease;
}
.fs-drop.is-over { border-color: var(--guide-violet); background: var(--guide-mist); }
.fs-drop h3 { margin: 0 0 6px; font: 800 17px/1.3 var(--display); color: var(--guide-ink); }
.fs-drop p { margin: 0 0 16px; font-size: 13px; color: var(--guide-soft); }
.fs-progress { margin-top: 14px; font-size: 13px; color: var(--guide-soft); }
.fs-verdict { border-radius: 16px; padding: 20px 22px; margin: 20px 0 18px; border: 1px solid var(--guide-line); }
.fs-verdict-head { font: 800 19px/1.3 var(--display); margin-bottom: 6px; }
.fs-verdict-copy { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--guide-soft); }
.fs-verdict.is-danger { border-color: var(--guide-danger); background: var(--wo-danger-bg, #f3dbe5); }
.fs-verdict.is-danger .fs-verdict-head { color: var(--guide-danger); }
.fs-verdict.is-caution { border-color: var(--guide-warning); background: var(--wo-warning-bg, #f4e4ce); }
.fs-verdict.is-caution .fs-verdict-head { color: var(--guide-warning); }
.fs-verdict.is-plain { background: var(--guide-paper); }
.fs-verdict.is-plain .fs-verdict-head { color: var(--guide-ink); }
.fs-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 880px) { .fs-grid { grid-template-columns: minmax(0, 1fr); } }
.fs-card { border: 1px solid var(--guide-line); border-radius: 14px; background: var(--guide-paper); padding: 16px 18px; }
.fs-card h3 { margin: 0 0 12px; font: 800 12px/1 var(--body); letter-spacing: .07em;
text-transform: uppercase; color: var(--guide-faint); }
.fs-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px 16px; margin: 0; }
.fs-facts dt { font-size: 12px; color: var(--guide-faint); }
.fs-facts dd { margin: 0; font-size: 12.5px; color: var(--guide-ink); word-break: break-all;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.fs-finding { border-left: 3px solid var(--guide-line-strong); padding: 2px 0 2px 12px; margin-bottom: 14px; }
.fs-finding-title { font: 800 13.5px/1.4 var(--body); color: var(--guide-ink); margin-bottom: 3px; }
.fs-finding-detail { font-size: 12.5px; line-height: 1.6; color: var(--guide-soft); }
.fs-finding.is-danger { border-left-color: var(--guide-danger); }
.fs-finding.is-danger .fs-finding-title { color: var(--guide-danger); }
.fs-finding.is-caution { border-left-color: var(--guide-warning); }
.fs-finding.is-info { border-left-color: var(--guide-violet); }
.fs-caps-head { margin: 16px 0 8px; font: 800 12px/1 var(--body); letter-spacing: .07em;
text-transform: uppercase; color: var(--guide-faint); }
.fs-caps { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.fs-cap { border: 1px solid var(--guide-line); border-radius: 10px; padding: 8px 11px; background: var(--guide-mist); }
.fs-cap-label { font: 800 12.5px/1.35 var(--body); color: var(--guide-ink); }
.fs-cap-why { margin-top: 3px; font-size: 10.5px; color: var(--guide-faint);
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; word-break: break-all; }
.fs-badge { display: inline-block; border-radius: 999px; padding: 2px 9px; font-size: 10.5px;
font-weight: 700; white-space: nowrap; }
.fs-badge.is-danger { background: var(--wo-danger-bg, #f3dbe5); color: var(--guide-danger); }
.fs-badge.is-caution { background: var(--wo-warning-bg, #f4e4ce); color: var(--guide-warning); }
.fs-badge.is-plain { background: var(--guide-mist); color: var(--guide-faint); }
.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; }
.fs-sig { border-left: 3px solid var(--guide-danger); padding: 2px 0 2px 12px; margin-bottom: 12px; }
.fs-sig-label { font: 800 13px/1.4 var(--body); color: var(--guide-danger); }
.fs-sig-line { margin-top: 3px; font-size: 11px; color: var(--guide-soft); white-space: pre-wrap;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; word-break: break-all; }
.fs-source-head { margin: 16px 0 8px; font: 800 12px/1 var(--body); letter-spacing: .07em;
text-transform: uppercase; color: var(--guide-faint); }
.fs-source { margin: 0; max-height: 340px; overflow: auto; padding: 12px 14px; border-radius: 10px;
border: 1px solid var(--guide-line); background: var(--guide-mist); color: var(--guide-ink);
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px;
line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.fs-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.fs-table th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
color: var(--guide-faint); font-weight: 700; padding: 6px 8px; border-bottom: 1px solid var(--guide-line-strong); }
.fs-table td { padding: 5px 8px; border-bottom: 1px solid var(--guide-line); vertical-align: top; }
.fs-table tr.is-risky td { background: var(--wo-danger-bg, #f3dbe5); }
.fs-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; word-break: break-all; }
.fs-scroll { max-height: 320px; overflow: auto; border: 1px solid var(--guide-line); border-radius: 10px; }
.fs-note { font-size: 12.5px; line-height: 1.6; color: var(--guide-soft); margin: 0; }
.fs-hash { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px;
word-break: break-all; color: var(--guide-ink); display: block; margin: 8px 0 12px; }
</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">File Shield</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>Check a file before you open it.</h1>
<p class="guide-lead"><strong>Download Shield only sees files that arrive through the browser, and it cannot
read them off the disk — it fingerprints the URL instead.</strong> Pick a file here and WardenOne reads
the actual bytes: what it really is, whether the name matches, and what is inside it.</p>
<div class="guide-hero-actions">
<a class="guide-btn primary" href="#scan">Scan a file</a>
<a class="guide-btn" href="history.html">Activity centre</a>
</div>
<div class="guide-pills" aria-label="How File Shield behaves">
<span>Reads the real file</span>
<span>Nothing is uploaded</span>
<span>Nothing is opened or run</span>
</div>
</div>
<aside class="guide-summary" aria-label="What it checks">
<div class="summary-label">What it reads</div>
<p class="summary-copy">The first bytes of the file, its tail, and — for archives — the index
listing what is inside. Archives are never extracted and programs are never run. For anything from
Discord, a USB stick, an email or another computer, this is the only part of WardenOne that can look
at it at all.</p>
</aside>
</div>
</section>
<section class="guide-section" id="scan">
<div class="guide-wrap">
<div class="guide-section-head">
<div><div class="guide-kicker">Local scan</div><h2>What it is, not what it is called.</h2></div>
<p>Everything on this page happens on your computer. The one step that talks to the internet is the
VirusTotal lookup at the bottom, which is a button, and it sends a hash rather than the file.</p>
</div>
<div class="fs-drop" id="drop">
<h3>Drop a file here</h3>
<p>Or pick one. Nothing is uploaded, opened or run — WardenOne only reads it.</p>
<button class="guide-btn primary" id="pick" type="button">Choose files</button>
<input type="file" id="picker" multiple hidden>
<div class="fs-progress" id="progress" hidden></div>
</div>
<p class="fs-note" id="empty" style="margin-top:18px;">No file scanned yet.</p>
<div class="fs-card" id="batch" style="margin-top:20px;" hidden>
<h3>Everything you picked</h3>
<p class="fs-note" id="batch-count" style="margin-bottom:12px;"></p>
<div class="fs-scroll">
<table class="fs-table">
<thead><tr><th style="width:64px;"></th><th style="width:38%;">Name</th><th>What it is</th></tr></thead>
<tbody id="batch-rows"></tbody>
</table>
</div>
</div>
<div id="result" hidden>
<div class="fs-verdict" id="verdict"></div>
<div style="margin:-6px 0 16px;"><button class="btn" id="copy-report" type="button">Copy report</button></div>
<div class="fs-grid">
<div class="fs-card">
<h3>The file</h3>
<dl class="fs-facts" id="facts"></dl>
</div>
<div class="fs-card">
<h3>What WardenOne found</h3>
<div id="findings"></div>
</div>
</div>
<div class="fs-card" id="pe-box" style="margin-top:20px;" hidden>
<h3>What this program is</h3>
<dl class="fs-facts" id="pe-facts"></dl>
<div class="fs-caps-head">What it is equipped to do</div>
<div class="fs-caps" id="pe-caps"></div>
<p class="fs-note" id="pe-caps-empty" hidden>It imports nothing that stands out. That is unusual for a real
program, and can mean the code is packed so its imports are hidden until it runs.</p>
<p class="fs-note" style="margin-top:12px;">Taken from the functions the program imports — what it
<strong>can</strong> do, not what it will. Installers legitimately need several of these. The gap worth
noticing is between what a file claims to be and what it is equipped for.</p>
</div>
<div class="fs-card" id="script-box" style="margin-top:20px;" hidden>
<h3 id="script-title">Script</h3>
<div id="script-signals"></div>
<p class="fs-note" id="script-clean" hidden>Nothing in it matched what WardenOne looks for. Read it
anyway — it is instructions for your computer, and it is short enough.</p>
<div class="fs-source-head">The file, as written</div>
<pre class="fs-source" id="script-source"></pre>
</div>
<div class="fs-card" id="lnk-box" style="margin-top:20px;" hidden>
<h3>What this shortcut actually runs</h3>
<dl class="fs-facts" id="lnk-facts"></dl>
<p class="fs-note" style="margin-top:12px;">A Windows shortcut stores a target and a command line. This is
read straight out of the file — it is what a double-click would run.</p>
</div>
<div class="fs-card" id="zip-box" style="margin-top:20px;" hidden>
<h3>Inside the archive</h3>
<p class="fs-note" id="zip-summary" style="margin-bottom:12px;"></p>
<div class="fs-scroll">
<table class="fs-table">
<thead><tr><th>Name</th><th style="width:96px;">Size</th><th style="width:70px;"></th></tr></thead>
<tbody id="zip-rows"></tbody>
</table>
</div>
</div>
<div class="fs-card" id="vt-box" style="margin-top:20px;" hidden>
<h3>Ask VirusTotal about this file</h3>
<p class="fs-note">This is the only part of the page that uses the network. It sends
<strong>this hash and nothing else</strong> — not the file, not its name:</p>
<code class="fs-hash" id="vt-hash"></code>
<p class="fs-note" style="margin-bottom:12px;">A hash identifies a file exactly. For something rare or
personal, sending it tells VirusTotal that someone has that exact file. That is why this is a button
and not automatic. It needs your own API key, set in the popup.</p>
<button class="guide-btn" id="vt-run" type="button">Look up the hash</button>
<p class="fs-note" id="vt-result" style="margin-top:12px;"></p>
</div>
</div>
<p class="fs-note" style="margin-top:22px;">File Shield reads structure, not behaviour. It can tell you a file
is disguised, carries code, or would write outside the folder you extract it into. It cannot tell you a file
is safe, and it is not antivirus — it does not watch your filesystem, quarantine anything, or replace
the protection already on this computer.</p>
</div>
</section>
</main>
<footer class="guide-footer">
<div class="guide-wrap guide-footer-inner">
<span><strong>Nothing leaves this computer</strong> unless you press the VirusTotal button.</span>
<span>Archives are read, never extracted.</span>
</div>
</footer>
<script src="file-shield.js"></script>
</body>
</html>