From 419bec0b9b76f0fe22efc0e7597a356978830613 Mon Sep 17 00:00:00 2001 From: Connor Davis Date: Wed, 12 Dec 2018 18:05:21 -0600 Subject: [PATCH] Fix #5674 Append crossOrigin on the client side too, add config option for crossOrigin (#5873) # 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 `` or `` is now deprecated. --- errors/doc-crossorigin-deprecated.md | 20 ++++++++++++ packages/next/README.md | 12 +++---- packages/next/build/webpack-config.js | 2 ++ packages/next/client/page-loader.js | 2 ++ packages/next/pages/_document.js | 31 +++++++++++-------- test/integration/app-document/next.config.js | 3 ++ .../app-document/pages/_document.js | 4 +-- 7 files changed, 53 insertions(+), 21 deletions(-) create mode 100644 errors/doc-crossorigin-deprecated.md create mode 100644 test/integration/app-document/next.config.js diff --git a/errors/doc-crossorigin-deprecated.md b/errors/doc-crossorigin-deprecated.md new file mode 100644 index 00000000..6a4c8913 --- /dev/null +++ b/errors/doc-crossorigin-deprecated.md @@ -0,0 +1,20 @@ +# `Head` or `NextScript` attribute `crossOrigin` is deprecated + +#### Why This Error Occurred + +This option has been moved to `next.config.js`. + +#### Possible Ways to Fix It + +Add the config option: + +```js +// next.config.js +module.exports = { + crossOrigin: 'anonymous' +} +``` + +### Useful Links + +- [The issue this was reported in: #5674](https://github.com/zeit/next.js/issues/5674) diff --git a/packages/next/README.md b/packages/next/README.md index 3b1b6c84..485f8e32 100644 --- a/packages/next/README.md +++ b/packages/next/README.md @@ -1526,13 +1526,13 @@ module.exports = { Note: Next.js will automatically use that prefix in the scripts it loads, but this has no effect whatsoever on `/static`. If you want to serve those assets over the CDN, you'll have to introduce the prefix yourself. One way of introducing a prefix that works inside your components and varies by environment is documented [in this example](https://github.com/zeit/next.js/tree/master/examples/with-universal-configuration). -If your CDN is on a separate domain and you would like assets to be requested using a [CORS aware request](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes) you can extend _document.js and specify the `crossOrigin` attribute on Head and NextScripts which is then used for all Next.js asset tags. +If your CDN is on a separate domain and you would like assets to be requested using a [CORS aware request](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes) you can set a config option for that. + ```js -... - -
- - +// next.config.js +module.exports = { + crossOrigin: 'anonymous' +} ``` ## Production deployment diff --git a/packages/next/build/webpack-config.js b/packages/next/build/webpack-config.js index 01fc3cfb..ed68e6d9 100644 --- a/packages/next/build/webpack-config.js +++ b/packages/next/build/webpack-config.js @@ -258,6 +258,7 @@ export default async function getBaseWebpackConfig (dir, {dev = false, isServer // This saves chunks with the name given via `import()` chunkFilename: isServer ? `${dev ? '[name]' : '[name].[contenthash]'}.js` : `static/chunks/${dev ? '[name]' : '[name].[contenthash]'}.js`, strictModuleExceptionHandling: true, + crossOriginLoading: config.crossOrigin, webassemblyModuleFilename: 'static/wasm/[modulehash].wasm' }, performance: { hints: false }, @@ -327,6 +328,7 @@ export default async function getBaseWebpackConfig (dir, {dev = false, isServer !dev && new webpack.HashedModuleIdsPlugin(), // Removes server/client code by minifier new webpack.DefinePlugin({ + 'process.crossOrigin': JSON.stringify(config.crossOrigin), 'process.browser': JSON.stringify(!isServer) }), // This is used in client/dev-error-overlay/hot-dev-client.js to replace the dist directory diff --git a/packages/next/client/page-loader.js b/packages/next/client/page-loader.js index 0bf539b1..f6eb6e90 100644 --- a/packages/next/client/page-loader.js +++ b/packages/next/client/page-loader.js @@ -83,6 +83,7 @@ export default class PageLoader { const script = document.createElement('script') const url = `${this.assetPrefix}/_next/static/${encodeURIComponent(this.buildId)}/pages${scriptRoute}` + script.crossOrigin = process.crossOrigin script.src = url script.onerror = () => { const error = new Error(`Error when loading route: ${route}`) @@ -137,6 +138,7 @@ export default class PageLoader { if (hasPreload) { const link = document.createElement('link') link.rel = 'preload' + link.crossOrigin = process.crossOrigin link.href = `${this.assetPrefix}/_next/static/${encodeURIComponent(this.buildId)}/pages${scriptRoute}` link.as = 'script' document.head.appendChild(link) diff --git a/packages/next/pages/_document.js b/packages/next/pages/_document.js index 53fa9717..560c402f 100644 --- a/packages/next/pages/_document.js +++ b/packages/next/pages/_document.js @@ -61,7 +61,7 @@ export class Head extends Component { nonce={this.props.nonce} rel='stylesheet' href={`${assetPrefix}/_next/${file}`} - crossOrigin={this.props.crossOrigin} + crossOrigin={this.props.crossOrigin || process.crossOrigin} /> }) } @@ -75,7 +75,7 @@ export class Head extends Component { href={`${assetPrefix}/_next/${bundle.file}`} as='script' nonce={this.props.nonce} - crossOrigin={this.props.crossOrigin} + crossOrigin={this.props.crossOrigin || process.crossOrigin} /> }) } @@ -98,7 +98,7 @@ export class Head extends Component { rel='preload' href={`${assetPrefix}/_next/${file}`} as='script' - crossOrigin={this.props.crossOrigin} + crossOrigin={this.props.crossOrigin || process.crossOrigin} /> }) } @@ -117,14 +117,15 @@ export class Head extends Component { } return child }) + if (this.props.crossOrigin) console.warn('Warning: `Head` attribute `crossOrigin` is deprecated. https://err.sh/next.js/doc-crossorigin-deprecated') } return {children} {head} - {page !== '/_error' && } - - + {page !== '/_error' && } + + {this.getPreloadDynamicChunks()} {this.getPreloadMainLinks()} {this.getCssLinks()} @@ -164,7 +165,7 @@ export class NextScript extends Component { key={bundle.file} src={`${assetPrefix}/_next/${bundle.file}`} nonce={this.props.nonce} - crossOrigin={this.props.crossOrigin} + crossOrigin={this.props.crossOrigin || process.crossOrigin} /> }) } @@ -186,7 +187,7 @@ export class NextScript extends Component { src={`${assetPrefix}/_next/${file}`} nonce={this.props.nonce} async - crossOrigin={this.props.crossOrigin} + crossOrigin={this.props.crossOrigin || process.crossOrigin} /> }) } @@ -201,14 +202,18 @@ export class NextScript extends Component { const { page, buildId } = __NEXT_DATA__ const pagePathname = getPagePathname(page) + if (process.env.NODE_ENV !== 'production') { + if (this.props.crossOrigin) console.warn('Warning: `NextScript` attribute `crossOrigin` is deprecated. https://err.sh/next.js/doc-crossorigin-deprecated') + } + return - {devFiles ? devFiles.map((file) =>