A visual editor for Content Security Policy (CSP) headers with real-time security evaluation and shareable configurations.
Visit https://visual-csp.pages.dev
- Visual CSP Editing: Intuitive interface for creating and editing CSP directives
- Security Evaluation: Real-time security analysis powered by Google's CSP Evaluator
- Templates: Pre-configured CSP policies for common use cases (Strict, Basic, SPA, etc.)
- URL State Management: Share CSP configurations via compressed URLs
- Export Reports: Generate detailed security reports in JSON format
- Dark Mode: Built-in theme switching with system preference detection
- Validation: Real-time validation of directive names and values
- Copy to Clipboard: Quick copy of CSP headers and shareable links
The project follows SOLID principles with clear separation of concerns:
graph TD
A[EditorApp UI Layer] --> B[Core Services]
A --> C[Services Layer]
B --> D[CspParser]
B --> E[CspGenerator]
B --> F[CspSecurityEvaluator]
B --> G[CspValidator]
B --> H[CspTemplates]
C --> I[UrlStateManager]
C --> J[ClipboardService]
C --> K[CspReportExporter]
A --> L[ChipColorizer]
F --> M[csp_evaluator Library]
style A fill:#4CAF50
style B fill:#2196F3
style C fill:#FF9800
style M fill:#9C27B0
- CspParser: Parses CSP strings into structured directives
- CspGenerator: Generates CSP strings from directives
- CspSecurityEvaluator: Evaluates security using Google's CSP Evaluator
- CspValidator: Validates directive names and values
- CspTemplates: Provides predefined CSP templates
- UrlStateManager: Handles URL state serialization/compression
- ClipboardService: Manages clipboard operations
- CspReportExporter: Exports security reports
- EditorApp: Main Alpine.js component orchestrating the UI
- ChipColorizer: Handles visual styling of CSP values
sequenceDiagram
participant User
participant EditorApp
participant Parser
participant Generator
participant Evaluator
participant UrlState
User->>EditorApp: Enter CSP or load from URL
EditorApp->>UrlState: Load state from URL
UrlState-->>EditorApp: Return saved state
EditorApp->>Parser: Parse CSP string
Parser-->>EditorApp: Return directives object
EditorApp->>Evaluator: Evaluate security
Evaluator-->>EditorApp: Return findings
User->>EditorApp: Modify directives
EditorApp->>Generator: Generate CSP string
Generator-->>EditorApp: Return CSP string
EditorApp->>UrlState: Save state to URL
User->>EditorApp: Copy/Share CSP
visual-csp-editor/
├── src/
│ ├── core/ # Core business logic
│ │ ├── CspGenerator.ts
│ │ ├── CspParser.ts
│ │ ├── CspSecurityEvaluator.ts
│ │ ├── CspTemplates.ts
│ │ ├── CspValidator.ts
│ │ ├── types.ts # TypeScript interfaces
│ │ └── index.ts
│ ├── services/ # Application services
│ │ ├── ClipboardService.ts
│ │ ├── CspReportExporter.ts
│ │ ├── UrlStateManager.ts
│ │ └── index.ts
│ ├── ui/ # UI components
│ │ ├── ChipColorizer.ts
│ │ ├── EditorApp.ts
│ │ └── index.ts
│ ├── main.ts # Application entry point
│ └── style.css # Tailwind styles
├── tests/ # Unit tests
├── docs/ # Documentation
├── index.html # HTML template
├── package.json
├── tsconfig.json
├── vite.config.ts
└── vitest.config.ts
- Node.js 16+
- npm or yarn
# Clone the repository
git clone https://github.com/teles/visual-csp-editor.git
# Navigate to project directory
cd visual-csp-editor
# Install dependencies
npm install# Start development server
npm run dev
# Run tests
npm test
# Run tests in watch mode
npm run test:watch
# Run tests with coverage
npm run test:coverage
# Lint code
npm run lint
# Fix linting issues
npm run lint:fix# Build for production
npm run build
# Preview production build
npm run previewThe project uses Vitest for unit testing with comprehensive coverage:
- All core services are fully tested
- UI components are tested in isolation
- Mock implementations for external dependencies
Run tests with:
npm testThe editor includes predefined templates for common scenarios:
graph LR
A[CSP Templates] --> B[Strict CSP]
A --> C[Basic Secure]
A --> D[Single Page App]
A --> E[Development Mode]
B --> F[Maximum Security<br/>Nonces/Hashes Only]
C --> G[Balanced<br/>Security & Compatibility]
D --> H[CDN & Third-party<br/>Services]
E --> I[Relaxed for<br/>Development]
style A fill:#4CAF50
style B fill:#f44336
style C fill:#2196F3
style D fill:#FF9800
style E fill:#9C27B0
- Strict CSP: Maximum security using nonces/hashes only
- Basic Secure: Good balance of security and compatibility
- Single Page App: For SPAs using CDNs and third-party services
- Development Mode: Relaxed policy for development (not for production!)
The editor uses Google's CSP Evaluator library to provide real-time security analysis. Findings are categorized by severity:
- High: Critical security issues that should be fixed immediately
- Medium: Important issues that weaken security
- Info: Informational messages and best practices
- TypeScript: Type-safe development
- Vite: Fast build tool and dev server
- Alpine.js: Lightweight reactive framework
- Tailwind CSS: Utility-first CSS framework
- csp_evaluator: Google's CSP security evaluator
- pako: Compression for URL state
- Vitest: Fast unit testing framework
The editor supports all standard CSP directives including:
default-src,script-src,style-srcimg-src,font-src,connect-srcframe-src,object-src,media-srcworker-src,manifest-srcform-action,frame-ancestors,base-uriupgrade-insecure-requests,block-all-mixed-content- And more...
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
- Google CSP Evaluator for security analysis
- Alpine.js for reactive UI framework
- Tailwind CSS for styling
Made with ❤️ for better web security