A Nuxt module for collecting, normalizing, and persisting Content Security Policy reports
npm install nuxt-csp-reportContent-Security-Policy: script-src example.com; will prevent any script tag from loading a source that is not from example.com. Any violation will be logged in the console of the browser. Additionally, a reporting endpoint can be set in the CSP header where the browser will send the CSP report to.
Reporting-Endpoints header to your responses for report-to support
report-uri and report-to format reports
bash
npm install nuxt-csp-report
`
Add it to your nuxt.config.ts:
`typescript
export default defineNuxtConfig({
modules: ['nuxt-csp-report'],
cspReport: {
// Module options
},
})
`
Examples
* Minimal starter: 
* Source: examples/minimal/nuxt.config.ts and examples/minimal/app.vue.
StackBlitz runs inside an iframe; the example CSP allows frame-ancestors for .stackblitz.io, .webcontainer.io, and .local-credentialless.webcontainer.io.
* Playground (used for development): playground/nuxt.config.ts with nuxt-security defaults and extra logging.
Usage
The module is ready to go with the defaults.
In most use cases simple logs are sufficient. If you want to analyze CSP reports, you can use the storage option to persist the reports in a KV store.
$3
The Content Security Policy is set through specific headers. You can handle that yourself with Nuxt/Nitro, but I highly recommend using nuxt-security.
Here is a minimal example of how to use the two moduls in combination:
`typescript
export default defineNuxtConfig({
modules: ['nuxt-security', 'nuxt-csp-report'],
security: {
headers: {
contentSecurityPolicy: {
'report-uri': '/api/csp-report',
// your CSP headers
},
},
},
})
`
$3
Depending on your use case you might want to access the CSP reports. You can do that with useStorage:
`typescript
export default defineNuxtConfig({
modules: ['nuxt-csp-report'],
cspReport: {
storage: {
driver: {
name: 'redis',
options: {
// Your redis configuration
}
}
},
},
})
`
`typescript
import { type NormalizedCspReport } from 'nuxt-csp-report'
const storage = useStorage('csp-report-storage')
`
Options
$3
* Type: string
* Default: /api/csp-report
* Description: Optional. Path for the CSP report endpoint.
$3
* Type: boolean
* Default: false
* Description: Optional. Adds the Reporting-Endpoints header to your HTML responses, using 'csp-endpoint' as the key and endpoint from the configuration as the value. This header is needed if you want to use report-to csp-endpoint in your CSP configuration.
$3
* Type: 'summary' | 'full' | false
* Default: 'summary'
* Description: Optional. Log reports to console on server. 'full' will print the NormalizedCspReport object.
$3
* Type: See fields below.
* Description: Optional. Sets up a storage using unstorage, which is part of Nitro and Nuxt.
$3
* Type: BuiltinDriverOptions
* Description: Defines the driver from unstorage. You can use the same notation and drivers as in Nuxt:
* https://nuxt.com/docs/4.x/directory-structure/server#server-storage
* https://nitro.build/guide/storage
* https://unstorage.unjs.io/drivers
$3
* Type: string
* Default: csp-report
* Description: Optional. Key prefix for the stored reports.
Contribution
Local development
`bash
# Install dependencies
pnpm install
# Generate type stubs
pnpm dev:prepare
# Develop with the playground
pnpm dev
# Build the playground
pnpm dev:build
# Run ESLint
pnpm lint
# Run Vitest
pnpm test
pnpm test:watch
# Build the module
pnpm prepack
# Release new version
pnpm release
``