express-csp-header is an Express.js middleware designed to streamline the implementation of Content-Security-Policy (CSP) headers in web applications. It wraps the functionality of the `csp-header` package, providing an Express-specific interface. Currently at stable version 6.3.1, the package maintains an active release cadence, frequently releasing patches and minor features. Key differentiators include its integration with Express's middleware system, providing convenient constants like `SELF`, `INLINE`, `NONCE`, and `TLD` for dynamic policy generation. It also features automatic Top-Level Domain (TLD) parsing and custom CSP string processing capabilities. The library facilitates managing both `Content-Security-Policy` and `Reporting-Endpoints` headers, making it easier to implement robust web security measures against attacks like XSS. It requires Node.js version 18 or higher.
npm install express-csp-headerVerified import paths — ran on the pinned version, not inferred.
This quickstart sets up a basic Express server and applies a Content-Security-Policy using `express-csp-header`. It demonstrates the use of common directives like `default-src`, `script-src` with `NONCE` for inline scripts, `style-src` with `INLINE`, and `img-src`. It also shows how to enable `report-uri` for violation reporting and access the dynamically generated nonce from `req.nonce`.
Manually review and adjust your CSP directives if you were depending on implicit removal of `'none'` when other sources were present for the same directive. Ensure each directive explicitly states its allowed sources without relying on removed values.
Ensure your project is running on Node.js version 18 or higher. Update your Node.js environment or adjust your project's `engines` field accordingly.
Migrate your CSP configurations from using the `extend` option to the `presets` option. Refer to the `csp-header` documentation for the correct `presets` usage.
Update your import statements to use named destructuring: `const { expressCspHeader } = require('express-csp-header');` for CommonJS or `import { expressCspHeader } from 'express-csp-header';` for ESM.Prioritize `report-uri` in conjunction with `Content-Security-Policy-Report-Only` for initial deployment and testing, then transition to enforced `Content-Security-Policy` with a robust `report-uri` or `report-to` configuration as needed for modern browsers. Consult MDN Web Docs for the latest CSP reporting recommendations.
Always deploy CSP in `reportOnly: true` mode first to collect violation reports and fine-tune your policy. Use the browser's developer console and your configured `report-uri` endpoint to identify and resolve all legitimate resource blocks before enforcing the policy.
Inspect your browser's developer console for the exact CSP violation message. Adjust the corresponding CSP directive in `express-csp-header` to include the blocked source (e.g., `'unsafe-inline'`, `'unsafe-eval'`, `NONCE`, or specific domains). For inline scripts/styles, use `NONCE` or `INLINE` (with caution).
Ensure `app.use(expressCspHeader(...))` is placed early in your Express middleware chain, typically before any routes or other middleware that might send responses.
Verify that `NONCE` is included in the relevant `script-src` or `style-src` directives passed to `expressCspHeader`. Also, ensure the middleware is active for the route where `req.nonce` is accessed.