title | slug | tags | author | created | |
---|---|---|---|---|---|
Content Security Policy, inline scripts and Next.js |
content-security-policy-inline-scripts-and-next-js |
|
Daniel |
2020-04-29 08:28:41 -0700 |
TL;DR Use CSP with nonce & strict-dynamic
to secure the origin of inline scripts.
Updated 2021-02-17 for Helmet v4
Next includes client-side scripts in <script>
tags in Document
, so usually, a script-src 'self';
would be sufficient. However, I also needed to execute inline scripts, which meant that I either had to use unsafe-inline
(which is only marginally better than no CSP), a hash of the scripts' content, or a nonce. I went with nonce, and even though it turned out to be pretty straightforward in the end, it still ended up eating most of my afternoon today.
I used helmet
, an express
middleware that makes setting security headers easier. The types make it convenient to see all the configuration options.
$ yarn add helmet
$ yarn add -D @types/helmet
The idea is to generate a random nonce on every request, send it to the browser in the CSP header and make sure all scripts have a matching value: <script nonce={nonce}>
. See MDN for all possible CSP options.
'strict-dynamic'
tells the browser to trust any other code executed by already trusted code. If you specify 'strict-dynamic'
, the browser will disregard other options such as 'self' *.3rdparty.com
. Every script will then need to have the nonce.
import express from 'express'
import helmet from 'helmet'
import { v4 } from 'uuid'
const server = express()
const options = {
directives: {
'default-src': ["'self'"],
'script-src': [(req, res) => `'nonce-${res.locals.nonce}' 'strict-dynamic'`],
},
// ... more config options
}
// generate a nonce on every request and save it
server.use((req, res, next) => {
res.locals.nonce = v4()
helmet.contentSecurityPolicy(options)(req, res, next)
})
We will need to pass the nonce to Next as well as any other scripts. Let's create a custom Document
in pages/_document.tsx
, retrieve the nonce from context and pass it down:
import Document, {
Head,
Html,
Main,
NextScript,
DocumentContext,
} from 'next/document'
import { ServerResponse } from 'http'
type ResponseWithNonce = ServerResponse & { locals: { nonce?: string } }
type CustomDocumentProps = {
nonce?: string
}
class CustomDocument extends Document<CustomDocumentProps> {
static async getInitialProps(ctx: DocumentContext) {
// get the nonce from res.locals.nonce
const nonce = (ctx.res as ResponseWithNonce).locals.nonce
const initialProps = await Document.getInitialProps(ctx)
return { ...initialProps, nonce }
}
render() {
return (
<Html>
{/* pass it to Next Head */}
<Head nonce={this.props.nonce} />
<body>
<Main />
{/* pass it to Next scripts */}
<NextScript nonce={this.props.nonce} />
{/* as well as any other scripts */}
<script
src="https://trustworthy-conglomerate.com/vacuum.js"
nonce={this.props.nonce}
/>
</body>
</Html>
)
}
}
export default CustomDocument
If you don't need to execute inline scripts, you don't need this nonce stuff. It will suffice to specify trusted origins: script-src 'self' *.3rdparty.com;
.