DEV Community

Shresth Paul
Shresth Paul

Posted on

VulnFeed 2.0: Building a Zero-Server Vulnerability Dashboard (Level 2 Release)

#security #vulnerabilities #opensource #devops

DEV.TO ARTICLE

Hey dev community! 👋

We just shipped Level 2 of our vulnerability intelligence project, and I'm excited to share what we built and how it works technically.

The Problem

Most vulnerability dashboards are either:

  • Too expensive - Enterprise SaaS tools with high price tags
  • Too limited - Focused on one ecosystem or distribution
  • Privacy nightmares - Track your data, your queries, your team
  • Too complex - Require backend infrastructure to maintain

We wanted something radically different.

Enter Onyx Intelligence

Onyx is a completely static, zero-server vulnerability dashboard that aggregates data from 25+ sources (CISA, Red Hat, all major Linux distros, npm, PyPI, Maven, RubyGems, Cargo, Composer, etc.) into one beautiful, interactive interface.

Think of it as the Level 2 evolution of VulnFeed — everything you loved, but supercharged.

Key Stats:

  • 📊 25+ vulnerability data sources
  • 🔄 Auto-updates every 6 hours via GitHub Actions
  • 🏗️ Zero backend required (GitHub Pages deployment)
  • 🔒 Zero tracking, zero data collection
  • 🎨 Beautiful glassmorphism UI with light/dark themes
  • 📱 Fully responsive (mobile, tablet, desktop)
  • 🧠 Asset exposure scanning (optional)

How It Works (The Tech)

The Data Collection Pipeline

Everything starts with a scheduled GitHub Actions workflow that runs every 6 hours:

# .github/workflows/osv-feed-update.yml
schedule:
  - cron: '0 */6 * * *'  # Every 6 hours
Enter fullscreen mode Exit fullscreen mode

Here's what happens behind the scenes:

# scripts/fetch_osv_data.py
import requests
import json
from datetime import datetime

# Fetch from OSV.dev for all ecosystems
ecosystems = ['npm', 'PyPI', 'Maven', 'Cargo', 'Go', 'NuGet', 'Composer', 'RubyGems']

for ecosystem in ecosystems:
    response = requests.get(f'https://api.osv.dev/v1/query', 
        json={'package': {'ecosystem': ecosystem}})

    # Validate and deduplicate
    vulnerabilities = response.json()

    # Store as clean JSON
    with open(f'data/{ecosystem.lower()}.json', 'w') as f:
        json.dump(vulnerabilities, f)

# Also fetch CISA KEV, Red Hat, Linux distros
# Everything gets merged, validated, and deployed
Enter fullscreen mode Exit fullscreen mode

The output? Clean, structured JSON files ready for your frontend to consume.

Frontend Rendering

On the client side, it's pure vanilla JavaScript with no frameworks or bloat:

// Load vulnerability data from static JSON files
async function loadVulnerabilities() {
    const response = await fetch('/data/vulnerabilities.json');
    return response.json();
}

// Build interactive visualizations with Chart.js
function renderSeverityChart(vulnerabilities) {
    const severityData = {
        labels: ['Critical', 'High', 'Medium', 'Low'],
        datasets: [{
            data: [
                vulnerabilities.filter(v => v.severity === 'CRITICAL').length,
                vulnerabilities.filter(v => v.severity === 'HIGH').length,
                vulnerabilities.filter(v => v.severity === 'MEDIUM').length,
                vulnerabilities.filter(v => v.severity === 'LOW').length
            ]
        }]
    };

    new Chart(ctx, { type: 'doughnut', data: severityData });
}

// Real-time filtering and search (no backend calls!)
function searchVulnerabilities(query, severity, days) {
    return vulnerabilities.filter(v => 
        (v.description.toLowerCase().includes(query.toLowerCase()) ||
         v.id.includes(query)) &&
        (severity === 'ALL' || v.severity === severity) &&
        (isWithinDays(v.published, days))
    );
}
Enter fullscreen mode Exit fullscreen mode

No API calls. No server requests. Just static assets and client-side logic doing the heavy lifting.

Deployment Magic

The deployment is almost magical in its simplicity:

  1. Commit changes to your fork
  2. GitHub Actions workflow triggers automatically
  3. Python scripts fetch fresh data
  4. Static HTML/CSS/JS gets generated
  5. Deployed to GitHub Pages automatically

Your dashboard is live at: yourusername.github.io/Onyx-Intelligence/

Key Features We Built

✅ Multi-Source Aggregation

Instead of maintaining 25 browser tabs for different vulnerability sources, everything lives in one place:

// Single search across CISA, Red Hat, npm, PyPI, Maven, etc.
const allVulnerabilities = [
    ...cisaKEV,
    ...redHatAdvisories,
    ...npmVulnerabilities,
    ...pypiVulnerabilities,
    ...mavenVulnerabilities,
    // ... 20+ more sources
];

// Now search once and get results from everywhere
const results = allVulnerabilities.filter(v =>
    v.id.includes('CVE-2024-') || 
    v.packages.includes('lodash') ||
    v.source === 'CISA'
);
Enter fullscreen mode Exit fullscreen mode

✅ Smart Filtering

Advanced filters without the backend complexity:

// Critical vulnerabilities from the last 30 days
const criticalRecent = vulnerabilities.filter(v =>
    v.cvss >= 7.0 && 
    daysOld(v.published) <= 30 &&
    v.status === 'EXPLOITED'
);

// Filter by ecosystem
const npmVulns = vulnerabilities.filter(v => 
    v.ecosystem === 'npm'
);

// Combine filters
const targetedResults = vulnerabilities.filter(v =>
    (v.severity === 'CRITICAL' || v.severity === 'HIGH') &&
    v.ecosystem.includes('Linux') &&
    daysOld(v.published) <= 7
);
Enter fullscreen mode Exit fullscreen mode

✅ Asset Exposure Scanner

Optional feature that scans IPs and domains against multiple intelligence sources:

// Scan an IP against Censys, Shodan, AbuseIPDB, VirusTotal
async function scanAsset(ipOrDomain) {
    const results = await Promise.all([
        fetch(`/api/scan?ip=${ipOrDomain}&provider=censys`),
        fetch(`/api/scan?ip=${ipOrDomain}&provider=shodan`),
        fetch(`/api/scan?ip=${ipOrDomain}&provider=abuseipdb`),
        fetch(`/api/scan?ip=${ipOrDomain}&provider=virustotal`)
    ]);

    return {
        censys: await results[0].json(),
        shodan: await results[1].json(),
        abuseipdb: await results[2].json(),
        virustotal: await results[3].json()
    };
}
Enter fullscreen mode Exit fullscreen mode

API keys? Stored safely in GitHub Secrets - never exposed in frontend code.

✅ Privacy by Design

Zero tracking. Zero data collection. Just pure, honest software:

// Only localStorage for theme preference
localStorage.setItem('theme', 'dark');
localStorage.setItem('lastViewed', 'npm');

// Everything else is session-only, in-memory
const sessionData = {
    currentFilters: { severity: 'HIGH', days: 30 },
    selectedVulnerability: null
};

// No Google Analytics
// No Mixpanel
// No Segment
// No data collection whatsoever
Enter fullscreen mode Exit fullscreen mode

✅ Beautiful UI

We didn't just build a tool — we built something that looks premium:

/* Glassmorphism cards */
.vulnerability-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.vulnerability-card:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .vulnerability-card {
        background: rgba(30, 27, 75, 0.2);
        border-color: rgba(255, 255, 255, 0.1);
    }
}

/* Responsive grid */
@media (max-width: 768px) {
    .grid {
        grid-template-columns: 1fr;
    }
}
Enter fullscreen mode Exit fullscreen mode

Smooth animations. Light and dark themes. Fully responsive.

Getting Started (Seriously, 5 Minutes)

Step 1: Fork the Repository

Just hit that fork button on GitHub. We'll wait.

Step 2: Enable GitHub Actions 

Settings → Actions → General
→ Set workflow permissions to "Read and write"
→ Check "Allow GitHub Actions to create pull requests"
Enter fullscreen mode Exit fullscreen mode

Step 3: Enable GitHub Pages 

Settings → Pages
→ Source: GitHub Actions
Enter fullscreen mode Exit fullscreen mode

Step 4: Trigger the Workflow 

Actions → "🔄 Onyx OSV Intelligence Feed"
→ Run workflow
Enter fullscreen mode Exit fullscreen mode

Watch it fetch 25+ data sources and build your dashboard.

Step 5: Visit Your Dashboard 

https://yourusername.github.io/Onyx-Intelligence/
Enter fullscreen mode Exit fullscreen mode

Done. Your enterprise-grade vulnerability dashboard is live.

Bonus: Enable Asset Scanning

Add your API keys (optional):

Settings → Secrets and variables → Actions
Enter fullscreen mode Exit fullscreen mode

Add these secrets:

  • CENSYS_API_ID
  • CENSYS_API_SECRET
  • SHODAN_API_KEY
  • ABUSEIPDB_API_KEY
  • VIRUSTOTAL_API_KEY

Now you have advanced asset exposure scanning too.

Tech Stack Breakdown

  • Frontend: Vanilla JavaScript (no React, Vue, Svelte — just pure JS)
  • Styling: CSS3 with glassmorphism effects
  • Charts: Chart.js for visualizations
  • Automation: GitHub Actions
  • Data Processing: Python 3.11
  • Hosting: GitHub Pages (free, reliable, zero maintenance)

Intentionally simple. Intentionally dependency-light.

Customization is Easy

Change Update Frequency

Want updates every 12 hours instead of 6?

# .github/workflows/osv-feed-update.yml
schedule:
  - cron: '0 */12 * * *'  # Every 12 hours
Enter fullscreen mode Exit fullscreen mode

Or daily:

schedule:
  - cron: '0 0 * * *'  # Daily at midnight
Enter fullscreen mode Exit fullscreen mode

Add a New Ecosystem 

# scripts/fetch_osv_data.py
OSV_ECOSYSTEMS = [
    'AlmaLinux',
    'Debian',
    'Ubuntu',
    'YourCustomEcosystem',  # Add it here
]
Enter fullscreen mode Exit fullscreen mode

Customize Colors 

:root[data-theme="light"] {
    --accent: #6366f1;
    --accent-hover: #4f46e5;
    --background: #ffffff;
    --text: #1f2937;
}

:root[data-theme="dark"] {
    --accent: #818cf8;
    --accent-hover: #6366f1;
    --background: #0f172a;
    --text: #f1f5f9;
}
Enter fullscreen mode Exit fullscreen mode

Everything is designed for customization without complexity.

Real-World Use Cases

Security Teams: Centralized threat tracking, CISA BOD 22-01 compliance, patch prioritization workflows

DevOps Engineers: Monitor vulnerabilities in your infrastructure and dependencies, automated alerts

System Admins: Track patches across heterogeneous Linux environments, prioritize updates

Security Researchers: Analyze vulnerability trends, track exploits, cross-ecosystem correlation

Solo Developers: Stay updated on vulnerabilities in your tech stack without SaaS costs

CTOs/Leadership: Executive dashboard showing your security posture in real-time

The Roadmap (Level 2.x)

We're actively developing:

  • [ ] SBOM (Software Bill of Materials) upload and analysis
  • [ ] MITRE ATT&CK mapping - link CVEs to attack techniques
  • [ ] Email and Webhook notifications for critical vulnerabilities
  • [ ] Custom dashboard configurations per team
  • [ ] Historical vulnerability timeline analysis
  • [ ] REST API for integration with your tools
  • [ ] Browser extension for quick CVE lookups
  • [ ] Local agent for air-gapped environments

The Philosophy Behind Onyx

We believe vulnerability management should be:

  • Free - No SaaS costs, no licensing fees
  • Private - No data collection, no tracking, no surveillance
  • Simple - No complex infrastructure to maintain
  • Powerful - Enterprise features without enterprise complexity
  • Open - Fully auditable code, complete transparency

Onyx proves you don't have to sacrifice any of these.

What Sets This Apart from VulnFeed

VulnFeed was good. Onyx is great because:

  • Multi-ecosystem - 25+ data sources vs limited scope
  • Beautiful UI - Modern glassmorphism design
  • Asset scanning - IP/domain intelligence built-in
  • Better automation - More frequent updates, easier customization
  • More sources - CISA, Red Hat, all major Linux distros, package managers
  • Advanced analytics - Interactive charts and visualizations
  • Better search - Across all sources simultaneously

It's a complete evolution.

Get Involved

Try the live demo: No installation needed, just visit and explore

Fork the repository: Run your own instance in minutes

Open an issue: Found a bug? Have an idea? Let us know

Contribute: Help us expand features, improve UI, add data sources

Spread the word: Share with your team, write about your experience, give us a ⭐

This is what enterprise vulnerability management should look like: simple, beautiful, private, and free.

No compromises. No bullshit.

Just pure, powerful vulnerability intelligence built for the security community.

Ready to level up? Fork the repo and deploy your dashboard today.

Top comments (0)