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) =>