feat: Content Security Policy (CSP) Header Builder & Validator

[ajithakdev]

Summary

Add an interactive Content Security Policy (CSP) header generator and syntax validator to help web developers, security engineers, and DevOps build bulletproof Content-Security-Policy headers.

Motivation

Crafting secure CSP headers is notoriously error-prone. Developers often accidentally break fonts, scripts, or inline styles, or leave wide-open vulnerabilities like 'unsafe-inline' without nonces/hashes. Existing online generators are either outdated or require sign-up.

Features

• Interactive Directive Builder:
  • Sections for: default-src, script-src, style-src, img-src, connect-src, font-src, object-src, frame-ancestors, base-uri, form-action.
  • Checkboxes for standard values: 'self', 'none', 'strict-dynamic', 'unsafe-inline' (with warning), https:, data:, blob:.
  • Custom origin/domain input tags with auto-validation.
• Security Health Score & Linting Warnings:
  • Flags dangerous configurations (e.g. missing object-src 'none', overly broad wildcards like *).
  • Suggests modern best practices (strict CSP with nonces or hashes).
• Multi-Format Export:
  • Raw HTTP Header: Content-Security-Policy: default-src 'self'; ...
  • HTML <meta> tag: <meta http-equiv="Content-Security-Policy" content="...">
  • Nginx configuration: add_header Content-Security-Policy "...";
  • Apache .htaccess and Caddy directives.
• CSP Parser: Paste an existing CSP string to unpack it into the visual editor and audit its rules.

Engineering & Privacy

• 100% Client-Side: Static policy validator and string formatter.
• Zero Dependencies: Pure TypeScript.