@hailbytes/pentest-calculator
v1.0.0
Published
Zero-dependency web component for scoping and estimating penetration testing engagements. Works in Hugo, React, Vue, or plain HTML.
Maintainers
davidmchaleReadme
HailBytes Penetration Testing Scope Calculator
A zero-dependency web component for scoping and estimating penetration testing engagements. Three-step wizard covering target scope, testing depth, compliance requirements, and deliverables — produces a day/cost estimate in the browser with no server required.
Works as a single <script> tag inside Hugo, React, Vue, Next.js, or plain HTML — or install via npm.
Install
npm install @hailbytes/pentest-calculatorOr use it without a bundler via a CDN (see below).
Quick Start
npm (bundlers, Next.js, Vite, Webpack, etc.)
// Side-effect import registers the <pentest-calculator> custom element.
import '@hailbytes/pentest-calculator';<pentest-calculator theme="dark"></pentest-calculator>
<!-- White-label (no HailBytes branding) -->
<pentest-calculator theme="dark" branding="off"></pentest-calculator>Plain script tag
<!-- 1. Load the component -->
<script type="module" src="pentest-calculator.js"></script>
<!-- 2. Drop the tag anywhere -->
<pentest-calculator></pentest-calculator>Integration Examples
Plain HTML / Hugo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Pentest Scope Calculator</title>
</head>
<body>
<pentest-calculator theme="dark"></pentest-calculator>
<script type="module" src="https://cdn.jsdelivr.net/gh/HailBytes/pentest-calculator@main/pentest-calculator.js"></script>
</body>
</html>Hugo shortcode (layouts/shortcodes/pentest-calculator.html):
<script type="module" src="https://cdn.jsdelivr.net/gh/HailBytes/pentest-calculator@main/pentest-calculator.js"></script>
<pentest-calculator theme="{{ .Get "theme" | default "dark" }}"></pentest-calculator>CDN via jsDelivr
<script type="module"
src="https://cdn.jsdelivr.net/gh/HailBytes/pentest-calculator@main/pentest-calculator.js">
</script>
<pentest-calculator></pentest-calculator>React
import { useEffect, useRef } from 'react';
// Load once at the app level
import('https://cdn.jsdelivr.net/gh/HailBytes/pentest-calculator@main/pentest-calculator.js');
export default function PentestCalc({ onCalculated, onQuoteRequested }) {
const ref = useRef(null);
useEffect(() => {
const el = ref.current;
if (!el) return;
const handleCalc = (e) => onCalculated?.(e.detail);
const handleQuote = (e) => onQuoteRequested?.(e.detail);
el.addEventListener('pentest-calculated', handleCalc);
el.addEventListener('pentest-quote-requested', handleQuote);
return () => {
el.removeEventListener('pentest-calculated', handleCalc);
el.removeEventListener('pentest-quote-requested', handleQuote);
};
}, []);
return <pentest-calculator ref={ref} theme="dark" />;
}Vue 3
<template>
<pentest-calculator
theme="dark"
@pentest-calculated="onCalculated"
@pentest-quote-requested="onQuote"
/>
</template>
<script setup>
import 'https://cdn.jsdelivr.net/gh/HailBytes/pentest-calculator@main/pentest-calculator.js';
function onCalculated(e) { console.log('Result:', e.detail); }
function onQuote(e) { console.log('Quote requested:', e.detail); }
</script>API Reference
Attributes
| Attribute | Values | Default | Description |
|-----------|-------------|---------|------------------------------|
| theme | dark light | dark | Color scheme |
Events
| Event Name | Fired When | event.detail |
|-----------------------------|---------------------------------------------|-----------------------|
| pentest-calculated | User reaches Step 3 (auto-calculated) | Full result object |
| pentest-quote-requested | User clicks "Get an Accurate Quote" button | Last result object |
Result Object Shape
{
"inputs": {
"targetType": "web_app",
"numTargets": 3,
"environment": "production",
"authTesting": true,
"socialEng": false,
"testDepth": "comprehensive",
"compliance": ["pci_dss", "soc2"],
"reportType": "full_both",
"remSupport": true
},
"days": 9.5,
"costLow": 14250,
"costHigh": 33250,
"teamSize": 2,
"teamLabel": "engineers",
"teamPills": ["1× Lead Penetration Tester", "1× Security Engineer"],
"deliverables": ["Detailed vulnerability findings report", "..."],
"timestamp": "2025-01-01T00:00:00.000Z"
}Calculation Methodology
| Parameter | Formula / Values |
|----------------------|------------------|
| Base days | web_app=3, network=4, mobile=4, cloud=3, combined=6 |
| Target factor | 1 target=1.0×, 2–5=1.3×, 6–15=1.6×, 16+=2.0× |
| Depth multiplier | basic=0.7×, standard=1.0×, comprehensive=1.5×, red_team=2.5× |
| Compliance | +0.5 days per standard selected |
| Full report | +1 day |
| Authenticated | +0.5 days |
| Social engineering | +2 days |
| Day rate | Low: $1,500/day, High: $3,500/day |
Example: Web app (3 days) × 3 targets (1.3×) × comprehensive (1.5×) + PCI DSS (0.5) + authenticated (0.5) = 7.87 → 7.9 days
⚠️ Disclaimer
All estimates are preliminary and intended for budgeting guidance only. Actual engagement scope, duration, and pricing depend on detailed scoping conversations, target complexity, regulatory requirements, and findings discovered during testing. Contact HailBytes for an accurate quote.
See also
Part of the HailBytes calculator suite — drop-in web components for security and risk:
@hailbytes/pentest-calculator— penetration testing scope and cost estimator (this package)@hailbytes/password-analyzer— password strength + entropy analyzer (repo)@hailbytes/vulnerability-calculator— vulnerability scanner infrastructure sizing (repo)@hailbytes/security-roi-calculator— security awareness training ROI (repo)
License
Built by HailBytes — Managed Attack Surface Management.
Enterprise Support
Need managed attack surface management without the operational overhead? HailBytes ASM delivers BYOC-deployed reNgine with enterprise support, on AWS and Azure Marketplaces.
Get Enterprise Support ->
Part of the HailBytes open-source security toolkit.