Public templates - COS301-SE-2025/API-Threat-Assessment-Tool GitHub Wiki

Public Templates Page

Overview

The Public Templates page is a key feature of the AT-AT (API Threat Assessment Tool) application, a React-based web platform designed for API security scanning. This page allows authenticated users to browse, search, filter, and utilize pre-defined scan templates created by the community or the AT-AT team. Templates are used to configure security scans for APIs, providing a reusable way to assess vulnerabilities.

Purpose

  • Provide access to a library of public scan templates
  • Enable users to select and apply templates to their API scans
  • Facilitate discovery of popular or recent templates through filtering and search

Features

  • Template Display: Displays a grid of templates with previews, names, descriptions, authors, dates added, and usage counts
  • Search Functionality: Allows users to search templates by name or description
  • Filter Options: Offers filters for "All", "Popular" (usage count > 50), and "Recent" (added after April 1, 2025)
  • Use Template Action: Simulates applying a template to the user's profile, incrementing its usage count
  • View Details: Opens a modal with detailed information about a selected template
  • Pagination: Supports navigation through multiple pages of templates (4 per page)
  • Theme Support: Adapts to light and dark modes via the ThemeContext
  • Mock Backend: Uses local JavaScript mocks to simulate API interactions without a backend

Usage

1. Accessing the Page

  • Navigate to /public-templates after logging in (protected route)

2. Browsing Templates

  • View the grid of templates, with 4 displayed per page
  • Use pagination buttons (e.g., 1, 2, Next, Previous) to navigate

3. Searching

  • Enter keywords in the search bar to filter templates (e.g., "Injection" for "Injection Vulnerability Scan")

4. Filtering

  • Click "Popular", "Recent", or "All" to adjust the displayed templates

5. Using a Template

  • Click "Use Template" on a card to simulate adding it to your profile. A success message appears for 3 seconds

6. Viewing Details

  • Click "View Details" to open a modal with additional template information, including features

7. Theme Toggle

  • Use the theme toggle button to switch between light and dark modes

Mock Implementation

Since no backend is currently available, the page relies on a mocked JavaScript implementation:

  • Data Source: mockData.js provides initial template data (8 templates) stored in localStorage for persistence
  • Mock API:
    • getTemplates: Fetches templates with a 500ms delay
    • useTemplate: Simulates applying a template, updating usage counts and storing used templates
    • getUsedTemplates: Retrieves the list of used templates
  • State Management: React useState and useEffect handle loading, filtering, pagination, and modal states
  • Testing: Use resetMockData in mockData.js to reset to initial state for testing

Template List (as of May 27, 2025)

  • OWASP Top 10 Quick Scan (150 uses)
  • Full Comprehensive Scan (75 uses)
  • Authentication & Authorization Focus (30 uses)
  • Rate Limiting Assessment (90 uses)
  • Data Exposure Scan (45 uses)
  • CORS Configuration Check (20 uses)
  • Injection Vulnerability Scan (110 uses)
  • API Inventory Audit (60 uses)

Development Notes

  • CSS: Styled with PublicTemplates.css, supporting responsive design and theme transitions
  • Dependencies: Requires react, react-router-dom, and the ThemeContext from App.js
  • Future Integration: Replace mock API calls with real backend endpoints (e.g., /api/templates) when available
  • Enhancements: Consider adding sorting options or user-contributed template uploads