https://github.com/guydumais/next-strict-csp
Hash-based Strict Content Security Policy generator for Next.js
https://github.com/guydumais/next-strict-csp
content-security-policy nextjs
Last synced: 9 months ago
JSON representation
Hash-based Strict Content Security Policy generator for Next.js
- Host: GitHub
- URL: https://github.com/guydumais/next-strict-csp
- Owner: guydumais
- Created: 2021-09-10T23:10:27.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2021-09-27T17:12:03.000Z (over 4 years ago)
- Last Synced: 2025-03-28T23:34:19.632Z (10 months ago)
- Topics: content-security-policy, nextjs
- Homepage:
- Size: 5.86 KB
- Stars: 23
- Watchers: 2
- Forks: 2
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Next.js Strict Content Security Policy
Hash-based Strict Content Security Policy generator for Next.js to protect a single-page app (SPA) against XSS and CSP bypass.
## Why
Based on a study from Google:
1. 95% of real-world CSP deployments are bypassed.
2. 99.34% of hosts with CSP use policies that offer no benefit against XSS.
By using this package in your Next.js website you'll protect your single-page app (SPA) built with Next.js against XSS and CSP bypass.
## How to install
With NPM:
```
npm install next-strict-csp
```
With YARN:
```
yarn add next-strict-csp
```
## Basic usage
Integrate the CSP generator in your `_document.tsx` this way:
**_document.tsx**
```
...
// Next.js libraries
import Document, { Html, Head, Main, NextScript } from 'next/document'
// Next Strict Content Security Policy
import { NextStrictCSP } from 'next-strict-csp'
...
// Enable Head Strict CSP in production mode only
const HeadCSP = process.env.NODE_ENV === 'production' ? NextStrictCSP : Head
...
// Document component
class MyDoc extends Document {
render() {
return (
{ process.env.NODE_ENV === 'production' &&
}
...
...
...
)
}
}
```
## Advanced usage with inline scripts
You can also integrate any additionnal inline scripts and they'll get hashed automatically. Here's an example to add Google Tag Manager and Cloudflare Analytics inline scripts:
**_document.tsx**
```
...
// Next.js libraries
import Document, { Html, Head, Main, NextScript } from 'next/document'
// Next Strict Content Security Policy
import { NextStrictCSP } from 'next-strict-csp'
...
// Cloudflare Insights Script (Optional)
const cloudflareJs = `var s = document.createElement('script')
s.src = 'https://static.cloudflareinsights.com/beacon.min.js'
s.setAttribute('data-cf-beacon', '{"token": "YOUR CLOUDFLARE WEB ANALYTICS TOKEN STRING"}')
document.body.appendChild(s)`
// Google Tag Manager Script (Optional)
const GTMJs = `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','YOUR GOOGLE TAG MANAGER ID STRING');`
// Next Strict CSP
// Inline scripts to hash (Optional)
NextStrictCSP.inlineJs = [
cloudflareJs,
GTMJs
]
...
// Enable Head Strict CSP in production mode only
const HeadCSP = process.env.NODE_ENV === 'production' ? NextStrictCSP : Head
...
// Document component
class MyDoc extends Document {
render() {
return (
{ process.env.NODE_ENV === 'production' &&
}
...
{/* Google Tag Manager */}
{ process.env.NODE_ENV === 'production' &&
}
{/* End Google Tag Manager */}
{ process.env.NODE_ENV === 'production' &&
`,
}}
/>
}
...
{/* Cloudflare Web Analytics */}
{/**/}
{process.env.NODE_ENV === 'production' &&
}
{/* End Cloudflare Web Analytics */}
...
)
}
}
```
## Demo
Live demo with Next.js Strict CSP for testing with website security scanner available here:
[Guy Dumais](https://guydumais.digital/ "Guy Dumais Digital")
## Learn more
Learn more about website security and how to protect a Next.js website:
[Website Security](https://guydumais.digital/blog/tag/website-security/ "Website Security")