mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
419bec0b9b
# Fixes https://github.com/zeit/next.js/issues/5674 This adds config option ```js // next.config.js module.exports = { crossOrigin: 'anonymous' } ``` This config option is defined in the webpack Define Plugin at build. `Head` and `NextScript` now use the config option, if it's not explicitly set on the element. This value is now passed to Webpack so it can add it to scripts that it loads. The value is now used in `PageLoader` (on the client) so it can add it to the scripts and links that it loads. Using `<Head crossOrigin>` or `<NextScript crossOrigin>` is now deprecated.
61 lines
1.9 KiB
JavaScript
61 lines
1.9 KiB
JavaScript
import crypto from 'crypto'
|
|
import Document, { Head, Main, NextScript } from 'next/document'
|
|
|
|
const cspHashOf = (text) => {
|
|
const hash = crypto.createHash('sha256')
|
|
hash.update(text)
|
|
return `'sha256-${hash.digest('base64')}'`
|
|
}
|
|
|
|
export default class MyDocument extends Document {
|
|
static async getInitialProps (ctx) {
|
|
let options
|
|
|
|
const enhanceComponent = Component => (props) => <div><span id='render-page-enhance-component'>RENDERED</span><Component {...props} /></div>
|
|
const enhanceApp = Component => (props) => <div><span id='render-page-enhance-app'>RENDERED</span><Component {...props} /></div>
|
|
|
|
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)
|
|
|
|
return { ...result, customProperty: 'Hello Document', withCSP: ctx.query.withCSP }
|
|
}
|
|
|
|
render () {
|
|
let csp
|
|
switch (this.props.withCSP) {
|
|
case 'hash':
|
|
csp = `default-src 'self'; script-src 'self' ${cspHashOf(NextScript.getInlineScriptSource(this.props))}; style-src 'self' 'unsafe-inline'`
|
|
break
|
|
case 'nonce':
|
|
csp = `default-src 'self'; script-src 'self' 'nonce-test-nonce'; style-src 'self' 'unsafe-inline'`
|
|
break
|
|
}
|
|
|
|
return (
|
|
<html>
|
|
<Head nonce='test-nonce'>
|
|
{csp ? <meta httpEquiv='Content-Security-Policy' content={csp} /> : null}
|
|
<style>{`body { margin: 0 } /* custom! */`}</style>
|
|
</Head>
|
|
<body className='custom_class'>
|
|
<p id='custom-property'>{this.props.customProperty}</p>
|
|
<p id='document-hmr'>Hello Document HMR</p>
|
|
<Main />
|
|
<NextScript nonce='test-nonce' />
|
|
</body>
|
|
</html>
|
|
)
|
|
}
|
|
}
|