{"id":48199908,"url":"https://github.com/teles/visual-csp","last_synced_at":"2026-04-04T18:19:38.233Z","repository":{"id":341392211,"uuid":"1169396226","full_name":"teles/visual-csp","owner":"teles","description":null,"archived":false,"fork":false,"pushed_at":"2026-03-31T11:39:21.000Z","size":285,"stargazers_count":0,"open_issues_count":7,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-03-31T13:30:56.136Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://visual-csp.pages.dev/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/teles.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-02-28T16:17:45.000Z","updated_at":"2026-03-31T11:39:30.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/teles/visual-csp","commit_stats":null,"previous_names":["teles/visual-csp-editor","teles/visual-csp"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/teles/visual-csp","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/teles%2Fvisual-csp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/teles%2Fvisual-csp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/teles%2Fvisual-csp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/teles%2Fvisual-csp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/teles","download_url":"https://codeload.github.com/teles/visual-csp/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/teles%2Fvisual-csp/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31408042,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-04T10:20:44.708Z","status":"ssl_error","status_checked_at":"2026-04-04T10:20:06.846Z","response_time":60,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-04-04T18:19:37.281Z","updated_at":"2026-04-04T18:19:38.211Z","avatar_url":"https://github.com/teles.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Visual CSP Editor\n\nA visual editor for Content Security Policy (CSP) headers with real-time security evaluation and shareable configurations.\n\nVisit https://visual-csp.pages.dev\n\n## Features\n\n- **Visual CSP Editing**: Intuitive interface for creating and editing CSP directives\n- **Security Evaluation**: Real-time security analysis powered by Google's CSP Evaluator\n- **Templates**: Pre-configured CSP policies for common use cases (Strict, Basic, SPA, etc.)\n- **URL State Management**: Share CSP configurations via compressed URLs\n- **Export Reports**: Generate detailed security reports in JSON format\n- **Dark Mode**: Built-in theme switching with system preference detection\n- **Validation**: Real-time validation of directive names and values\n- **Copy to Clipboard**: Quick copy of CSP headers and shareable links\n\n## Architecture\n\nThe project follows SOLID principles with clear separation of concerns:\n\n```mermaid\ngraph TD\n    A[EditorApp UI Layer] --\u003e B[Core Services]\n    A --\u003e C[Services Layer]\n    \n    B --\u003e D[CspParser]\n    B --\u003e E[CspGenerator]\n    B --\u003e F[CspSecurityEvaluator]\n    B --\u003e G[CspValidator]\n    B --\u003e H[CspTemplates]\n    \n    C --\u003e I[UrlStateManager]\n    C --\u003e J[ClipboardService]\n    C --\u003e K[CspReportExporter]\n    \n    A --\u003e L[ChipColorizer]\n    \n    F --\u003e M[csp_evaluator Library]\n    \n    style A fill:#4CAF50\n    style B fill:#2196F3\n    style C fill:#FF9800\n    style M fill:#9C27B0\n```\n\n### Core Components\n\n#### Core Layer (`src/core/`)\n- **CspParser**: Parses CSP strings into structured directives\n- **CspGenerator**: Generates CSP strings from directives\n- **CspSecurityEvaluator**: Evaluates security using Google's CSP Evaluator\n- **CspValidator**: Validates directive names and values\n- **CspTemplates**: Provides predefined CSP templates\n\n#### Services Layer (`src/services/`)\n- **UrlStateManager**: Handles URL state serialization/compression\n- **ClipboardService**: Manages clipboard operations\n- **CspReportExporter**: Exports security reports\n\n#### UI Layer (`src/ui/`)\n- **EditorApp**: Main Alpine.js component orchestrating the UI\n- **ChipColorizer**: Handles visual styling of CSP values\n\n## 🔄 CSP Processing Flow\n\n```mermaid\nsequenceDiagram\n    participant User\n    participant EditorApp\n    participant Parser\n    participant Generator\n    participant Evaluator\n    participant UrlState\n    \n    User-\u003e\u003eEditorApp: Enter CSP or load from URL\n    EditorApp-\u003e\u003eUrlState: Load state from URL\n    UrlState--\u003e\u003eEditorApp: Return saved state\n    \n    EditorApp-\u003e\u003eParser: Parse CSP string\n    Parser--\u003e\u003eEditorApp: Return directives object\n    \n    EditorApp-\u003e\u003eEvaluator: Evaluate security\n    Evaluator--\u003e\u003eEditorApp: Return findings\n    \n    User-\u003e\u003eEditorApp: Modify directives\n    EditorApp-\u003e\u003eGenerator: Generate CSP string\n    Generator--\u003e\u003eEditorApp: Return CSP string\n    \n    EditorApp-\u003e\u003eUrlState: Save state to URL\n    User-\u003e\u003eEditorApp: Copy/Share CSP\n```\n\n## 📦 Project Structure\n\n```\nvisual-csp-editor/\n├── src/\n│   ├── core/              # Core business logic\n│   │   ├── CspGenerator.ts\n│   │   ├── CspParser.ts\n│   │   ├── CspSecurityEvaluator.ts\n│   │   ├── CspTemplates.ts\n│   │   ├── CspValidator.ts\n│   │   ├── types.ts       # TypeScript interfaces\n│   │   └── index.ts\n│   ├── services/          # Application services\n│   │   ├── ClipboardService.ts\n│   │   ├── CspReportExporter.ts\n│   │   ├── UrlStateManager.ts\n│   │   └── index.ts\n│   ├── ui/                # UI components\n│   │   ├── ChipColorizer.ts\n│   │   ├── EditorApp.ts\n│   │   └── index.ts\n│   ├── main.ts            # Application entry point\n│   └── style.css          # Tailwind styles\n├── tests/                 # Unit tests\n├── docs/                  # Documentation\n├── index.html             # HTML template\n├── package.json\n├── tsconfig.json\n├── vite.config.ts\n└── vitest.config.ts\n```\n\n## Getting Started\n\n### Prerequisites\n\n- Node.js 16+ \n- npm or yarn\n\n### Installation\n\n```bash\n# Clone the repository\ngit clone https://github.com/teles/visual-csp-editor.git\n\n# Navigate to project directory\ncd visual-csp-editor\n\n# Install dependencies\nnpm install\n```\n\n### Development\n\n```bash\n# Start development server\nnpm run dev\n\n# Run tests\nnpm test\n\n# Run tests in watch mode\nnpm run test:watch\n\n# Run tests with coverage\nnpm run test:coverage\n\n# Lint code\nnpm run lint\n\n# Fix linting issues\nnpm run lint:fix\n```\n\n### Build\n\n```bash\n# Build for production\nnpm run build\n\n# Preview production build\nnpm run preview\n```\n\n## Testing\n\nThe project uses Vitest for unit testing with comprehensive coverage:\n\n- All core services are fully tested\n- UI components are tested in isolation\n- Mock implementations for external dependencies\n\nRun tests with:\n```bash\nnpm test\n```\n\n## CSP Templates\n\nThe editor includes predefined templates for common scenarios:\n\n```mermaid\ngraph LR\n    A[CSP Templates] --\u003e B[Strict CSP]\n    A --\u003e C[Basic Secure]\n    A --\u003e D[Single Page App]\n    A --\u003e E[Development Mode]\n    \n    B --\u003e F[Maximum Security\u003cbr/\u003eNonces/Hashes Only]\n    C --\u003e G[Balanced\u003cbr/\u003eSecurity \u0026 Compatibility]\n    D --\u003e H[CDN \u0026 Third-party\u003cbr/\u003eServices]\n    E --\u003e I[Relaxed for\u003cbr/\u003eDevelopment]\n    \n    style A fill:#4CAF50\n    style B fill:#f44336\n    style C fill:#2196F3\n    style D fill:#FF9800\n    style E fill:#9C27B0\n```\n\n### Available Templates\n\n1. **Strict CSP**: Maximum security using nonces/hashes only\n2. **Basic Secure**: Good balance of security and compatibility\n3. **Single Page App**: For SPAs using CDNs and third-party services\n4. **Development Mode**: Relaxed policy for development (not for production!)\n\n## 🔒 Security Evaluation\n\nThe editor uses Google's [CSP Evaluator](https://github.com/google/csp-evaluator) library to provide real-time security analysis. Findings are categorized by severity:\n\n- **High**: Critical security issues that should be fixed immediately\n- **Medium**: Important issues that weaken security\n- **Info**: Informational messages and best practices\n\n## Technology Stack\n\n- **TypeScript**: Type-safe development\n- **Vite**: Fast build tool and dev server\n- **Alpine.js**: Lightweight reactive framework\n- **Tailwind CSS**: Utility-first CSS framework\n- **csp_evaluator**: Google's CSP security evaluator\n- **pako**: Compression for URL state\n- **Vitest**: Fast unit testing framework\n\n## CSP Directives\n\nThe editor supports all standard CSP directives including:\n\n- `default-src`, `script-src`, `style-src`\n- `img-src`, `font-src`, `connect-src`\n- `frame-src`, `object-src`, `media-src`\n- `worker-src`, `manifest-src`\n- `form-action`, `frame-ancestors`, `base-uri`\n- `upgrade-insecure-requests`, `block-all-mixed-content`\n- And more...\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/AmazingFeature`)\n3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)\n4. Push to the branch (`git push origin feature/AmazingFeature`)\n5. Open a Pull Request\n\n## Acknowledgments\n\n- [Google CSP Evaluator](https://github.com/google/csp-evaluator) for security analysis\n- [Alpine.js](https://alpinejs.dev/) for reactive UI framework\n- [Tailwind CSS](https://tailwindcss.com/) for styling\n\n## Learn More\n\n- [Content Security Policy (CSP) - MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP)\n- [CSP Specification](https://www.w3.org/TR/CSP3/)\n- [CSP Best Practices](https://csp.withgoogle.com/docs/index.html)\n\n---\n\nMade with ❤️ for better web security\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fteles%2Fvisual-csp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fteles%2Fvisual-csp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fteles%2Fvisual-csp/lists"}