anajsana/front-end-miniprojects

a repo to store projects created for my front-end master

Security Scorecard Web App 🧐 ✅

⭐️ This is part of a project for my Front-End Master as part of the JavaScript module. This project is for academic purposes only. For any further questions or potential contributions, please feel free to open an issue or submit a pull request 🙋‍♀️

Overview

This web application leverages the OpenSSF scorecard API to evaluate the security vulnerabilities of given repositories. It covers various aspects such as source code, build processes, dependencies, testing, and project maintenance. The app shows an overall security scorecard ranking for a given repository and visualizes the checks through a radial graph. This project uses Chart.js for rendering the graphical representations. The interface includes a dynamic FAQ section for addressing common inquiries.

Features

• Security Analysis: Fetches data from the OpenSSF scorecard API to assess vulnerabilities.
• Radial Graph Visualization: Uses Chart.js (MIT license) to display the security checks in a radial graph
• Styled Interface: Responsive design styled with CSS
• Dynamic FAQ Section: For user guidance and information

Folder Structure

js/
    faq.js - Handles the FAQ section toggling
    radar-chart.js - Configures the Chart.js canvas for the radial graph
    fetch-api.js - Performs the GET request to the OpenSSF scorecard API
css/
    style.css - Styling rules
index.html - Structure

Getting Started

Installation

• Clone the repository to your local machine
• Open your favorite code editor
• Navigate to the project directory
• Open the index.html file in your browser to launch the application

Usage

Enter the repository name you wish to analyze in the provided input field and submit. The application will fetch the security scorecard for the given repo and display the results as an overall ranking and a detailed radial graph illustrating each security check.

Make sure the format you use is:

platfrom/organization/repo

Below are a few examples that works and you can sue to test:

• github.com/pytorch/pytorch (should fetch data from https://api.securityscorecards.dev/projects/github.com/pytorch/pytorch)
• github.com/kubernetes/kubernetes (should fetch data from https://api.securityscorecards.dev/projects/github.com/kubernetes/kubernetes)
• gitbub.com/openssf/scorecard (should fetch data from https://api.securityscorecards.dev/projects/github.com/ossf/scorecard)

Future Work

Plans to deploy for broader accessibility, potentially using Netlify to simplify the process

License

This project is under MIT License

front-end-miniprojects's Issues

Deploy this repo to GitHub pages

This will save folk from having to clone the repo and run it in their IDE or a web server.

Just deploying the main branch provides an OK experience, as GitHub pages uses the README from the main branch root. With a simple link from the section header to the security-api directory it's then possible to get into app (PR to follow).

Take a look at the pages generated from my fork at:

https://chris.swanz.net/front-end-miniprojects/
https://chris.swanz.net/front-end-miniprojects/security-api/

Take repo name from GET parameter

Rather than fill in the form and press the button it's possible to pass the repo name as a GET parameter:

e.g. https://chris.swanz.net/front-end-miniprojects/security-api/?repo=github.com/atsign-foundation/at_server

This will allow projects to link to (and perhaps even embed) their own charts.

The example above has this additional JavaScript in index.html:

    <script type="text/javascript">
        function getURLParameter(e) {
            return decodeURI((new RegExp(e + "=(.+?)(&|$)").exec(location.search) || [, ""])[1]);
        }
        
        if (getURLParameter("repo") === "") {
            console.log("No URL param value found.");
        } else {
            document.getElementById('repoInput').value = getURLParameter("repo");
            document.getElementById('fetchButton').click();
        }
    </script>