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
Legal
Original code modified from MIT licensed Helmet-CSP