@magicdima/vite-plugin-csp 0.1.0

package/README.md

@@ -0,0 +1,92 @@
+# Vite CSP Plugin
+
+> WARNING: this package is not stable and it's API will change with every minor version upgrade
+
+A Vite plugin for managing Content Security Policy (CSP) headers and meta tags in your application.
+
+## Installation
+
+This package is part of the monorepo and should be installed via the workspace configuration.
+
+## Usage
+
+Import and configure the plugin in your `vite.config.ts`:
+
+```typescript
+import { defineConfig } from 'vite'
+import { cspPlugin } from '@gacha/vite-csp-plugin'
+
+export default defineConfig({
+  plugins: [
+    cspPlugin({
+      directives: {
+        'default-src': "'self'",
+        // accept single string policy
+        'script-src': "'self' 'unsafe-inline'",
+        'style-src': "'self' 'unsafe-inline'",
+        // or array of string that will be concatenated
+        'img-src': ["'self'", "data: https:"],
+        'connect-src': ["'self'", "https://api.example.com"]
+      }
+    })
+  ]
+})
+```
+
+## Options
+
+### `directives`
+
+An object containing CSP directives, or a function that returns such an object with access to the resolved Vite config. Each directive value can be a string or an array of strings. The plugin comes with sensible defaults:
+
+```typescript
+const defaultDirectives = {
+  'default-src': "'self'",
+  'script-src': ["'self'"],
+  'style-src': ["'self'"],
+  'img-src': ["'self'", "data:"],
+  'font-src': "'self'",
+  'connect-src': "'self'",
+  'media-src': "'self'",
+  'object-src': "'none'",
+  'frame-src': "'none'",
+  'worker-src': "'self'",
+  'manifest-src': "'self'",
+  'form-action': "'self'"
+}
+```
+
+You can override any of these defaults by providing your own values. When using arrays, they will be joined with spaces.
+
+### `enabled`
+
+Whether to enable CSP injection. Defaults to `true`.
+
+When disabled, the plugin will not inject CSP meta tag.
+
+### `policy`
+
+An additional CSP policy string to append to the generated policy. Useful for complex policies that don't fit the directive object structure.
+
+## How it works
+
+The plugin injects a `<meta http-equiv="Content-Security-Policy">` tag into the HTML head at build time.
+
+### Using a function for dynamic configuration with access to Vite config
+
+```typescript
+cspPlugin({
+  directives: (config) => {
+    // Access to resolved Vite config and environment variables
+    const isProduction = config.mode === 'production'
+    const apiUrl = config.env.VITE_API_URL || 'https://api.example.com'
+
+    return {
+      'default-src': "'self'",
+      'script-src': isProduction ? "'self'" : ["'self'", "'unsafe-inline'"],
+      'connect-src': ['self', apiUrl],
+      'img-src': ['self', 'data:', 'https:', 'blob:']
+    }
+  }
+})
+```

package/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@magicdima/vite-plugin-csp",
+  "version": "0.1.0",
+  "description": "",
+  "main": "src/index.ts",
+  "scripts": {
+    "build": "tsc"
+  },
+  "devDependencies": {
+    "typescript": "^5.9.3",
+    "vite": "^5.2.0"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "packageManager": "pnpm@10.17.1"
+}

package/src/index.ts

@@ -0,0 +1,121 @@
+import type { Plugin, ResolvedConfig } from "vite";
+
+export type CSPDirectiveValue = string | string[];
+
+export interface CSPDirectives {
+  "default-src"?: CSPDirectiveValue;
+  "script-src"?: CSPDirectiveValue;
+  "style-src"?: CSPDirectiveValue;
+  "img-src"?: CSPDirectiveValue;
+  "font-src"?: CSPDirectiveValue;
+  "connect-src"?: CSPDirectiveValue;
+  "media-src"?: CSPDirectiveValue;
+  "object-src"?: CSPDirectiveValue;
+  "frame-src"?: CSPDirectiveValue;
+  "worker-src"?: CSPDirectiveValue;
+  "manifest-src"?: CSPDirectiveValue;
+  "form-action"?: CSPDirectiveValue;
+}
+
+export interface CSPPluginOptions {
+  /**
+   * CSP directives to apply. Can be an object or a function that receives the Vite config.
+   */
+  directives?: CSPDirectives | ((config: ResolvedConfig) => CSPDirectives);
+
+  /**
+   * Whether to include CSP
+   * @default true
+   */
+  enabled?: boolean;
+
+  /**
+   * Additional CSP policy string to append
+   */
+  policy?: string;
+}
+
+const defaultDirectives: CSPDirectives = {
+  "default-src": "'self'",
+  "script-src": ["'self'"],
+  "style-src": ["'self'"],
+  "img-src": ["'self'", "data:"],
+  "font-src": "'self'",
+  "connect-src": "'self'",
+  "media-src": "'self'",
+  "object-src": "'none'",
+  "frame-src": "'none'",
+  "worker-src": "'self'",
+  "manifest-src": "'self'",
+  "form-action": "'self'",
+};
+
+function buildCSPHeader(directives: CSPDirectives): string {
+  const policies: string[] = [];
+
+  for (const [directive, value] of Object.entries(directives)) {
+    if (value === true) {
+      policies.push(directive);
+    } else if (value === false) {
+      // Skip false values
+    } else if (typeof value === "string") {
+      policies.push(`${directive} ${value}`);
+    } else if (Array.isArray(value)) {
+      policies.push(`${directive} ${value.join(" ")}`);
+    }
+  }
+
+  return policies.join("; ");
+}
+
+export function cspPlugin(options: CSPPluginOptions = {}): Plugin {
+  const {
+    directives = {},
+    enabled: includeCsp = true,
+    policy: additionalPolicy,
+  } = options;
+
+  let resolvedDirectives: CSPDirectives;
+
+  return {
+    name: "vite-csp-plugin",
+    configResolved(resolvedConfig) {
+      // Resolve directives (either function or object)
+      const userDirectives =
+        typeof directives === "function"
+          ? directives(resolvedConfig)
+          : directives;
+
+      // Merge default directives with user directives
+      resolvedDirectives = { ...defaultDirectives, ...userDirectives };
+    },
+
+    // configureServer(server) {
+    //   if (includeDev) {
+    //     const cspPolicy = buildCSPHeader(resolvedDirectives) +
+    //       (additionalPolicy ? `; ${additionalPolicy}` : '')
+    //     server.middlewares.use((_req, res, next) => {
+    //       res.setHeader('Content-Security-Policy', cspPolicy)
+    //       next()
+    //     })
+    //   }
+    // },
+
+    transformIndexHtml(html) {
+      if (!includeCsp) {
+        return html;
+      }
+
+      const cspPolicy =
+        buildCSPHeader(resolvedDirectives) +
+        (additionalPolicy ? `; ${additionalPolicy}` : "");
+
+      const cspMetaTag = `<meta http-equiv="Content-Security-Policy" content="${cspPolicy}" />`;
+
+      // Insert the CSP meta tag at the beginning of the head
+      return html.replace(/<head>/, `<head>\n    ${cspMetaTag}`);
+    },
+  };
+}
+
+export default cspPlugin;

package/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "outDir": "dist",
+    "noEmit": true,
+    "incremental": false,
+    "target": "ESNext",
+    "module": "NodeNext",
+    "moduleResolution": "nodenext",
+    "skipLibCheck": true,
+    "skipDefaultLibCheck": true,
+    "strictNullChecks": true, /* viem */
+    "types": ["node"]
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"]
+}