sigstore ui

Author: losfair

ui/README.md

@@ -1,14 +1,27 @@
-# Certificate Transparency Monitor
+# Transparency Search
 
-A web application for searching and monitoring SSL/TLS certificates from Certificate Transparency logs, similar to crt.sh. Built with Next.js and ClickHouse.
+A web application for searching and monitoring transparency data from Certificate Transparency logs and Sigstore Rekor logs. Built with Next.js and ClickHouse.
 
 ## Features
 
+### Certificate Transparency
 - **Multi-type Search**: Search certificates by domain name, common name, serial number, SHA-256 fingerprint, or issuer
 - **Detailed Certificate View**: View complete certificate information including subject, issuer, validity periods, and extensions
 - **Subject Alternative Names**: Display all SAN entries for certificates
 - **Certificate Transparency Logs**: Track which CT log each certificate was found in
-- **Responsive Design**: Works on desktop and mobile devices with dark mode support
+
+### Sigstore Search
+- **Data Hash Search**: Find entries by SHA-256 hash of signed artifacts
+- **Email Search**: Search by email addresses in both PGP and X.509 certificates
+- **X.509 Certificate Search**: Search by common name, Subject Alternative Names (SANs), or serial number
+- **PGP Signature Search**: Search by PGP key fingerprint or signer email
+- **Artifact URL Search**: Find entries by the URL of signed artifacts
+- **Detailed Entry View**: View complete Sigstore entry information including signature details, certificates, and metadata
+
+### General
+- **Sidebar Navigation**: Easy switching between Certificate Transparency and Sigstore search
+- **Responsive Design**: Works on desktop and mobile devices
+- **Real-time Search**: Fast search with loading states and error handling
 
 ## Tech Stack
 
@@ -20,7 +33,7 @@ A web application for searching and monitoring SSL/TLS certificates from Certifi
 ## Prerequisites
 
 - Node.js 18+ 
-- ClickHouse database with CT log data
+- ClickHouse database with CT log data and Sigstore Rekor data
 - Environment variables for ClickHouse connection
 
 ## Environment Variables
@@ -51,26 +64,48 @@ npm run dev
 
 ## Database Schema
 
-The application expects a ClickHouse table named `ct_log_entries` with the schema defined in `/schema.sql`. Key fields include:
+The application expects two ClickHouse tables defined in `/schema.sql`:
 
+### Certificate Transparency (`ct_log_entries`)
 - Certificate identifiers (SHA-256, serial number)
 - Subject and issuer information
 - Validity periods
 - Subject Alternative Names
 - Certificate extensions and key usage
 - CT log metadata
 
+### Sigstore Rekor (`rekor_log_entries`)
+- Entry metadata (UUID, tree ID, log index)
+- Signature format and data hashes
+- X.509 certificate information
+- PGP signature details
+- Artifact URLs and references
+
 ## API Endpoints
 
-### Get Certificate Details
+### Certificate Transparency
 ```
 GET /api/certificate/{sha256}
 ```
-
 Returns complete certificate information for a given SHA-256 fingerprint.
 
+### Sigstore Search
+```
+GET /api/sigstore/search?query={query}&type={type}&limit={limit}
+```
+Searches Sigstore entries by various criteria. Supported types:
+- `hash` - Data hash (SHA-256)
+- `email` - Email addresses in PGP or X.509 certificates
+- `x509_cn` - X.509 Common Name
+- `x509_san` - X.509 Subject Alternative Names
+- `x509_serial` - X.509 Serial Number
+- `pgp_fingerprint` - PGP Key Fingerprint
+- `pgp_email` - PGP Signer Email
+- `data_url` - Artifact URL
+
 ## Search Types
 
+### Certificate Transparency Search
 1. **Domain/SAN**: Search by domain name or Subject Alternative Name
    - Example: `example.com`, `*.example.com`
 
@@ -86,26 +121,58 @@ Returns complete certificate information for a given SHA-256 fingerprint.
 5. **Issuer**: Search by certificate issuer Common Name
    - Example: `Let's Encrypt Authority X3`
 
+### Sigstore Search
+1. **Data Hash**: Search by SHA-256 hash of signed artifacts
+   - Example: `e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855`
+
+2. **Any Email**: Search by email addresses in both PGP and X.509 certificates
+   - Example: `user@example.com`
+
+3. **X.509 Common Name**: Search by X.509 certificate Common Name
+   - Example: `github.com`
+
+4. **X.509 SAN**: Search by X.509 Subject Alternative Names
+   - Example: `example.com`
+
+5. **X.509 Serial**: Search by X.509 certificate serial number
+   - Example: `123456789abcdef`
+
+6. **PGP Fingerprint**: Search by PGP key fingerprint
+   - Example: `ABCD1234EFGH5678IJKL9012MNOP3456QRST7890`
+
+7. **PGP Email**: Search by PGP signer email address
+   - Example: `signer@example.com`
+
+8. **Artifact URL**: Search by the URL of signed artifacts
+   - Example: `https://github.com/owner/repo/releases`
+
 ## Project Structure
 
 ```
 ui/
 ├── app/
 │   ├── api/
-│   │   ├── search/route.ts          # Search API endpoint
-│   │   └── certificate/[sha256]/route.ts  # Certificate detail API
-│   ├── certificate/[sha256]/page.tsx # Certificate detail page
-│   ├── layout.tsx                   # Root layout
-│   ├── page.tsx                     # Main search page
-│   └── globals.css                  # Global styles
+│   │   ├── certificate/[sha256]/route.ts  # Certificate detail API
+│   │   └── sigstore/search/route.ts       # Sigstore search API
+│   ├── certificate/[sha256]/page.tsx      # Certificate detail page
+│   ├── sigstore/                          # Sigstore pages
+│   │   ├── page.tsx                       # Main Sigstore search page
+│   │   └── search/[query]/page.tsx        # Sigstore search results
+│   ├── search/[domain]/page.tsx           # CT search results
+│   ├── layout.tsx                         # Root layout with sidebar
+│   ├── page.tsx                           # Main CT search page
+│   └── globals.css                        # Global styles
 ├── components/
-│   ├── search-form.tsx              # Search interface
-│   └── certificate-list.tsx         # Certificate results list
+│   ├── search-form.tsx                    # CT search interface
+│   ├── sigstore-search-form.tsx           # Sigstore search interface
+│   ├── sigstore-results.tsx               # Sigstore results display
+│   └── certificate-list.tsx               # Certificate results list
 ├── lib/
-│   └── clickhouse.ts                # ClickHouse client configuration
+│   └── clickhouse.ts                      # ClickHouse client configuration
 ├── types/
-│   └── certificate.ts               # TypeScript interfaces
-└── public/                          # Static assets
+│   ├── certificate.ts                     # CT TypeScript interfaces
+│   └── sigstore.ts                        # Sigstore TypeScript interfaces
+└── public/                                # Static assets
 ```
 
 ## Development

ui/app/api/sigstore/search/route.ts

@@ -0,0 +1,162 @@
+import { NextRequest, NextResponse } from "next/server";
+import client from "@/lib/clickhouse";
+import { SigstoreEntry, SigstoreSearchQuery } from "@/types/sigstore";
+
+export async function GET(request: NextRequest) {
+  const searchParams = request.nextUrl.searchParams;
+  const query = searchParams.get("query");
+  const queryType = searchParams.get("type") as SigstoreSearchQuery["queryType"];
+  const limit = parseInt(searchParams.get("limit") || "100", 10);
+
+  if (!query || !queryType) {
+    return NextResponse.json(
+      { error: "Query and type parameters are required" },
+      { status: 400 }
+    );
+  }
+
+  try {
+    let whereClause = "";
+    const queryParams: Record<string, string> = {};
+
+    switch (queryType) {
+      case "hash":
+        whereClause = "data_hash_value = {query:String}";
+        queryParams.query = query;
+        break;
+      case "email":
+        whereClause = "(pgp_signer_email ILIKE {queryPattern:String} OR x509_sans HAS {query:String})";
+        queryParams.query = query;
+        queryParams.queryPattern = `%${query}%`;
+        break;
+      case "x509_cn":
+        whereClause = "x509_subject_cn ILIKE {queryPattern:String}";
+        queryParams.queryPattern = `%${query}%`;
+        break;
+      case "x509_san":
+        whereClause = "has(x509_sans, {query:String})";
+        queryParams.query = query;
+        break;
+      case "x509_serial":
+        whereClause = "x509_serial_number = {query:String}";
+        queryParams.query = query;
+        break;
+      case "pgp_fingerprint":
+        whereClause = "pgp_public_key_fingerprint = {query:String}";
+        queryParams.query = query.toUpperCase().replace(/\s/g, "");
+        break;
+      case "pgp_email":
+        whereClause = "pgp_signer_email ILIKE {queryPattern:String}";
+        queryParams.queryPattern = `%${query}%`;
+        break;
+      case "data_url":
+        whereClause = "data_url ILIKE {queryPattern:String}";
+        queryParams.queryPattern = `%${query}%`;
+        break;
+      default:
+        return NextResponse.json(
+          { error: "Invalid query type" },
+          { status: 400 }
+        );
+    }
+
+    const sql = `
+      SELECT 
+        tree_id,
+        log_index,
+        entry_uuid,
+        retrieval_timestamp,
+        integrated_time,
+        log_id,
+        kind,
+        api_version,
+        signature_format,
+        data_hash_algorithm,
+        data_hash_value,
+        data_url,
+        signature_url,
+        public_key_url,
+        x509_certificate_sha256,
+        x509_subject_dn,
+        x509_subject_cn,
+        x509_subject_organization,
+        x509_subject_ou,
+        x509_issuer_dn,
+        x509_issuer_cn,
+        x509_issuer_organization,
+        x509_issuer_ou,
+        x509_serial_number,
+        x509_not_before,
+        x509_not_after,
+        x509_sans,
+        x509_signature_algorithm,
+        x509_public_key_algorithm,
+        x509_public_key_size,
+        x509_is_ca,
+        x509_key_usage,
+        x509_extended_key_usage,
+        pgp_signature_hash,
+        pgp_public_key_fingerprint,
+        pgp_key_id,
+        pgp_signer_user_id,
+        pgp_signer_email,
+        pgp_signer_name,
+        pgp_key_algorithm,
+        pgp_key_size,
+        pgp_subkey_fingerprints
+      FROM rekor_log_entries 
+      WHERE ${whereClause}
+      ORDER BY integrated_time DESC
+      LIMIT {limit:UInt32}
+      SETTINGS max_execution_time = 30, max_threads = 1, max_memory_usage = 268435456
+    `;
+
+    const resultSet = await client.query({
+      query: sql,
+      query_params: {
+        ...queryParams,
+        limit: limit,
+      },
+      format: "JSONEachRow",
+    });
+
+    const entries = await resultSet.json<SigstoreEntry>();
+
+    // Extract statistics from ClickHouse response headers
+    const headers = resultSet.response_headers;
+    const summaryHeader = headers["x-clickhouse-summary"];
+    const summaryValue = Array.isArray(summaryHeader)
+      ? summaryHeader[0]
+      : summaryHeader;
+
+    let statistics = undefined;
+
+    if (summaryValue) {
+      try {
+        const summary = JSON.parse(summaryValue);
+        statistics = {
+          elapsed: parseFloat(summary.elapsed_ns || "0") / 1000000000, // Convert nanoseconds to seconds
+          rows_read: parseInt(summary.read_rows || "0"),
+          bytes_read: parseInt(summary.read_bytes || "0"),
+        };
+      } catch (error) {
+        console.error("Failed to parse ClickHouse summary:", error);
+      }
+    }
+
+    return NextResponse.json({
+      entries,
+      count: entries.length,
+      query,
+      queryType,
+      limit,
+      statistics,
+    });
+  } catch (error) {
+    console.error("Sigstore search error:", error);
+    return NextResponse.json(
+      { error: "Internal server error" },
+      { status: 500 }
+    );
+  }
+}

ui/app/layout.tsx

@@ -1,5 +1,6 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
+import Link from "next/link";
 import "./globals.css";
 
 const geistSans = Geist({
@@ -13,9 +14,9 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-  title: "Certificate Search",
+  title: "Transparency Search",
   description:
-    "Search SSL/TLS certificates from Certificate Transparency logs",
+    "Search SSL/TLS certificates and Sigstore entries from transparency logs",
 };
 
 export default function RootLayout({
@@ -28,7 +29,36 @@ export default function RootLayout({
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
-        {children}
+        <div className="flex h-screen">
+          <nav className="w-64 bg-gray-50 border-r border-gray-200 p-6">
+            <div className="mb-8">
+              <h1 className="text-xl font-semibold text-gray-900">
+                Transparency Search
+              </h1>
+            </div>
+            <ul className="space-y-2">
+              <li>
+                <Link
+                  href="/"
+                  className="block px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100"
+                >
+                  Certificate Transparency
+                </Link>
+              </li>
+              <li>
+                <Link
+                  href="/sigstore"
+                  className="block px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100"
+                >
+                  Sigstore
+                </Link>
+              </li>
+            </ul>
+          </nav>
+          <main className="flex-1 overflow-auto">
+            {children}
+          </main>
+        </div>
       </body>
     </html>
   );