Content Security Policy Generator, Powered by RapidSec

Content Security Policy (CSP) helps prevent unwanted content from being injected/loaded into your webpages. This can mitigate cross-site scripting (XSS) vulnerabilities, Clickjacking, Formjacking, malicious frames, unwanted trackers, client-side injected malware, and other web client-side attacks.

Getting started with CSP - create your report-uri and first CSP on RapidSec

Go to RapidSec and generate your first CSP. Choose a JSON export, that works with this specific express middleware. You could otherwise use the RapidSec Node.js MicroAgent which is even more automatic.

Install this package in your Express project

npm install express-csp-generator or yarn add express-csp-generator

Add the report-only policy that you generated on RapidSec to send violation data to the report-uri:

const contentSecurityPolicy = require("express-csp-generator");

app.use(
  contentSecurityPolicy({
    directives: {
      "frame-ancestors": ["'none'"],
      "block-all-mixed-content": [],
      "default-src": ["'none'"],
      "script-src": ["'self'", "'report-sample'"],
      "style-src": ["'self'", "'report-sample'"],
      "object-src": ["'none'"],
      "frame-src": ["'none'"],
      "child-src": ["'none'"],
      "img-src": ["'self'"],
      "font-src": ["'self'"],
      "connect-src": ["'none'"],
      "manifest-src": ["'none'"],
      "base-uri": ["'self'"],
      "form-action": ["'none'"],
      "media-src": ["'none'"],
      "prefetch-src": ["'none'"],
      "worker-src": ["'none'"],
      "report-uri": [
        "https://gate.rapidsec.net/YOUR_SPECIFIC_RAPIDSEC_ENDPOINT",
      ],
    },
    reportOnly: true,
  })
);

Now visit your local/ deployed site

You should see "Report-Only" CSP violations in your browser. See example from Google.com (if implementing the middleware with RapidSec's Generated CSP):

Use the CSP builder to generate your CSP based on the reports

See your new CSP violations quickly from the menu bar and easily Allow or Dismiss them by CSP directive. Includes explanations on the meaning of each directive.

Deploy versions of your CSP

Once you've allowed the appropriate assets, click "Build CSP", to generate a new version of your content-security-policy.

See In-depth Analytics

Explore your CSP reports. Dig into your data. Slice and dice by multiple parameters. Understand which assets / pages / browsers are generating CSP violations, and access a detailed report view.

Get Reports

Deployed your Report-Only CSP and now your users covered some additional flows with some additional browsers? You'll get an email with a summary of your new pending review CSP violations.

Note

This Express middleware does minimal validation on the CSP integrity and quality, and relies that you're generating proper CSPs via RapidSec. If you choose to build your CSP manually - use a more sophisticated CSP validator, like CSP Scanner to make sure your CSP is both valid, and effective at mitigating attacks.

See also

• RapidSec CSP Generator
• CSP Scanner
• CSP Scanner Chrome Extension
• CSP Bypasses

Legal

Original code modified from MIT licensed Helmet-CSP