Develop a Single Page Application (SPA) for 'Kod Güvenliği Analisti: Sızma Tespit Aracı' (Code Security Analyst: Intrusion Detection Tool). This tool aims to automatically detect potential security vulnerabilities, license violations, and malicious code within open-source or third-party libraries used by developers and companies. This addresses the growing concern highlighted by incidents like the Claude Code source code leak.
### PROJECT OVERVIEW:
* **Purpose:** To provide developers and organizations with a robust, automated solution for auditing their software dependencies for security flaws, license compliance issues, and malicious code. This acts as a proactive defense mechanism against supply chain attacks and unintentional vulnerabilities.
* **Problem Solved:** The increasing complexity of software supply chains makes it difficult to manually vet every dependency. Incidents like source code leaks, inclusion of malicious tools (e.g., data exfiltration scripts, malicious regex patterns), and license compliance failures pose significant risks. This tool automates the detection and reporting of these risks.
* **Value Proposition:** Enhance code security, ensure license compliance, save developer time by automating audits, reduce the risk of costly data breaches or legal issues, and build trust in software supply chains.
### TECH STACK:
* **Frontend Framework:** React (using Create React App or Vite for a streamlined setup).
* **Styling:** Tailwind CSS for rapid and utility-first styling. Integrate Tailwind CSS Typography plugin for better text rendering.
* **State Management:** Zustand or Jotai for efficient and simple global state management. Use React Context API for theme switching or user authentication state if needed.
* **Routing:** React Router DOM for client-side navigation.
* **API Client:** Axios for making HTTP requests to a potential backend (though MVP focuses on frontend logic and local/mock data).
* **Form Handling:** React Hook Form for efficient and performant form management.
* **UI Components:** Potentially use a lightweight component library like Headless UI or Radix UI for accessible and unstyled components, or build custom ones with Tailwind CSS.
* **Icons:** React Icons library.
* **Build Tool:** Vite (recommended for speed) or Webpack.
### CORE FEATURES & USER FLOWS:
1. **Dependency Scanner:**
* **User Flow:** User navigates to the 'Scan Dependencies' section. They can either upload a package manager file (e.g., `package.json`, `requirements.txt`) or connect their GitHub/GitLab repository. The tool parses the file/repository to identify all direct and transitive dependencies. It then queries a vulnerability database (e.g., NVD, OSV) for known CVEs associated with these dependencies. Results are displayed in a clear list, indicating the dependency, version, severity of vulnerability, and a link to more details.
* **Details:** Supports `npm`, `yarn`, `pip`, `composer`, `go.mod`, `Cargo.toml` initially. Transitive dependency analysis is crucial.
2. **Malicious Code Detector:**
* **User Flow:** After dependency identification, this feature analyzes the source code of identified libraries (or specific suspicious ones flagged by other checks). It uses pattern matching (regex), Abstract Syntax Tree (AST) analysis, and potentially signature-based detection to flag potentially malicious code snippets (e.g., obfuscated code, network requests to suspicious domains, unusual file system access, deceptive regular expressions designed to exploit parsing vulnerabilities).
* **Details:** This is a complex feature. For MVP, focus on heuristic analysis and known malicious patterns. Consider using a WASM module for performance if analyzing large codebases.
3. **License Compliance Auditor:**
* **User Flow:** For each identified dependency, the tool determines its license(s) using sources like SPDX or direct parsing of license files. It compares these licenses against a user-defined 'allowed' or 'forbidden' list, or simply reports all detected licenses. Users receive a report highlighting any non-compliant licenses (e.g., GPL in a commercial product without source code sharing).
* **Details:** Needs a robust mapping of package names/versions to licenses. Integration with services like FOSSA or Snyk's license data could be considered for a richer dataset.
4. **Reporting & Dashboard:**
* **User Flow:** A central dashboard provides an overview of the latest scan results, including the number of vulnerabilities, license issues, and suspicious code findings. Detailed reports for each scan are accessible, sortable, and filterable by severity, type, or dependency. Users can export reports (CSV, PDF). Notifications for critical issues are highlighted.
* **Details:** Visualizations (charts, graphs) for trends over time would be beneficial.
5. **Repository Integration (Basic):**
* **User Flow:** Users authenticate with GitHub/GitLab. They can select a repository to scan. The tool automatically fetches the relevant package manager file(s) and performs the scans. Results can be optionally posted back as comments on the latest commit or as a status check.
* **Details:** Read-only access is sufficient for MVP. OAuth flow for authentication.
### UI/UX DESIGN:
* **Layout:** Single-page application layout. A persistent sidebar for navigation (Dashboard, Scan Dependencies, Reports, Settings, Repository Integration). The main content area displays the selected section's information. Clean, modern, and professional aesthetic.
* **Color Palette:** Primary: Deep Blue (#1E3A8A), Secondary: Teal (#14B8A6), Accent: Orange (#F97316) for critical alerts. Neutrals: Shades of Gray (#F3F4F6, #9CA3AF, #1F2937). Dark mode option available.
* **Typography:** Use a clean sans-serif font like Inter or Poppins for readability. Maintain a clear hierarchy using font sizes and weights.
* **Responsive Design:** Mobile-first approach. The layout should adapt gracefully to various screen sizes. Sidebar might collapse into a hamburger menu on smaller screens. Ensure all features are usable on mobile devices.
* **Interactions:** Subtle hover effects on buttons and links. Smooth transitions for panel expansions and content loading. Clear loading indicators (spinners, skeleton screens) for asynchronous operations.
### COMPONENT BREAKDOWN:
* **`App.js`:** Main application component, sets up routing and global layout.
* **`Layout.js`:** Contains the overall page structure, including `Sidebar.js` and `MainContent.js`.
* **`Sidebar.js`:** Navigation menu component. Props: `navItems` (array of objects with `label`, `path`, `icon`).
* **`MainContent.js`:** Renders the content of the currently active route.
* **`DashboardPage.js`:** Displays overview cards (vulnerabilities, licenses, etc.), recent scan summary. Uses `StatCard.js`, `RecentScansList.js`.
* **`ScanPage.js`:** Contains the form/UI for initiating scans. Includes `DependencyUploadForm.js`, `RepoConnect.js`, `ScanButton.js`.
* **`DependencyUploadForm.js`:** Handles file input for `package.json` etc. Uses `ReactHookForm`.
* **`RepoConnect.js`:** UI for authenticating and selecting repositories (GitHub/GitLab).
* **`ResultsPage.js`:** Displays detailed scan results. Uses `ResultTable.js`, `VulnerabilityFilter.js`, `LicenseBadge.js`.
* **`ResultTable.js`:** Renders scan findings in a sortable, filterable table. Props: `results` (array), `columns` (array).
* **`VulnerabilityItem.js`:** Displays a single vulnerability finding. Props: `vuln` (object).
* **`LicenseItem.js`:** Displays a single license finding. Props: `license` (object).
* **`SuspiciousCodeItem.js`:** Displays a flagged code snippet. Props: `codeSnippet` (object).
* **`SettingsPage.js`:** User settings, API keys, notification preferences.
* **`LoadingSpinner.js`:** Reusable loading indicator.
* **`ErrorMessage.js`:** Displays error messages.
### DATA MODEL:
* **`ScanResult` Object:**
```json
{
"scanId": "unique-scan-id-123",
"timestamp": "2023-10-27T10:00:00Z",
"projectName": "MyAwesomeApp",
"dependencies": [
{
"name": "react",
"version": "18.2.0",
"resolvedVersion": "18.2.0",
"licenses": ["MIT"],
"vulnerabilities": [
{
"id": "CVE-2023-XXXX",
"severity": "High",
"description": "A high severity vulnerability...",
"cvssScore": 7.5,
"moreInfoUrl": "https://nvd.nist.gov/vuln/detail/CVE-2023-XXXX"
}
],
"maliciousCodeIndicators": [
{
"type": "Suspicious Regex",
"pattern": "/eval\(.*\)/i",
"line": 50,
"snippet": "const harmful = eval(dangerousInput);"
}
]
}
],
"summary": {
"totalDependencies": 150,
"vulnerableDependencies": 5,
"criticalVulnerabilities": 1,
"highVulnerabilities": 2,
"mediumVulnerabilities": 2,
"licenseIssues": 1,
"suspiciousCodeCount": 3
}
}
```
* **State Management (`Zustand` store example):**
```javascript
import { create } from 'zustand';
export const useScanStore = create((set) => ({
scanResults: [],
currentScan: null,
isLoading: false,
addScanResult: (result) => set((state) => ({ scanResults: [...state.scanResults, result] })),
setCurrentScan: (scan) => set({ currentScan: scan }),
setLoading: (loading) => set({ isLoading: loading }),
// Add functions for fetching, deleting scans, etc.
}));
```
* **Local Storage:** Use for storing user preferences (e.g., theme, ignored vulnerabilities) and potentially recent scan results for offline viewing in the MVP.
### ANIMATIONS & INTERACTIONS:
* **Page Transitions:** Use `Framer Motion` or CSS transitions for smooth fading or sliding effects between pages/sections.
* **Button Hovers:** Subtle background color change or slight scale-up effect.
* **Table Row Hovers:** Highlight the entire row with a slightly different background color.
* **Loading States:** Implement skeleton loaders for tables and content areas while data is being fetched. Use `react-spinners` or custom CSS spinners.
* **Micro-interactions:** Animated checkmarks or cross icons for status indicators. Expand/collapse animations for detailed result sections.
### EDGE CASES:
* **No Dependencies Found:** Display a message indicating no dependencies were detected in the uploaded file or repository.
* **API Errors:** Gracefully handle network errors during data fetching or integration. Display user-friendly error messages.
* **Invalid File Upload:** Validate uploaded files (e.g., check file type and basic structure of `package.json`). Provide clear error feedback.
* **No Vulnerabilities/Issues:** Display a positive message when a scan completes successfully with no findings.
* **Accessibility (a11y):** Ensure all interactive elements are keyboard-navigable. Use ARIA attributes where necessary. Ensure sufficient color contrast.
* **Rate Limiting:** Be mindful of external API rate limits (e.g., NVD, GitHub API). Implement caching and exponential backoff.
* **Empty States:** Design clear UI states for when lists (results, repositories) are empty.
* **Security of Secrets:** If handling API keys or OAuth tokens, ensure they are stored securely (e.g., using environment variables on the backend, or encrypted in local storage if client-side only, though backend is preferred for sensitive data).
### SAMPLE DATA (Mock Data for `ScanResult`):
1. **No Issues:**
```json
{
"scanId": "scan-001",
"timestamp": "2023-10-27T11:00:00Z",
"projectName": "CleanApp",
"dependencies": [
{ "name": "react", "version": "18.2.0", "licenses": ["MIT"], "vulnerabilities": [], "maliciousCodeIndicators": [] },
{ "name": "lodash", "version": "4.17.21", "licenses": ["MIT"], "vulnerabilities": [], "maliciousCodeIndicators": [] }
],
"summary": { "totalDependencies": 2, "vulnerableDependencies": 0, "licenseIssues": 0, "suspiciousCodeCount": 0 }
}
```
2. **Vulnerability Found:**
```json
{
"scanId": "scan-002",
"timestamp": "2023-10-27T12:00:00Z",
"projectName": "OldLibApp",
"dependencies": [
{ "name": "express", "version": "4.17.1", "licenses": ["MIT"], "vulnerabilities": [{"id": "CVE-2021-23358", "severity": "High", "description": "A path traversal vulnerability...", "cvssScore": 7.5, "moreInfoUrl": "..."}], "maliciousCodeIndicators": [] }
],
"summary": { "totalDependencies": 1, "vulnerableDependencies": 1, "criticalVulnerabilities": 0, "highVulnerabilities": 1, "licenseIssues": 0, "suspiciousCodeCount": 0 }
}
```
3. **License Issue (GPL):**
```json
{
"scanId": "scan-003",
"timestamp": "2023-10-27T13:00:00Z",
"projectName": "CommercialApp",
"dependencies": [
{ "name": "some-gpl-lib", "version": "1.0.0", "licenses": ["GPL-3.0"], "vulnerabilities": [], "maliciousCodeIndicators": [] },
{ "name": "react", "version": "18.2.0", "licenses": ["MIT"], "vulnerabilities": [], "maliciousCodeIndicators": [] }
],
"summary": { "totalDependencies": 2, "vulnerableDependencies": 0, "licenseIssues": 1, "suspiciousCodeCount": 0 }
}
```
4. **Suspicious Regex:**
```json
{
"scanId": "scan-004",
"timestamp": "2023-10-27T14:00:00Z",
"projectName": "RegexTest",
"dependencies": [
{ "name": "utility-lib", "version": "2.5.0", "licenses": ["Apache-2.0"], "vulnerabilities": [], "maliciousCodeIndicators": [{"type": "Suspicious Regex", "pattern": "/exec\(.*\)/", "line": 120, "snippet": "require('child_process').exec(command);"}] }
],
"summary": { "totalDependencies": 1, "vulnerableDependencies": 0, "licenseIssues": 0, "suspiciousCodeCount": 1 }
}
```
5. **Multiple Issues:**
```json
{
"scanId": "scan-005",
"timestamp": "2023-10-27T15:00:00Z",
"projectName": "ComplexApp",
"dependencies": [
{ "name": "old-package", "version": "0.5.1", "licenses": ["MIT"], "vulnerabilities": [{"id": "CVE-2022-YYYY", "severity": "Critical", "description": "Remote code execution...", "cvssScore": 9.8, "moreInfoUrl": "..."}], "maliciousCodeIndicators": [] },
{ "name": "another-lib", "version": "3.1.0", "licenses": ["GPL-2.0"], "vulnerabilities": [], "maliciousCodeIndicators": [{"type": "Obfuscated Code", "pattern": null, "line": 30, "snippet": "var _0xabc=[...]; ..."}] }
],
"summary": { "totalDependencies": 2, "vulnerableDependencies": 1, "criticalVulnerabilities": 1, "highVulnerabilities": 0, "licenseIssues": 1, "suspiciousCodeCount": 1 }
}
```
### DEPLOYMENT NOTES:
* **Build Command:** Use `npm run build` or `yarn build` (depending on package manager).
* **Environment Variables:** Use `.env` files for development (`.env.development`) and production (`.env.production`). Key variables might include `REACT_APP_API_URL` (if a backend is introduced later), `NODE_ENV`. For production builds, Vite/Webpack configurations will handle optimization.
* **Performance Optimizations:** Code splitting using React.lazy() and Suspense. Memoization of components using `React.memo`. Efficient state management. Image optimization (if any). Lazy loading of components off-screen.
* **HTTPS:** Ensure the application is served over HTTPS in production.
* **CORS:** If a backend API is introduced, configure CORS appropriately on the server.
* **Static Site Hosting:** Can be deployed on platforms like Netlify, Vercel, GitHub Pages, AWS S3/CloudFront for the frontend SPA.