I Built a Dashboard to Make Security Reports Easier to Read

Ambika Dobhal — Wed, 15 Jul 2026 18:51:31 +0000

****When working with security tools like "Trivy" and "npm" audit, I realized that their primary goal is to generate detailed reports that can be consumed by automation, CI/CD pipelines, and other security tools.

For developers, however, there are times when you simply want a quick visual overview of a report.

Questions like:

How many critical vulnerabilities are there?
Which packages need immediate attention?
Which vulnerabilities already have a fix available?
What should I investigate first?

can require navigating through a large JSON report or terminal output.

Of course,Trivy already provides excellent terminal output, and there are powerful enterprise platforms that provide comprehensive security dashboards.

I wasn't trying to recreate those tools or copy their ideas.

Instead, I wanted to explore a different question:

What if viewing a security report was as simple as opening a web page?

The Idea

My goal was to build a lightweight, browser-only application where developers can simply:

Drag & Drop a JSON report
Paste a JSON report
Click Analyze Report

That's it.

No installation.
No backend.
No account.
No database.

Within seconds, the report is transformed into an interactive dashboard.

The focus isn't on replacing existing security platforms—it's on providing a simple, fast, and privacy-friendly way to explore security reports.

Why Browser-Only?

Security reports often contain sensitive information about a project.
Uploading those reports to a remote server just to visualize them isn't always desirable.
That's why I decided that every report should be processed locally inside the browser.

Nothing is uploaded.
Nothing is stored.
Your security report never leaves your machine.

Supporting Multiple Scanners

One thing I learned very quickly is that different security scanners don't speak the same language.
For example, Trivy and npm audit both report vulnerabilities, but their JSON structures are completely different.
The UI shouldn't need to know which scanner generated the report.

Instead of building separate interfaces for every scanner, I introduced a normalization layer.

Each supported report is converted into a common data model before it reaches the UI.

Once normalized, the dashboard can display vulnerabilities using the same components regardless of the original scanner.

Besides simplifying the frontend, this also makes supporting additional scanners much easier in the future.

What I Learned

This project taught me much more than building a React interface.
Some of the biggest lessons were:

Good dashboards are about information hierarchy, not displaying every field available.
A normalization layer makes supporting multiple data sources significantly easier.
Security tools and frontend applications solve different problems. Sometimes the challenge isn't generating data—it's presenting that data in a way that's easy to explore.
Processing reports entirely in the browser improves both privacy and user trust.
A simple workflow often creates a better user experience than a feature-heavy interface.

Beginner's Understanding of DAST

Ambika Dobhal — Thu, 03 Jul 2025 18:20:55 +0000

Introduction:

During my internship , I explored one of the most fascinating areas in web application security: DAST (Dynamic Application Security Testing). At first, I had no idea what it meant. But as I worked with tools like ZAP and learned about APIs, API security, and penetration testing, the bigger picture started to make sense.
This article reflects my beginner-level understanding — it’s not perfect, but it’s an honest account of my learning journey. I hope it helps other interns and newcomers just starting out in security.

What is an API?

API :- (Application Programming Interface)
API is a set of definitions and protocols that allow different software to communicate with each other.
It is just like messengers that work between two applications for communication.

How APIs Work:-

API works on request and response.
Let’s say we are making a weather website, and I want to show the current weather. I will send a request to a weather API. Then, the API acts as a messenger and responds with the weather information. This gives data in JSON format.

REST APIs:-

REST stands for Representational State Transfer. It communicates between different systems over the Internet. It uses HTTP methods like GET, PUT, and DELETE to define actions that can be performed on resources.
The main feature of REST API is statelessness. Statelessness means that each request from a client to a server must contain all the information the server needs to fulfill the request. No session state is stored on the server.

OpenAPI Format:-

This is a standard way to describe an API — what the API is doing, its response, and input.
In simple words, it's a written description of an API. It’s written in YAML and JSON format.
It helps with tools like DAST scanners and API testers.

Postman Collections:-

Postman is a tool for manually testing APIs.
Postman collections are a group of saved API requests. We can also share them among team members.

Swagger:-

Swagger is a tool that helps you to design, build, and document APIs.
Swagger describes the structure of APIs.

API Security:-

Protecting APIs from malicious attacks and unauthorized access.
Some common issues include Broken Authentication, Injection Attacks, etc.

API Discovery:-

This process involves identifying and documenting all APIs in your applications, including public APIs, internal APIs, previously overlooked APIs, and third-party APIs.
API discovery can even identify 50 APIs running in your system that you may not have been aware of.

DAST:- (Dynamic Application Security Testing)

DAST is a method of testing an application's security while it’s running, but it has no knowledge of the application’s internal logic or access to its source code.
It finds security vulnerabilities using simulated attacks like:

SQL Injections
Cross-Site Scripting (XSS)
Broken Authentication

In simple words, a hacker might try to break into your app from the outside.
It works like a hacker.

How DAST Works:-

First, run your web app (either locally or on a real website)
The DAST tool sends requests to your website just like users or hackers do.
It tries to:
Enter weird inputs
Access pages without login
Log in without credentials.
Send special links or scripts
Put unexpected values in password fields.
DAST watches your app's response. If the app behaves in a way that shows weakness, DAST reports it.

Penetration Testing:-

Also known as pen testing, it is a security test where professionals simulate real-world attacks on a system to find vulnerabilities.

It follows these stages:
Explore: Find the weak spot
Attack: Attempt to exploit it
Report: Create a report of the vulnerability

ZAP :-

Zed Attack Proxy (ZAP) is a free, open-source DAST tool by OWASP (Open Web Application Security Project).

It’s a penetration testing tool, mainly designed for testing web apps.
At its core, ZAP is known as a "man-in-the-middle proxy". It stands between the browser and web app, intercepting and inspecting the messages exchanged between them.

DEV Community: Ambika Dobhal