Content Security Policy (CSP) Header Builder

A professional-grade, browser-based utility designed for web developers to construct, validate, and export Content Security Policy (CSP) headers. This tool simplifies the complex syntax of security headers into a clean, interactive user interface.

Core Features

• Directive Toggle System: A modular list of all major CSP directives (e.g., script-src, style-src, img-src, connect-src, frame-ancestors).
• Source Configuration: Each directive allows users to add multiple sources (e.g., 'self', 'unsafe-inline', specific domains, protocols like https:).
• Real-time Syntax Validation: The tool provides instant feedback if a directive or source is improperly formatted.
• One-Click Export: Copy the generated header string directly to your clipboard for immediate implementation in web server configurations (Apache, Nginx, or meta tags).
• Preset Templates: Quick-start buttons to load "Strict/High Security" or "Permissive/Development" default profiles.
• Zero-Storage Architecture: No persistence mechanisms are used. State is handled entirely in memory.

UI/UX Design Specification

• Layout: A two-column split-screen layout on desktop. The left panel contains the configuration form (accordion style); the right panel acts as a "sticky" code viewer showing the generated policy.
• Palette: A clean, professional light-mode aesthetic using shades of slate, white, and a vibrant primary blue for call-to-action buttons.
  • Primary: #2563eb (Blue)
  • Background: #f8fafc (Light Slate)
  • Text: #1e293b (Dark Slate)
  • Borders: #e2e8f0
• Typography: Sans-serif, system-ui font stack (Inter or similar) for high readability.
• Animations: Subtle transition effects on hover states for buttons and smooth entry animations for new directive rows being added.

Technical Implementation Constraints

• Frameworks: Pure HTML5, CSS3, and Vanilla JavaScript. Tailwind CSS (via CDN) is permitted for styling.
• State Management: All configuration data must be held in a standard JavaScript object within a single memory scope.
• Storage: Explicitly banned. Do not use localStorage, sessionStorage, or cookies to save progress.
• Security: Use custom modal UI elements for any confirmation or alerts—no browser-native alert() or confirm().
• Responsive Behavior: On mobile screens, the layout must stack vertically, with the configuration form appearing above the output pane. The output pane should be collapsible to save screen space.
• Compatibility: Ensure the app handles null-origin iframe environments by avoiding any code that attempts to access window.localStorage or parent-window restricted APIs.