Attack Surface Management Project Description

Inspiration

The inspiration for our Attack Surface Management project stems from the limitations of existing tools in the cybersecurity domain. Open-source tools for managing assets like domains and subdomains often lack scientific organization, scalability, and user-friendly interfaces, making them cumbersome for large-scale use. Enterprise solutions, while robust, struggle to effectively manage internal assets, leaving gaps in visibility and control. We aimed to create a modern, scalable, and intuitive platform that bridges these gaps, offering a unified solution for asset discovery, vulnerability management, and actionable insights, built with cutting-edge technologies and AI-driven development.

What it does

Attack Surface Management is a comprehensive web-based platform designed to streamline the discovery, monitoring, and securing of digital assets. Key features include:

  • Dashboard: Displays critical metrics such as the number of scans conducted today, new vulnerabilities identified, critical risk alerts, and system uptime. It includes visualizations like line/bar charts for scan trends and CTAs for initiating scans or uploading asset lists.
  • Asset Management: Allows users to manage companies, domains, and subdomains. Users can add, edit, or delete companies, and within each company, manage associated domains and their subdomains hierarchically.
  • Vulnerability Management: Provides detailed vulnerability reports with information like ID, CVSS score, and affected assets, alongside tabs for descriptions, remediation steps, and affected systems. Users can mark vulnerabilities as resolved or assign them to team members.
  • Toolbox: Replaces traditional navigation with a toolbox modal, enabling users to run security tools (e.g., Nmap) directly from the interface by inputting commands and viewing outputs in real time.
  • Subdomain Details: Offers a dedicated page for each subdomain, listing associated URLs and scan tasks (tools) with their outputs, enhancing granular asset analysis.
  • Notifications Center: Delivers real-time updates on scan progress and vulnerabilities.
  • Dark/Light Theme Toggle: Enhances user experience with customizable themes.

The platform is designed to be responsive, accessible, and visually appealing, with a focus on modular components and intuitive navigation.

How we built it

We built Attack Surface Management using Vue3 for its reactive framework and Tailwind CSS for rapid, responsive styling, inspired by the clean and minimalistic design of shadcn/ui. The development process was powered by AI through bolt.new, which accelerated prototyping and iteration. The project evolved through the following steps:

  1. Initial Design: Defined a modular, responsive interface with a navigation sidebar, dashboard, scan reports, vulnerability details, and theme toggling, using Vue3 components and Tailwind CSS for styling (Prompt 1).
  2. Refinement: Validated the initial design for responsiveness, accessibility, and maintainability, ensuring smooth animations and a professional user experience (Prompt 2).
  3. Navigation Overhaul: Replaced the sidebar with a top navbar and introduced a toolbox modal for running security tools like Nmap, enhancing interactivity (Prompt 3).
  4. Company Management: Added a company page to list, add, edit, and delete companies, establishing the foundation for asset organization (Prompt 4).
  5. Company Details: Developed a detailed company page to manage domains and subdomains hierarchically, enabling users to add and organize assets efficiently (Prompt 5).
  6. Subdomain Details: Created a subdomain detail page with sections for URLs and scan task outputs, providing in-depth asset analysis (Prompt 6).

The use of Vue3’s composition API ensured reusable components, while Tailwind’s utility-first approach enabled rapid styling. AI-driven development via bolt.new streamlined the process, allowing us to focus on functionality and user experience.

Challenges we ran into

  • Asset Hierarchy Management: Designing a scalable structure to manage companies, domains, and subdomains while maintaining performance and usability was complex, especially for large datasets.
  • Toolbox Integration: Implementing a modal-based toolbox for running security tools like Nmap required careful handling of command inputs and real-time output rendering without compromising security or performance.
  • AI-Driven Development: Leveraging bolt.new for rapid prototyping was powerful but required precise prompt engineering to align AI outputs with our vision, especially for complex features like the subdomain details page.
  • Responsive Design: Ensuring the interface remained intuitive and visually consistent across devices, particularly for data-heavy components like scan reports and vulnerability tables, posed significant challenges.
  • Real-Time Notifications: Building a reliable notifications center for real-time scan updates demanded efficient state management and seamless integration with Vue3’s reactivity system.

Accomplishments that we're proud of

  • Scalable Asset Management: Successfully implemented a hierarchical asset management system that organizes companies, domains, and subdomains in a user-friendly, scalable manner.
  • Modern UI/UX: Delivered a visually stunning, responsive interface with subtle animations, dark/light theme support, and accessible components, inspired by shadcn/ui.
  • AI-Powered Development: Leveraged bolt.new to accelerate development, enabling us to build a feature-rich platform in a short timeframe while maintaining high quality.
  • Toolbox Innovation: Replaced traditional navigation with an interactive toolbox modal, allowing users to run security tools directly within the platform, enhancing functionality.
  • Comprehensive Vulnerability Management: Built a robust system for tracking, analyzing, and resolving vulnerabilities, with detailed views and actionable workflows.

What we learned

  • Vue3 and Tailwind Synergy: Combining Vue3’s reactive components with Tailwind’s utility-first CSS enabled rapid development of modular, reusable, and responsive interfaces.
  • AI-Driven Workflow: Using bolt.new taught us the importance of clear, iterative prompts to guide AI in generating accurate and relevant code, significantly reducing development time.
  • Asset Management Complexity: Managing nested assets (companies → domains → subdomains) highlighted the need for efficient data structures and state management to ensure scalability.
  • User-Centric Design: Balancing functionality with usability required careful consideration of navigation, data presentation, and accessibility to meet diverse user needs.
  • Real-Time Systems: Implementing real-time notifications and tool outputs deepened our understanding of Vue3’s reactivity and WebSocket-like integrations.

What's next for Attack Surface Management

  • AI Agent Integration: Develop an AI agent to fully automate the scanning and bug-checking process, enabling continuous, intelligent monitoring and remediation of vulnerabilities without manual intervention.
  • Advanced Analytics: Introduce AI-driven insights to predict potential vulnerabilities and recommend proactive measures based on asset and scan data.
  • Expanded Toolset: Integrate additional security tools (e.g., Burp Suite, Nikto) into the toolbox modal, with enhanced output parsing and visualization.
  • API Integration: Develop a RESTful API to allow external systems to interact with the platform, enabling automation and integration with other security tools.
  • Scalability Enhancements: Optimize backend performance for handling larger asset inventories and concurrent scans, potentially using a backend framework like Node.js or FastAPI.
  • Community Features: Add collaboration tools, such as team-based asset management and shared vulnerability workflows, to support enterprise use cases.
  • Open-Source Contribution: Release parts of the platform as open-source to foster community contributions and address the limitations of existing open-source tools.

Built With

  • heroicons
  • tailwind
  • vue3
Share this project:

Updates