csp-helper

csp-helper

Helpers for creating Content Security Policy (CSP) headers.

• Zero dependencies
• Build with TypeScript
• Merging multiple CSP configurations
• Providing preset CSP configurations for:
  • Datadog
  • Google Ads
  • Google Analytics 4
  • Google Identity
  • Google Tag Manager
  • Hotjar
  • Reddit
  • TikTok
  • Vimeo
  • X
  • Youtube
  • ... and more

Installation

npm install csp-helper

Usage

createCspHeader

Create a CSP header string from a CSP configuration object.

import {
  CSP_PRESET_DATADOG_INTAKE_URLS,
  CSP_PRESET_DATADOG_WEB_WORKER,
  CSP_PRESET_GOOGLE_ANALYTICS_4,
  CSP_PRESET_GOOGLE_TAG_MANAGER_UNSAFE_INLINE,
  CSP_PRESET_HOTJAR,
  createCspHeader,
} from 'csp-helper';

const cspHeader = createCspHeader(
  {
    'default-src': `'self'`,
    'script-src': `'self' https://example.com`,
    'style-src': `'self' https://example.com`,
  },
  {
    includeHeaderName: true,
    presets: [
      CSP_PRESET_DATADOG_INTAKE_URLS,
      CSP_PRESET_DATADOG_WEB_WORKER,
      CSP_PRESET_GOOGLE_ANALYTICS_4,
      CSP_PRESET_GOOGLE_TAG_MANAGER_UNSAFE_INLINE,
      CSP_PRESET_HOTJAR,
    ],
  },
);

console.log(cspHeader);

mergeCspConfigs

Merge multiple CSP configurations into one.

• Same values will be automatically deduplicated.
• Presets could also be used for merging.

import {
  CSP_PRESET_GOOGLE_ANALYTICS_4,
  CSP_PRESET_GOOGLE_TAG_MANAGER_UNSAFE_INLINE,
  mergeCspConfigs,
} from 'csp-helper';

const cspConfig = mergeCspConfigs([
  {
    'default-src': `'self'`,
    'script-src': `'self' https://example.com`,
    'style-src': `'self' https://example.com`,
  },
  {
    'script-src': `'self' https://example.com https://example2.com`,
    'style-src': `'self' https://example.com https://example2.com`,
  },
  CSP_PRESET_GOOGLE_ANALYTICS_4,
  CSP_PRESET_GOOGLE_TAG_MANAGER_UNSAFE_INLINE,
]);

console.log(cspConfig);

License

MIT © meteorlxy & Contributors

Changelog

0.4.1 (2024-10-01)

Bug Fixes

• add connect-src and img-src for vimeo (cd78c59)

Bug Fixes

• fix tiktok preset exports (f5ce43e)

Features

• add vimeo preset (cead867)