@basaltkit/audit-viewer 1.0.1 → 1.1.0

package/README.md

@@ -81,6 +81,16 @@ Registers the `AUDIT_VIEWER` token. `bucketMs` is the timeline bucket size (defa
 
 > Note: the extra filtering (source/until) and the aggregation happen in memory over the result of `Audit.trail`. For very large trails, use an `AuditStore` with rich database querying.
 
+## Content-Security-Policy
+
+The route sets a route-scoped CSP by default: everything locked down and the
+page's inline script allowed only by sha256 hash (exported as `auditViewerCsp`). It
+works under `securityPlugin`'s strict app-wide CSP — do not disable CSP
+globally. Override with `csp: '…'` or opt out with `csp: false`; if you serve
+the raw HTML string yourself, set the matching CSP header on that route.
+Server-side inputs are HTML-escaped and embedded state cannot terminate the
+script block.
+
 ## How it connects to other modules
 
 - **`@basaltkit/audit`** — the immutable source of the trail (this module only reads it).

package/dist/html.d.ts

@@ -3,6 +3,13 @@ export interface AuditViewerHtmlOptions {
     apiBase?: string;
     title?: string;
 }
+/**
+ * The Content-Security-Policy matching {@link auditViewerHtml}: everything
+ * locked down, the page's inline script allowed by sha256 hash. Served by
+ * default from `auditViewerRoutes` so the page works under `securityPlugin`
+ * without weakening the app-wide policy.
+ */
+export declare function auditViewerCsp(options?: AuditViewerHtmlOptions): string;
 /**
  * A self-contained HTML page (no dependencies, no build) that browses the audit
  * trail by calling `GET {apiBase}/audit` and `/audit/stats`. Serve it from a

package/dist/html.js

@@ -1,3 +1,49 @@
+import { escapeHtml, pageCsp, scriptJson } from '@basaltkit/http';
+// The inline script, built separately so the page and its CSP hash (see
+// auditViewerCsp) come from the exact same source text. Embedded state uses
+// scriptJson (cannot terminate the script block); API responses render through
+// esc(), whose charset includes quotes for attribute positions.
+const pageScript = (apiBase) => `
+const API = ${scriptJson(apiBase)};
+let offset = 0; const LIMIT = 50;
+const esc = (s) => String(s == null ? '' : s).replace(/[&<>"']/g, (c) => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
+function params() {
+  const f = new FormData(document.getElementById('filters'));
+  const q = new URLSearchParams();
+  for (const [k, v] of f) if (v) q.set(k, v);
+  q.set('limit', LIMIT); q.set('offset', offset);
+  return q.toString();
+}
+async function load() {
+  const [page, stats] = await Promise.all([
+    fetch(API + '/audit?' + params()).then((r) => r.json()),
+    fetch(API + '/audit/stats?' + params()).then((r) => r.json()),
+  ]);
+  document.getElementById('rows').innerHTML = (page.entries || []).map((e) =>
+    '<tr><td class="muted">' + new Date(e.at).toLocaleString() + '</td><td><code>' + esc(e.event) +
+    '</code></td><td>' + esc(e.source) + '</td><td>' + esc(e.actorId || '') + '</td></tr>').join('');
+  const top = (stats.byEvent || []).slice(0, 3).map((x) => esc(x.event) + ' (' + x.count + ')').join(', ');
+  document.getElementById('stats').innerHTML = '<span><b>' + (stats.total || 0) + '</b> entries</span>' + (top ? '<span>Top: ' + top + '</span>' : '');
+  document.getElementById('page').textContent = 'showing ' + offset + '–' + (offset + (page.entries || []).length) + ' of ' + (page.total || 0);
+}
+document.getElementById('filters').addEventListener('submit', (e) => { e.preventDefault(); offset = 0; load(); });
+document.getElementById('next').addEventListener('click', () => { offset += LIMIT; load(); });
+document.getElementById('prev').addEventListener('click', () => { offset = Math.max(0, offset - LIMIT); load(); });
+load();
+`;
+/**
+ * The Content-Security-Policy matching {@link auditViewerHtml}: everything
+ * locked down, the page's inline script allowed by sha256 hash. Served by
+ * default from `auditViewerRoutes` so the page works under `securityPlugin`
+ * without weakening the app-wide policy.
+ */
+export function auditViewerCsp(options = {}) {
+    const apiBase = options.apiBase ?? '';
+    return pageCsp({
+        scripts: [pageScript(apiBase)],
+        ...(/^https?:\/\//.test(apiBase) ? { connect: [new URL(apiBase).origin] } : {}),
+    });
+}
 /**
  * A self-contained HTML page (no dependencies, no build) that browses the audit
  * trail by calling `GET {apiBase}/audit` and `/audit/stats`. Serve it from a
@@ -5,7 +51,7 @@
  */
 export function auditViewerHtml(options = {}) {
     const apiBase = options.apiBase ?? '';
-    const title = options.title ?? 'Audit trail';
+    const title = escapeHtml(options.title ?? 'Audit trail');
     return `<!doctype html>
 <html lang="en">
 <head>
@@ -39,34 +85,7 @@ export function auditViewerHtml(options = {}) {
 <div id="stats"></div>
 <table><thead><tr><th>When</th><th>Event</th><th>Source</th><th>Actor</th></tr></thead><tbody id="rows"></tbody></table>
 <div class="nav"><button id="prev">Prev</button><span id="page" class="muted"></span><button id="next">Next</button></div>
-<script>
-const API = ${JSON.stringify(apiBase)};
-let offset = 0; const LIMIT = 50;
-const esc = (s) => String(s == null ? '' : s).replace(/[&<>]/g, (c) => ({'&':'&amp;','<':'&lt;','>':'&gt;'}[c]));
-function params() {
-  const f = new FormData(document.getElementById('filters'));
-  const q = new URLSearchParams();
-  for (const [k, v] of f) if (v) q.set(k, v);
-  q.set('limit', LIMIT); q.set('offset', offset);
-  return q.toString();
-}
-async function load() {
-  const [page, stats] = await Promise.all([
-    fetch(API + '/audit?' + params()).then((r) => r.json()),
-    fetch(API + '/audit/stats?' + params()).then((r) => r.json()),
-  ]);
-  document.getElementById('rows').innerHTML = (page.entries || []).map((e) =>
-    '<tr><td class="muted">' + new Date(e.at).toLocaleString() + '</td><td><code>' + esc(e.event) +
-    '</code></td><td>' + esc(e.source) + '</td><td>' + esc(e.actorId || '') + '</td></tr>').join('');
-  const top = (stats.byEvent || []).slice(0, 3).map((x) => esc(x.event) + ' (' + x.count + ')').join(', ');
-  document.getElementById('stats').innerHTML = '<span><b>' + (stats.total || 0) + '</b> entries</span>' + (top ? '<span>Top: ' + top + '</span>' : '');
-  document.getElementById('page').textContent = 'showing ' + offset + '–' + (offset + (page.entries || []).length) + ' of ' + (page.total || 0);
-}
-document.getElementById('filters').addEventListener('submit', (e) => { e.preventDefault(); offset = 0; load(); });
-document.getElementById('next').addEventListener('click', () => { offset += LIMIT; load(); });
-document.getElementById('prev').addEventListener('click', () => { offset = Math.max(0, offset - LIMIT); load(); });
-load();
-</script>
+<script>${pageScript(apiBase)}</script>
 </body>
 </html>`;
 }

package/dist/index.d.ts

@@ -1,3 +1,3 @@
 export { AuditViewer, AuditTenantRequiredError, type ViewerQuery, type AuditPage, type AuditStats, type AuditViewerOptions, } from './viewer.js';
-export { auditViewerHtml, type AuditViewerHtmlOptions } from './html.js';
-export { auditViewerPlugin, auditViewerRoutes, AUDIT_VIEWER, type AuditViewerPluginOptions, } from './plugin.js';
+export { auditViewerCsp, auditViewerHtml, type AuditViewerHtmlOptions } from './html.js';
+export { auditViewerPlugin, auditViewerRoutes, AUDIT_VIEWER, type AuditViewerPluginOptions, type AuditViewerRoutesOptions, } from './plugin.js';

package/dist/index.js

@@ -1,3 +1,3 @@
 export { AuditViewer, AuditTenantRequiredError, } from './viewer.js';
-export { auditViewerHtml } from './html.js';
+export { auditViewerCsp, auditViewerHtml } from './html.js';
 export { auditViewerPlugin, auditViewerRoutes, AUDIT_VIEWER, } from './plugin.js';

package/dist/plugin.d.ts

@@ -1,12 +1,19 @@
-import { type BasaltRoute } from '@basaltkit/fastify';
+import { type BasaltRoute } from '@basaltkit/http';
 import { AuditViewer, type AuditViewerOptions } from './viewer.js';
 import { type AuditViewerHtmlOptions } from './html.js';
 export declare const AUDIT_VIEWER: import("@basaltkit/core").Token<AuditViewer>;
 export type AuditViewerPluginOptions = AuditViewerOptions;
 export declare function auditViewerPlugin(options?: AuditViewerPluginOptions): import("@basaltkit/core").BasaltPlugin<unknown>;
+export interface AuditViewerRoutesOptions extends AuditViewerHtmlOptions {
+    /**
+     * Content-Security-Policy for the HTML page. Default: the hash-locked
+     * {@link auditViewerCsp}. Pass a string to override, or `false` to send none.
+     */
+    csp?: string | false;
+}
 /**
  * Read-only audit routes for the current tenant, requiring a logged-in user
  * (add your own admin guard on top): `GET /audit`, `/audit/stats`,
  * `/audit/:id`, and a browsable HTML page at `/audit/view`.
  */
-export declare function auditViewerRoutes(options?: AuditViewerHtmlOptions): BasaltRoute[];
+export declare function auditViewerRoutes(options?: AuditViewerRoutesOptions): BasaltRoute[];

package/dist/plugin.js

@@ -1,9 +1,9 @@
 import { createToken, ctx, definePlugin } from '@basaltkit/core';
 import { AUDIT } from '@basaltkit/audit';
-import { route } from '@basaltkit/fastify';
+import { route } from '@basaltkit/http';
 import { z } from 'zod';
 import { AuditViewer } from './viewer.js';
-import { auditViewerHtml } from './html.js';
+import { auditViewerCsp, auditViewerHtml } from './html.js';
 export const AUDIT_VIEWER = createToken('audit:viewer');
 export function auditViewerPlugin(options = {}) {
     return definePlugin({
@@ -38,6 +38,7 @@ const toQuery = (q) => ({
  * `/audit/:id`, and a browsable HTML page at `/audit/view`.
  */
 export function auditViewerRoutes(options = {}) {
+    const csp = options.csp === false ? undefined : (options.csp ?? auditViewerCsp(options));
     return [
         route({
             method: 'GET',
@@ -62,6 +63,8 @@ export function auditViewerRoutes(options = {}) {
             url: '/audit/view',
             meta: { auth: true },
             async handler({ reply }) {
+                if (csp !== undefined)
+                    reply.header('content-security-policy', csp);
                 return reply.header('content-type', 'text/html; charset=utf-8').send(auditViewerHtml(options));
             },
         }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@basaltkit/audit-viewer",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "Read-only viewer for the @basaltkit/audit trail: tenant-scoped, filterable, paginated queries with aggregate stats, plus a self-contained HTML browser.",
   "license": "MIT",
   "type": "module",
@@ -14,9 +14,9 @@
     "dist"
   ],
   "dependencies": {
-    "@basaltkit/core": "^1.1.2",
-    "@basaltkit/fastify": "^1.6.1",
-    "@basaltkit/audit": "^1.2.2"
+    "@basaltkit/audit": "^1.2.2",
+    "@basaltkit/core": "^1.3.0",
+    "@basaltkit/http": "^1.11.0"
   },
   "peerDependencies": {
     "zod": "^3.24.0 || ^4.0.0"
@@ -26,8 +26,9 @@
     "typescript": "^7.0.2",
     "vitest": "^4.1.11",
     "zod": "^3.24.0 || ^4.0.0",
-    "@basaltkit/auth": "^1.6.2",
-    "@basaltkit/tenancy": "^1.3.3",
+    "@basaltkit/auth": "^1.6.3",
+    "@basaltkit/fastify": "^1.7.0",
+    "@basaltkit/tenancy": "^1.4.0",
     "@basaltkit/tsconfig": "^0.24.0"
   },
   "publishConfig": {