2018-08-14 20:05:25 +02:00
|
|
|
import crypto from 'crypto'
|
2019-02-21 00:42:53 +01:00
|
|
|
import Document, { Html, Head, Main, NextScript } from 'next/document'
|
2018-04-12 10:33:22 +02:00
|
|
|
|
2019-05-30 03:19:32 +02:00
|
|
|
const cspHashOf = text => {
|
2018-08-14 20:05:25 +02:00
|
|
|
const hash = crypto.createHash('sha256')
|
|
|
|
|
hash.update(text)
|
|
|
|
|
return `'sha256-${hash.digest('base64')}'`
|
|
|
|
|
}
|
|
|
|
|
|
2018-04-12 10:33:22 +02:00
|
|
|
export default class MyDocument extends Document {
|
2019-11-11 04:24:53 +01:00
|
|
|
static async getInitialProps(ctx) {
|
2018-07-13 11:22:45 +02:00
|
|
|
let options
|
|
|
|
|
|
2019-05-30 03:19:32 +02:00
|
|
|
const enhanceComponent = Component => props => (
|
|
|
|
|
<div>
|
2019-11-11 04:24:53 +01:00
|
|
|
<span id="render-page-enhance-component">RENDERED</span>
|
2019-05-30 03:19:32 +02:00
|
|
|
<Component {...props} />
|
|
|
|
|
</div>
|
|
|
|
|
)
|
|
|
|
|
const enhanceApp = Component => props => (
|
|
|
|
|
<div>
|
2019-11-11 04:24:53 +01:00
|
|
|
<span id="render-page-enhance-app">RENDERED</span>
|
2019-05-30 03:19:32 +02:00
|
|
|
<Component {...props} />
|
|
|
|
|
</div>
|
|
|
|
|
)
|
2018-07-13 11:22:45 +02:00
|
|
|
|
|
|
|
|
if (ctx.query.withEnhancer) {
|
|
|
|
|
options = enhanceComponent
|
|
|
|
|
} else if (ctx.query.withEnhanceComponent || ctx.query.withEnhanceApp) {
|
|
|
|
|
options = {}
|
|
|
|
|
if (ctx.query.withEnhanceComponent) {
|
|
|
|
|
options.enhanceComponent = enhanceComponent
|
|
|
|
|
}
|
|
|
|
|
if (ctx.query.withEnhanceApp) {
|
|
|
|
|
options.enhanceApp = enhanceApp
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const result = ctx.renderPage(options)
|
|
|
|
|
|
2019-05-30 03:19:32 +02:00
|
|
|
return {
|
|
|
|
|
...result,
|
|
|
|
|
customProperty: 'Hello Document',
|
2019-11-11 04:24:53 +01:00
|
|
|
withCSP: ctx.query.withCSP,
|
2019-05-30 03:19:32 +02:00
|
|
|
}
|
2018-04-12 10:33:22 +02:00
|
|
|
}
|
|
|
|
|
|
2019-11-11 04:24:53 +01:00
|
|
|
render() {
|
2018-08-14 20:05:25 +02:00
|
|
|
let csp
|
2019-11-11 04:24:53 +01:00
|
|
|
// eslint-disable-next-line default-case
|
2018-08-14 20:05:25 +02:00
|
|
|
switch (this.props.withCSP) {
|
|
|
|
|
case 'hash':
|
2019-05-30 03:19:32 +02:00
|
|
|
csp = `default-src 'self'; script-src 'self' ${cspHashOf(
|
|
|
|
|
NextScript.getInlineScriptSource(this.props)
|
|
|
|
|
)}; style-src 'self' 'unsafe-inline'`
|
2018-08-14 20:05:25 +02:00
|
|
|
break
|
|
|
|
|
case 'nonce':
|
|
|
|
|
csp = `default-src 'self'; script-src 'self' 'nonce-test-nonce'; style-src 'self' 'unsafe-inline'`
|
|
|
|
|
break
|
|
|
|
|
}
|
|
|
|
|
|
2018-04-12 10:33:22 +02:00
|
|
|
return (
|
2019-11-11 04:24:53 +01:00
|
|
|
<Html className="test-html-props">
|
|
|
|
|
<Head nonce="test-nonce">
|
2019-05-30 03:19:32 +02:00
|
|
|
{csp ? (
|
2019-11-11 04:24:53 +01:00
|
|
|
<meta httpEquiv="Content-Security-Policy" content={csp} />
|
2019-05-30 03:19:32 +02:00
|
|
|
) : null}
|
2018-04-12 10:33:22 +02:00
|
|
|
<style>{`body { margin: 0 } /* custom! */`}</style>
|
|
|
|
|
</Head>
|
2019-11-11 04:24:53 +01:00
|
|
|
<body className="custom_class">
|
|
|
|
|
<p id="custom-property">{this.props.customProperty}</p>
|
|
|
|
|
<p id="document-hmr">Hello Document HMR</p>
|
2018-04-12 10:33:22 +02:00
|
|
|
<Main />
|
2019-11-11 04:24:53 +01:00
|
|
|
<NextScript nonce="test-nonce" />
|
2018-04-12 10:33:22 +02:00
|
|
|
</body>
|
2019-02-21 00:42:53 +01:00
|
|
|
</Html>
|
2018-04-12 10:33:22 +02:00
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
}
|
