Skip to main content

CSP Kit Documentation

The modern TypeScript-first Content Security Policy toolkit for developers

🌐 Try Web Interface📦 Install Packages🛠️ CLI Tools🤝 Contribute


🚀 Quick Start

Choose Your Interface

MethodBest ForTime to Start
🌐 Web InterfaceBeginners, visual learners, quick testing0 minutes
📦 TypeScript APIDevelopers, production apps2 minutes
🛠️ CLI ToolsContributors, automation5 minutes

👉 Try CSP Kit Web Generator

  • ✅ No installation required
  • ✅ Visual service selection (106+ services)
  • ✅ Real-time CSP generation
  • ✅ Copy ready-to-use headers
  • ✅ Works on mobile and desktop

For Developers: TypeScript API

# Install both packages (required)
npm install @csp-kit/generator @csp-kit/data
import { generateCSP } from '@csp-kit/generator';
import { GoogleAnalytics, Stripe, GoogleFonts } from '@csp-kit/data';

const result = generateCSP({
services: [GoogleAnalytics, Stripe, GoogleFonts],
});
console.log(result.header);
// "script-src 'self' https://www.googletagmanager.com..."

📚 Documentation

🎯 User Guides

GuideDescriptionAudience
Getting StartedInstallation, TypeScript API, common patternsNew users
Web InterfaceInteractive CSP generator guideAll users
API ReferenceComplete TypeScript API documentationDevelopers
CLI GuideCommand-line tools referenceAdvanced users

📖 Reference

ResourceDescription
Service SupportList of 106+ supported services
Framework ExamplesNext.js, Express, and more

🤝 Contributing

GuideDescription
Contributing GuideHow to contribute TypeScript service definitions
Service DevelopmentComplete guide for creating services

🔧 For Maintainers

GuideDescription
ArchitectureTechnical architecture overview
Service Definition GuideTypeScript service schema documentation
Maintainer GuideProject maintenance procedures
Release ProcessHow releases are managed

🎯 What is CSP Kit?

CSP Kit transforms Content Security Policy management from manual, error-prone work into a TypeScript-first, service-based approach:

// ❌ Traditional approach: Manual, hard to maintain
const csp =
"script-src 'self' https://www.googletagmanager.com https://js.stripe.com; style-src 'self' https://fonts.googleapis.com...";

// ✅ CSP Kit approach: Type-safe, automatic, always up-to-date
import { GoogleAnalytics, Stripe, GoogleFonts } from '@csp-kit/data';
const { header } = generateCSP({ services: [GoogleAnalytics, Stripe, GoogleFonts] });

🌟 Key Benefits

  • 🎯 TypeScript-First: Full type safety with IntelliSense support
  • 📦 106+ Services: Pre-configured TypeScript service definitions
  • 🌳 Tree-Shakeable: Only bundle the services you actually use
  • 🔄 Always Updated: Community-driven with automated monitoring
  • 🌐 Multiple Interfaces: Web UI, CLI tools, and TypeScript API
  • 🚀 Production Ready: Used by thousands of developers worldwide
  • 🔒 Security-First: Conservative defaults with expert guidance

🏗️ Architecture

📦 Package Structure

CSP Kit uses a data-package separation model:

@csp-kit/generator   # Core CSP generation library
@csp-kit/data # TypeScript service definitions (updates frequently)
@csp-kit/cli # Command-line tools

Why separate packages?

  • Fast Updates: Get new services without library updates
  • Stable API: Core library changes rarely
  • Tree Shaking: Only bundle the services you import
  • Type Safety: Full TypeScript support with IntelliSense
  • Community Driven: Easy for contributors to add services

🌐 TypeScript-First Design

FeatureBenefit
Direct Importsimport { GoogleAnalytics } from '@csp-kit/data'
Type SafetyFull compile-time checking and IntelliSense
Tree ShakingOnly bundle the services you use
No Runtime LoadingServices imported at build time
Better DXClear dependencies and refactoring support

🚀 What's New in v2.x

TypeScript-First API

TypeScript-first design provides better developer experience:

// TypeScript imports with full type safety
import { GoogleAnalytics, Stripe } from '@csp-kit/data';
const result = generateCSP({ services: [GoogleAnalytics, Stripe] });

🤝 Community

🎯 Get Involved

📊 Project Stats

  • 106+ Supported Services across all major categories
  • TypeScript-First with full IntelliSense support
  • Weekly Data Updates with new services and fixes
  • Active Community of contributors and users
  • Production Ready with comprehensive testing
  • MIT Licensed - Free forever for commercial and personal use
  • Open Source - Transparent development, community-driven, no vendor lock-in

🆘 Need Help?

📞 Support Channels

ChannelBest ForResponse Time
📖 DocumentationGuides, API reference, examplesInstant
🌐 Web InterfaceInteractive CSP generationInstant
💬 GitHub DiscussionsQuestions, feature requests~24 hours
🐛 GitHub IssuesBug reports, specific problems~48 hours

🚀 Quick Solutions

First time user? → Start with the Web Interface

Need to install? → Follow the Getting Started Guide

Looking for a service? → Check Service Support

Want to contribute? → Read the Contributing Guide

Having trouble? → Search GitHub Issues


🎉 Welcome to CSP Kit!

Making Content Security Policy simple, maintainable, and type-safe for everyone.

Get Started →