Csp-helper NPM

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 Fonts
- Google Identity
- Google Tag Manager
- Hotjar
- Infogram
- 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);