mockforge_bench/conformance/
capture_html.rs

1//! Browser-viewable HTML rendering of self-test request/response capture.
2//!
3//! Issue #79 round 24 (Srikanth (d) follow-up). `conformance-self-test-
4//! requests.jsonl` is great for `jq` and `grep`, but Srikanth asked for
5//! something that can be loaded in a browser without external tooling.
6//! This module renders the same `CaseCapture` records into a single
7//! self-contained HTML file (no external CSS / JS / images).
8//!
9//! Round 27 (Srikanth d3) — replaced the prior content-visibility +
10//! 1000-card cap approach with proper pagination. The 1000-card cap
11//! silently hid the 4xx/5xx probes Srikanth needed to investigate
12//! because they sat past the cap. The viewer now embeds the full
13//! capture as a JSON array (`window.__captures`), filters that array
14//! in JS, then renders only the current page (50 cards) of the
15//! filtered subset. Filters span ALL probes regardless of which page
16//! is visible, so paging never hides matching probes.
17
18use super::self_test::CaseCapture;
19
20/// Round 27 — page size for the paginated capture viewer. 50 cards
21/// per page keeps initial render under 100 ms on a modern browser
22/// while still showing enough context to scan a category at a glance.
23/// The full dataset is held in memory as JSON; only the slice is in
24/// the DOM at any time. Mirrored as `PAGE_SIZE` in the JS handler
25/// below; the test `pagination_controls_present` asserts the two
26/// stay in sync.
27#[allow(dead_code)] // documentation/contract for the JS-side constant
28const PAGE_SIZE: usize = 50;
29
30/// Render the full HTML viewer for a slice of captured probes.
31/// Bodies are kept verbatim (already truncated upstream to
32/// `CAPTURE_BODY_CAP_BYTES`). The whole capture is serialised as a
33/// JSON array embedded in a `<script>` tag and rendered on demand by
34/// the inline JS handler; cross-page filters work over the full
35/// array, not the visible page.
36pub fn render_capture_html(entries: &[CaseCapture]) -> String {
37    let total = entries.len();
38    let mut out = String::with_capacity(total.max(1) * 1024);
39    out.push_str(HEAD);
40    push_summary(&mut out, entries);
41    out.push_str("<div id=\"cards\"></div>\n");
42    push_pagination_controls(&mut out);
43    push_data_script(&mut out, entries);
44    out.push_str(FOOT);
45    out
46}
47
48fn push_summary(out: &mut String, entries: &[CaseCapture]) {
49    let total = entries.len();
50    let pass = entries.iter().filter(|e| (200..400).contains(&e.response_status)).count();
51    let fail = entries.iter().filter(|e| !(200..400).contains(&e.response_status)).count();
52    out.push_str(&format!(
53        "<header>\n\
54         <h1>Self-Test Request/Response Capture</h1>\n\
55         <p class=\"meta\">{total} probe(s); {pass} returned 2xx-3xx, {fail} returned 4xx-5xx or errored. \
56         Generated by <code>mockforge bench --conformance-self-test --conformance-self-test-capture</code>.</p>\n\
57         <div class=\"toolbar\">\n\
58         <input type=\"search\" id=\"q\" placeholder=\"filter by label, method, URL, or status\" oninput=\"scheduleFilter()\" />\n\
59         <label><input type=\"checkbox\" id=\"showPass\" checked onchange=\"applyFilter()\"/> 2xx-3xx</label>\n\
60         <label><input type=\"checkbox\" id=\"showFail\" checked onchange=\"applyFilter()\"/> 4xx-5xx</label>\n\
61         <label><input type=\"checkbox\" id=\"showErr\" checked onchange=\"applyFilter()\"/> transport error</label>\n\
62         <label><input type=\"checkbox\" id=\"onlyMismatches\" onchange=\"applyFilter()\"/> only show mismatches</label>\n\
63         <span id=\"filterStatus\" class=\"small\"></span>\n\
64         </div>\n\
65         </header>\n"
66    ));
67}
68
69fn push_pagination_controls(out: &mut String) {
70    out.push_str(
71        "<div class=\"pager\">\n\
72         <button id=\"firstPage\" onclick=\"gotoPage(0)\">First</button>\n\
73         <button id=\"prevPage\" onclick=\"gotoPage(currentPage - 1)\">Prev</button>\n\
74         <span id=\"pageNum\" class=\"pageNum\"></span>\n\
75         <button id=\"nextPage\" onclick=\"gotoPage(currentPage + 1)\">Next</button>\n\
76         <button id=\"lastPage\" onclick=\"gotoPage(totalPages - 1)\">Last</button>\n\
77         <label class=\"small\">Jump to page: <input type=\"number\" id=\"jumpPage\" min=\"1\" style=\"width: 5em\" onchange=\"jumpToPage()\" /></label>\n\
78         </div>\n",
79    );
80}
81
82/// Embed the full capture as a JSON array assigned to
83/// `window.__captures`. JSON.stringify with default escaping is
84/// XSS-safe inside a `<script>` tag as long as we don't have a
85/// closing `</script>` substring. `serde_json::to_string` does NOT
86/// escape `<`, so we post-process to break any literal `</` so the
87/// script element can't be terminated by the payload. The browser
88/// JS handler unescapes this back transparently.
89fn push_data_script(out: &mut String, entries: &[CaseCapture]) {
90    out.push_str("<script id=\"captureData\" type=\"application/json\">\n");
91    // Serialise to a single line for compactness. If serialisation
92    // somehow fails (shouldn't, the struct is all Serialize), embed
93    // an empty array so the viewer still loads.
94    let json = serde_json::to_string(entries).unwrap_or_else(|_| "[]".to_string());
95    // Defensive: protect against payload bodies containing
96    // `</script>`. The JSON `<` becomes `<` which is valid JSON
97    // and the JS parser accepts it.
98    let safe = json.replace("</", r"<\/");
99    out.push_str(&safe);
100    out.push_str("\n</script>\n");
101}
102
103const HEAD: &str = r#"<!doctype html>
104<html lang="en">
105<head>
106<meta charset="utf-8">
107<title>MockForge Self-Test Capture</title>
108<style>
109  body { font-family: -apple-system, system-ui, sans-serif; max-width: 1200px;
110         margin: 1rem auto; padding: 0 1rem; color: #1f2933; line-height: 1.45; }
111  h1 { font-size: 1.6rem; margin: 0; }
112  h3 { margin: 1rem 0 0.3rem; font-size: 0.95rem; color: #374151; }
113  header { border-bottom: 1px solid #e5e7eb; padding-bottom: 1rem; margin-bottom: 1rem; }
114  .meta { color: #6b7280; font-size: 0.9rem; margin: 0.25rem 0 0.75rem; }
115  .toolbar { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }
116  .toolbar input[type=search] { flex: 1; min-width: 240px; padding: 0.4rem 0.6rem;
117    border: 1px solid #d1d5db; border-radius: 4px; font-size: 0.9rem; }
118  .toolbar label { font-size: 0.85rem; color: #4b5563; cursor: pointer; }
119  .pager { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap;
120    margin: 0.75rem 0; padding: 0.5rem 0; border-top: 1px solid #e5e7eb;
121    border-bottom: 1px solid #e5e7eb; }
122  .pager button { padding: 0.25rem 0.75rem; font-size: 0.85rem;
123    border: 1px solid #d1d5db; background: #fff; border-radius: 4px; cursor: pointer; }
124  .pager button:hover:not(:disabled) { background: #f3f4f6; }
125  .pager button:disabled { opacity: 0.4; cursor: not-allowed; }
126  .pager .pageNum { font-size: 0.85rem; color: #4b5563; min-width: 6em;
127    text-align: center; font-variant-numeric: tabular-nums; }
128  details.card { border: 1px solid #e5e7eb; border-radius: 6px; margin: 0.4rem 0;
129    background: #fff; }
130  details.card[open] { box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
131  summary { padding: 0.5rem 0.75rem; cursor: pointer; display: flex; gap: 0.5rem;
132    align-items: center; flex-wrap: wrap; }
133  summary::-webkit-details-marker { color: #9ca3af; }
134  .method { background: #f3f4f6; padding: 0.05rem 0.4rem; border-radius: 3px;
135    font-size: 0.8rem; }
136  .label { color: #374151; font-size: 0.85rem; }
137  .url { color: #6b7280; font-size: 0.8rem; word-break: break-all; }
138  .body { padding: 0 0.75rem 0.75rem; border-top: 1px solid #f3f4f6; }
139  .badge { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px;
140    font-size: 0.75rem; font-weight: 600; }
141  .badge.pass { background: #d1fae5; color: #047857; }
142  .badge.fail { background: #fee2e2; color: #b91c1c; }
143  .badge.err  { background: #fef3c7; color: #92400e; }
144  .badge.info { background: #dbeafe; color: #1d4ed8; }
145  table.kv { width: 100%; font-size: 0.85rem; border-collapse: collapse;
146    margin: 0.25rem 0 0.75rem; }
147  table.kv td { padding: 0.2rem 0.5rem; border-bottom: 1px solid #f3f4f6; vertical-align: top; }
148  table.kv td:first-child { color: #4b5563; width: 30%; max-width: 280px; }
149  pre { background: #f9fafb; border: 1px solid #f3f4f6; padding: 0.5rem;
150    border-radius: 4px; font-size: 0.8rem; overflow-x: auto; white-space: pre-wrap;
151    word-break: break-word; max-height: 320px; overflow-y: auto; }
152  pre.err { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
153  .small { color: #6b7280; font-size: 0.75rem; }
154  code { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 0.88em; }
155</style>
156</head>
157<body>
158"#;
159
160const FOOT: &str = r#"
161<script>
162// Round 27 — pagination + cross-page filter over the JSON-embedded
163// full capture. The previous CSS-only show/hide approach silently
164// dropped 4xx/5xx probes past the 1000-card cap (Srikanth flagged
165// this on 0.3.169). Now the JS holds the full capture in memory,
166// filters across the whole array on every input, and only renders
167// the current page (PAGE_SIZE entries) of the filtered subset.
168
169const PAGE_SIZE = 50;
170let captures = [];
171try {
172  const raw = document.getElementById('captureData').textContent.trim();
173  captures = raw ? JSON.parse(raw) : [];
174} catch (e) {
175  document.getElementById('cards').innerHTML =
176    '<p class="small">Failed to load capture data: ' + e.message + '</p>';
177}
178let filtered = captures.slice();
179let currentPage = 0;
180let totalPages = Math.max(1, Math.ceil(filtered.length / PAGE_SIZE));
181
182function escapeHtml(s) {
183  if (s == null) return '';
184  return String(s)
185    .replace(/&/g, '&amp;')
186    .replace(/</g, '&lt;')
187    .replace(/>/g, '&gt;')
188    .replace(/"/g, '&quot;')
189    .replace(/'/g, '&#39;');
190}
191
192function statusClass(c) {
193  if (c.error) return 'err';
194  if (c.response_status >= 200 && c.response_status < 400) return 'pass';
195  if (c.response_status >= 400 && c.response_status < 600) return 'fail';
196  return 'info';
197}
198
199function renderKv(title, kv) {
200  const keys = kv ? Object.keys(kv).sort() : [];
201  if (keys.length === 0) {
202    return '<h3>' + escapeHtml(title) + '</h3><p class="small">(none)</p>';
203  }
204  let html = '<h3>' + escapeHtml(title) + '</h3><table class="kv"><tbody>';
205  for (const k of keys) {
206    html += '<tr><td><code>' + escapeHtml(k) + '</code></td><td><code>' +
207            escapeHtml(kv[k]) + '</code></td></tr>';
208  }
209  html += '</tbody></table>';
210  return html;
211}
212
213function renderBody(title, body, truncated) {
214  if (body == null) return '';
215  const suffix = truncated ? ' <span class="small">(truncated at 16 KiB)</span>' : '';
216  return '<h3>' + escapeHtml(title) + suffix + '</h3><pre>' + escapeHtml(body) + '</pre>';
217}
218
219// Round 28 (Srikanth) — true when the probe's actual status didn't
220// match its expected range. Used by the "only show mismatches" filter
221// AND by the summary badge so users can spot misses at a glance.
222function isMismatch(c) {
223  const expected = c.expected_status_range || '';
224  const s = c.response_status;
225  if (c.error) return true;
226  if (expected === '4xx') return !(s >= 400 && s < 500);
227  if (expected === '2xx-3xx') return !(s >= 200 && s < 400);
228  return false;
229}
230
231function renderCard(c) {
232  const cls = statusClass(c);
233  const statusText = c.error ? 'ERR' : String(c.response_status);
234  let html = '<details class="card">';
235  html += '<summary>';
236  html += '<span class="badge ' + cls + '">' + escapeHtml(statusText) + '</span> ';
237  // Round 28 — show the expected range alongside the actual status so
238  // a reader knows what the probe wanted to see without expanding the
239  // card.
240  if (c.expected_status_range) {
241    const matchCls = isMismatch(c) ? 'fail' : 'pass';
242    html += '<span class="badge ' + matchCls + '" title="expected status range">exp ' +
243            escapeHtml(c.expected_status_range) + '</span> ';
244  }
245  html += '<code class="method">' + escapeHtml(c.method) + '</code> ';
246  html += '<span class="label">' + escapeHtml(c.label) + '</span> ';
247  html += '<code class="url">' + escapeHtml(c.url) + '</code>';
248  html += '</summary><div class="body">';
249  html += renderKv('Request headers', c.request_headers);
250  html += renderBody('Request body', c.request_body, c.request_body_truncated);
251  html += renderKv('Response headers', c.response_headers);
252  html += renderBody('Response body', c.response_body, c.response_body_truncated);
253  if (c.error) {
254    html += '<h3>Transport error</h3><pre class="err">' + escapeHtml(c.error) + '</pre>';
255  }
256  if (c.response_schema_error) {
257    html += '<h3>Response schema mismatch</h3><pre class="err">' +
258            escapeHtml(c.response_schema_error) + '</pre>';
259  }
260  html += '</div></details>';
261  return html;
262}
263
264function renderPage() {
265  totalPages = Math.max(1, Math.ceil(filtered.length / PAGE_SIZE));
266  if (currentPage >= totalPages) currentPage = totalPages - 1;
267  if (currentPage < 0) currentPage = 0;
268  const start = currentPage * PAGE_SIZE;
269  const end = Math.min(start + PAGE_SIZE, filtered.length);
270  const slice = filtered.slice(start, end);
271  document.getElementById('cards').innerHTML = slice.map(renderCard).join('');
272  document.getElementById('pageNum').textContent =
273    'Page ' + (currentPage + 1) + ' / ' + totalPages +
274    ' (' + (filtered.length === 0 ? 0 : (start + 1)) + '-' + end +
275    ' of ' + filtered.length + ' filtered)';
276  document.getElementById('firstPage').disabled = currentPage === 0;
277  document.getElementById('prevPage').disabled = currentPage === 0;
278  document.getElementById('nextPage').disabled = currentPage >= totalPages - 1;
279  document.getElementById('lastPage').disabled = currentPage >= totalPages - 1;
280  document.getElementById('filterStatus').textContent =
281    filtered.length === captures.length ? '' :
282    '(' + filtered.length + ' of ' + captures.length + ' shown)';
283  document.getElementById('jumpPage').max = totalPages;
284  document.getElementById('jumpPage').value = currentPage + 1;
285  window.scrollTo({ top: 0, behavior: 'auto' });
286}
287
288function gotoPage(p) {
289  if (p < 0 || p >= totalPages) return;
290  currentPage = p;
291  renderPage();
292}
293
294function jumpToPage() {
295  const v = parseInt(document.getElementById('jumpPage').value, 10);
296  if (!isNaN(v)) gotoPage(v - 1);
297}
298
299let _filterTimer = null;
300function scheduleFilter() {
301  if (_filterTimer) clearTimeout(_filterTimer);
302  _filterTimer = setTimeout(applyFilter, 200);
303}
304
305function applyFilter() {
306  const q = document.getElementById('q').value.trim().toLowerCase();
307  const showPass = document.getElementById('showPass').checked;
308  const showFail = document.getElementById('showFail').checked;
309  const showErr = document.getElementById('showErr').checked;
310  const onlyMismatches = document.getElementById('onlyMismatches').checked;
311  filtered = captures.filter(function(c) {
312    // Round 28 — the mismatch filter runs FIRST so it composes
313    // naturally with the status checkboxes (e.g. "mismatches that
314    // are 4xx-5xx").
315    if (onlyMismatches && !isMismatch(c)) return false;
316    const cls = statusClass(c);
317    const statusOk = (cls === 'pass' && showPass) ||
318                     (cls === 'fail' && showFail) ||
319                     (cls === 'err' && showErr) ||
320                     (cls === 'info' && (showPass || showFail));
321    if (!statusOk) return false;
322    if (!q) return true;
323    const hay = ((c.label || '') + ' ' + (c.method || '') + ' ' +
324                 (c.url || '') + ' ' + (c.response_status || '')).toLowerCase();
325    return hay.indexOf(q) !== -1;
326  });
327  currentPage = 0;
328  renderPage();
329}
330
331// Initial render once the page loads.
332renderPage();
333</script>
334</body>
335</html>
336"#;
337
338#[cfg(test)]
339mod tests {
340    use super::*;
341    use std::collections::BTreeMap;
342
343    fn sample() -> Vec<CaseCapture> {
344        let mut req_h = BTreeMap::new();
345        req_h.insert("X-Forwarded-For".to_string(), "203.0.113.0".to_string());
346        let mut resp_h = BTreeMap::new();
347        resp_h.insert("content-type".to_string(), "application/json".to_string());
348        vec![
349            CaseCapture {
350                label: "positive".to_string(),
351                method: "GET".to_string(),
352                url: "http://target/users".to_string(),
353                request_headers: req_h.clone(),
354                request_body: None,
355                request_body_truncated: false,
356                response_status: 200,
357                response_headers: resp_h.clone(),
358                response_body: Some("{\"ok\":true}".to_string()),
359                response_body_truncated: false,
360                error: None,
361                response_schema_error: None,
362                expected_status_range: "2xx-3xx".to_string(),
363            },
364            CaseCapture {
365                label: "owasp:sqli".to_string(),
366                method: "GET".to_string(),
367                url: "http://target/users?id=' OR 1=1".to_string(),
368                request_headers: BTreeMap::new(),
369                request_body: None,
370                request_body_truncated: false,
371                response_status: 500,
372                response_headers: resp_h,
373                response_body: Some("[]".to_string()),
374                response_body_truncated: false,
375                error: None,
376                response_schema_error: None,
377                expected_status_range: "2xx-3xx".to_string(),
378            },
379        ]
380    }
381
382    #[test]
383    fn embeds_all_probes_as_json() {
384        let html = render_capture_html(&sample());
385        // The JSON data script holds the full capture.
386        assert!(html.contains("id=\"captureData\""));
387        // Both labels are present in the JSON payload.
388        assert!(html.contains("\"positive\""));
389        assert!(html.contains("\"owasp:sqli\""));
390    }
391
392    /// Round 27 — Srikanth's d3 follow-up was that the round-25
393    /// 1000-card cap hid 4xx/5xx probes past the cap. The fix is
394    /// pagination over the full capture. A capture WAY past the
395    /// old cap must still appear in the embedded data.
396    #[test]
397    fn no_silent_cap_past_one_thousand() {
398        let mut entries = Vec::with_capacity(1500);
399        for i in 0..1500 {
400            entries.push(CaseCapture {
401                label: format!("probe-{i}"),
402                method: "GET".into(),
403                url: format!("/path/{i}"),
404                request_headers: BTreeMap::new(),
405                request_body: None,
406                request_body_truncated: false,
407                response_status: if i % 4 == 0 { 500 } else { 200 },
408                response_headers: BTreeMap::new(),
409                response_body: None,
410                response_body_truncated: false,
411                error: None,
412                response_schema_error: None,
413                expected_status_range: "2xx-3xx".to_string(),
414            });
415        }
416        let html = render_capture_html(&entries);
417        // Probe past the old 1000 cap is still embedded.
418        assert!(html.contains("\"probe-1234\""));
419        assert!(html.contains("\"probe-1499\""));
420        // Per-card cap text is gone (we paginate instead).
421        assert!(!html.contains("Showing first 1000 of"));
422    }
423
424    #[test]
425    fn pagination_controls_present() {
426        let html = render_capture_html(&sample());
427        for id in [
428            "firstPage",
429            "prevPage",
430            "nextPage",
431            "lastPage",
432            "jumpPage",
433            "pageNum",
434        ] {
435            assert!(html.contains(id), "missing pagination control: {id}");
436        }
437        assert!(html.contains("PAGE_SIZE = 50"));
438    }
439
440    #[test]
441    fn empty_capture_still_produces_valid_html() {
442        let html = render_capture_html(&[]);
443        assert!(html.starts_with("<!doctype html>"));
444        assert!(html.contains("0 probe(s)"));
445        assert!(html.contains("</html>"));
446    }
447
448    #[test]
449    fn embedded_json_breaks_inline_script_terminators() {
450        // A payload body containing `</script>` could break out of
451        // the inline data <script> if we didn't escape it. The
452        // serialiser converts `</` to `<\/` so the JSON parser
453        // accepts it but no DOM parser sees a closing tag.
454        let entry = CaseCapture {
455            label: "label".into(),
456            method: "GET".into(),
457            url: "/x".into(),
458            request_headers: BTreeMap::new(),
459            request_body: None,
460            request_body_truncated: false,
461            response_status: 200,
462            response_headers: BTreeMap::new(),
463            response_body: Some("<script>alert(1)</script>".into()),
464            response_body_truncated: false,
465            error: None,
466            response_schema_error: None,
467            expected_status_range: "2xx-3xx".to_string(),
468        };
469        let html = render_capture_html(&[entry]);
470        assert!(
471            !html.contains("</script>alert(1)</script>"),
472            "raw `</script>` snuck into the embedded data"
473        );
474        assert!(html.contains("<\\/script>"), "missing escaped form");
475    }
476}
mockforge_bench/conformance/capture_html.rs

mockforge_bench/conformance/
capture_html.rs
