refactor: use better modern mode and cors implementation

yyx990803 · yyx990803 · commit 7b39bed1883d · 2018-08-08T23:31:13.000-04:00
BREAKING CHANGE: The `corsUseCredentials` option has been replaced by the new
`crossorigin` option.
diff --git a/docs/config/README.md b/docs/config/README.md
@@ -162,12 +162,16 @@ module.exports = {
 
   Setting this to `false` can speed up production builds if you don't need source maps for production.
 
-### corsUseCredentials
+### crossorigin
 
-- Type: `boolean`
-- Default: `false`
+- Type: `string`
+- Default: `undefined`
+
+  Configure the `crossorigin` attribute on `<link rel="stylesheet">` and `<script>` tags in generated HTML.
+
+  Note that this only affects tags injected by `html-webpack-plugin` - tags directly added in the source template (`public/index.html`) are not affected.
 
-  In modern mode, the generated HTML will include `<script type="module">`, which is [loaded with CORS always enabled](https://jakearchibald.com/2017/es-modules-in-browsers/#always-cors). By default, it is treated as `crossorigin="anonymous"`, setting this option to `true` will use `crossorigin="use-credentials"` instead.
+  See also: [CROS setting attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes)
 
 ### configureWebpack
 
diff --git a/docs/guide/browser-compatibility.md b/docs/guide/browser-compatibility.md
@@ -63,7 +63,7 @@ The cool part though is that there are no special deployment requirements. The g
 For a Hello World app, the modern bundle is already 16% smaller. In production, the modern bundle will typically result in significantly faster parsing and evaluation, improving your app's loading performance.
 
 ::: tip
-`<script type="module">` is loaded [with CORS always enabled](https://jakearchibald.com/2017/es-modules-in-browsers/#always-cors). This means your server must return valid CORS headers such as `Access-Control-Allow-Origin: *`. If you want to fetch the scripts with credentials, use the [corsUseCredentials](../config/#corsusecredentials) option.
+`<script type="module">` is loaded [with CORS always enabled](https://jakearchibald.com/2017/es-modules-in-browsers/#always-cors). This means your server must return valid CORS headers such as `Access-Control-Allow-Origin: *`. If you want to fetch the scripts with credentials, set the [crossorigin](../config/#crossorigin) option to `use-credentials`.
 
 Also, modern mode uses an inline script to avoid Safari 10 loading both bundles, so if you are using a strict CSP, you will need to explicitly allow the inline script with:
 
diff --git a/docs/zh/config/README.md b/docs/zh/config/README.md
@@ -160,12 +160,16 @@ module.exports = {
 
   如果你不需要生产环境的 source map，可以将其设置为 `false` 以加速生产环境构建。
 
-### corsUseCredentials
+### crossorigin
 
-- Type: `boolean`
-- Default: `false`
+- Type: `string`
+- Default: `undefined`
+
+  设置生成的 HTML 中 `<link rel="stylesheet">` 和 `<script>` 标签的 `crossorigin` 属性。
+
+  需要注意的是该选项仅影响由 `html-webpack-plugin` 在构建时注入的标签 - 直接写在模版 (`public/index.html`) 中的标签不受影响。
 
-  在现代模式下，生成的 HTML 会包含 `<script type="module">`，这需要[始终开启 CORS 才能被载入](https://jakearchibald.com/2017/es-modules-in-browsers/#always-cors)。默认情况下，它被处理为 `crossorigin="anonymous"`，将这个选项设置为 `true` 后则会换用 `crossorigin="use-credentials"`。
+  更多细节可查阅: [CROS setting attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes)
 
 ### configureWebpack
 
diff --git a/docs/zh/guide/browser-compatibility.md b/docs/zh/guide/browser-compatibility.md
@@ -63,7 +63,7 @@ Vue CLI 会产生两个应用的版本：一个现代版的包，面向支持 [E
 对于一个 Hello World 应用来说，现代版的包已经小了 16%。在生产环境下，现代版的包通常都会表现出显著的解析速度和运算速度，从而改善应用的加载性能。
 
 ::: tip 提示
-`<script type="module">` [需要配合始终开启的 CORS 进行加载](https://jakearchibald.com/2017/es-modules-in-browsers/#always-cors)。这意味着你的服务器必须返回诸如 `Access-Control-Allow-Origin: *` 的有效的 CORS 头。如果你想要通过认证来获取脚本，可使用 [corsUseCredentials](../config/#corsusecredentials) 选项。
+`<script type="module">` [需要配合始终开启的 CORS 进行加载](https://jakearchibald.com/2017/es-modules-in-browsers/#always-cors)。这意味着你的服务器必须返回诸如 `Access-Control-Allow-Origin: *` 的有效的 CORS 头。如果你想要通过认证来获取脚本，可使将 [crossorigin](../config/#crossorigin) 选项设置为 `use-credentials`。
 
 同时，现代浏览器使用一段内联脚本来避免 Safari 10 重复加载脚本包，所以如果你在使用一套严格的 CSP，你需要这样显性地允许内联脚本：
 
diff --git a/packages/@vue/cli-service/__tests__/build.spec.js b/packages/@vue/cli-service/__tests__/build.spec.js
@@ -25,10 +25,10 @@ test('build', async () => {
 
   const index = await project.read('dist/index.html')
   // should split and preload app.js & vendor.js
-  expect(index).toMatch(/<link [^>]+js\/app[^>]+\.js rel=preload>/)
-  expect(index).toMatch(/<link [^>]+js\/chunk-vendors[^>]+\.js rel=preload>/)
+  expect(index).toMatch(/<link [^>]+js\/app[^>]+\.js rel=preload as=script>/)
+  expect(index).toMatch(/<link [^>]+js\/chunk-vendors[^>]+\.js rel=preload as=script>/)
   // should preload css
-  expect(index).toMatch(/<link [^>]+app[^>]+\.css rel=preload>/)
+  expect(index).toMatch(/<link [^>]+app[^>]+\.css rel=preload as=style>/)
 
   // should reference favicon with correct base URL
   expect(index).toMatch(/<link rel=icon href=\/favicon.ico>/)
@@ -55,6 +55,10 @@ test('build', async () => {
 })
 
 afterAll(async () => {
-  await browser.close()
-  server.close()
+  if (browser) {
+    await browser.close()
+  }
+  if (server) {
+    server.close()
+  }
 })
diff --git a/packages/@vue/cli-service/__tests__/modernMode.spec.js b/packages/@vue/cli-service/__tests__/modernMode.spec.js
@@ -30,8 +30,8 @@ test('modern mode', async () => {
   expect(index).toMatch(/<script type=module src=\/js\/app\.\w{8}\.js>/)
 
   // should use <link rel="modulepreload" crossorigin=use-credentials> for modern bundle
-  expect(index).toMatch(/<link [^>]*js\/chunk-vendors\.\w{8}\.js rel=modulepreload>/)
-  expect(index).toMatch(/<link [^>]*js\/app\.\w{8}\.js rel=modulepreload>/)
+  expect(index).toMatch(/<link [^>]*js\/chunk-vendors\.\w{8}\.js rel=modulepreload as=script>/)
+  expect(index).toMatch(/<link [^>]*js\/app\.\w{8}\.js rel=modulepreload as=script>/)
 
   // should use <script nomodule> for legacy bundle
   expect(index).toMatch(/<script src=\/js\/chunk-vendors-legacy\.\w{8}\.js nomodule>/)
@@ -41,17 +41,17 @@ test('modern mode', async () => {
   const { safariFix } = require('../lib/webpack/ModernModePlugin')
   expect(index).toMatch(`<script>${safariFix}</script>`)
 
-  // Test corsUseCredentials
-  await project.write('vue.config.js', `module.exports = { corsUseCredentials: true }`)
+  // Test crossorigin="use-credentials"
+  await project.write('vue.config.js', `module.exports = { crossorigin: 'use-credentials' }`)
   const { stdout: stdout2 } = await project.run('vue-cli-service build --modern')
   expect(stdout2).toMatch('Build complete.')
   const index2 = await project.read('dist/index.html')
   // should use <script type="module" crossorigin=use-credentials> for modern bundle
   expect(index2).toMatch(/<script type=module src=\/js\/chunk-vendors\.\w{8}\.js crossorigin=use-credentials>/)
   expect(index2).toMatch(/<script type=module src=\/js\/app\.\w{8}\.js crossorigin=use-credentials>/)
   // should use <link rel="modulepreload" crossorigin=use-credentials> for modern bundle
-  expect(index2).toMatch(/<link [^>]*js\/chunk-vendors\.\w{8}\.js rel=modulepreload crossorigin=use-credentials>/)
-  expect(index2).toMatch(/<link [^>]*js\/app\.\w{8}\.js rel=modulepreload crossorigin=use-credentials>/)
+  expect(index2).toMatch(/<link [^>]*js\/chunk-vendors\.\w{8}\.js rel=modulepreload as=script crossorigin=use-credentials>/)
+  expect(index2).toMatch(/<link [^>]*js\/app\.\w{8}\.js rel=modulepreload as=script crossorigin=use-credentials>/)
 
   // start server and ensure the page loads properly
   const port = await portfinder.getPortPromise()
diff --git a/packages/@vue/cli-service/__tests__/multiPage.spec.js b/packages/@vue/cli-service/__tests__/multiPage.spec.js
@@ -81,10 +81,10 @@ test('build w/ multi page', async () => {
 
   const assertSharedAssets = file => {
     // should split and preload vendor chunk
-    expect(file).toMatch(/<link [^>]*js\/chunk-vendors[^>]*\.js rel=preload>/)
+    expect(file).toMatch(/<link [^>]*js\/chunk-vendors[^>]*\.js rel=preload as=script>/)
     // should split and preload common js and css
-    expect(file).toMatch(/<link [^>]*js\/chunk-common[^>]*\.js rel=preload>/)
-    expect(file).toMatch(/<link [^>]*chunk-common[^>]*\.css rel=preload>/)
+    expect(file).toMatch(/<link [^>]*js\/chunk-common[^>]*\.js rel=preload as=script>/)
+    expect(file).toMatch(/<link [^>]*chunk-common[^>]*\.css rel=preload as=style>/)
     // should load common css
     expect(file).toMatch(/<link href=\/css\/chunk-common\.\w+\.css rel=stylesheet>/)
     // should load common js
@@ -95,9 +95,9 @@ test('build w/ multi page', async () => {
   const index = await project.read('dist/index.html')
   assertSharedAssets(index)
   // should preload correct page file
-  expect(index).toMatch(/<link [^>]*js\/index[^>]*\.js rel=preload>/)
-  expect(index).not.toMatch(/<link [^>]*js\/foo[^>]*\.js rel=preload>/)
-  expect(index).not.toMatch(/<link [^>]*js\/bar[^>]*\.js rel=preload>/)
+  expect(index).toMatch(/<link [^>]*js\/index[^>]*\.js rel=preload as=script>/)
+  expect(index).not.toMatch(/<link [^>]*js\/foo[^>]*\.js rel=preload as=script>/)
+  expect(index).not.toMatch(/<link [^>]*js\/bar[^>]*\.js rel=preload as=script>/)
   // should prefetch async chunk js and css
   expect(index).toMatch(/<link [^>]*css\/chunk-\w+\.\w+\.css rel=prefetch>/)
   expect(index).toMatch(/<link [^>]*js\/chunk-\w+\.\w+\.js rel=prefetch>/)
@@ -109,9 +109,9 @@ test('build w/ multi page', async () => {
   const foo = await project.read('dist/foo.html')
   assertSharedAssets(foo)
   // should preload correct page file
-  expect(foo).not.toMatch(/<link [^>]*js\/index[^>]*\.js rel=preload>/)
-  expect(foo).toMatch(/<link [^>]*js\/foo[^>]*\.js rel=preload>/)
-  expect(foo).not.toMatch(/<link [^>]*js\/bar[^>]*\.js rel=preload>/)
+  expect(foo).not.toMatch(/<link [^>]*js\/index[^>]*\.js rel=preload as=script>/)
+  expect(foo).toMatch(/<link [^>]*js\/foo[^>]*\.js rel=preload as=script>/)
+  expect(foo).not.toMatch(/<link [^>]*js\/bar[^>]*\.js rel=preload as=script>/)
   // should not prefetch async chunk js and css because it's not used by
   // this entry
   expect(foo).not.toMatch(/<link [^>]*css\/chunk-\w+\.\w+\.css rel=prefetch>/)
@@ -124,9 +124,9 @@ test('build w/ multi page', async () => {
   const bar = await project.read('dist/bar.html')
   assertSharedAssets(bar)
   // should preload correct page file
-  expect(bar).not.toMatch(/<link [^>]*js\/index[^>]*\.js rel=preload>/)
-  expect(bar).not.toMatch(/<link [^>]*js\/foo[^>]*\.js rel=preload>/)
-  expect(bar).toMatch(/<link [^>]*js\/bar[^>]*\.js rel=preload>/)
+  expect(bar).not.toMatch(/<link [^>]*js\/index[^>]*\.js rel=preload as=script>/)
+  expect(bar).not.toMatch(/<link [^>]*js\/foo[^>]*\.js rel=preload as=script>/)
+  expect(bar).toMatch(/<link [^>]*js\/bar[^>]*\.js rel=preload as=script>/)
   // should prefetch async chunk js and css
   expect(bar).toMatch(/<link [^>]*css\/chunk-\w+\.\w+\.css rel=prefetch>/)
   expect(bar).toMatch(/<link [^>]*js\/chunk-\w+\.\w+\.js rel=prefetch>/)
diff --git a/packages/@vue/cli-service/lib/commands/build/resolveAppConfig.js b/packages/@vue/cli-service/lib/commands/build/resolveAppConfig.js
@@ -1,7 +1,6 @@
 module.exports = (api, args, options) => {
   const config = api.resolveChainableWebpackConfig()
   const targetDir = api.resolve(args.dest || options.outputDir)
-  const { corsUseCredentials } = options
 
   // respect inline build destination in copy plugin
   if (args.dest && config.plugins.has('copy')) {
@@ -19,7 +18,6 @@ module.exports = (api, args, options) => {
         .plugin('modern-mode-legacy')
         .use(ModernModePlugin, [{
           targetDir,
-          corsUseCredentials,
           isModernBuild: false
         }])
     } else {
@@ -28,7 +26,6 @@ module.exports = (api, args, options) => {
         .plugin('modern-mode-modern')
         .use(ModernModePlugin, [{
           targetDir,
-          corsUseCredentials,
           isModernBuild: true
         }])
     }
diff --git a/packages/@vue/cli-service/lib/config/app.js b/packages/@vue/cli-service/lib/config/app.js
@@ -250,6 +250,16 @@ module.exports = (api, options) => {
       }
     }
 
+    // CORS and Subresource Integrity
+    if (options.crossorigin != null || options.integreity) {
+      webpackConfig
+        .plugin('cors')
+          .use(require('../webpack/CorsPlugin'), [{
+            crossorigin: options.crossorigin,
+            integreity: options.integreity
+          }])
+    }
+
     // copy static assets in public/
     const publicDir = api.resolve('public')
     if (!isLegacyBundle && fs.existsSync(publicDir)) {
diff --git a/packages/@vue/cli-service/lib/options.js b/packages/@vue/cli-service/lib/options.js
@@ -12,7 +12,7 @@ const schema = createSchema(joi => joi.object({
   parallel: joi.boolean(),
   devServer: joi.object(),
   pages: joi.object(),
-  corsUseCredentials: joi.boolean(),
+  crossorigin: joi.string().valid(['', 'anonymous', 'use-credentials']),
 
   // css
   css: joi.object({
@@ -91,8 +91,11 @@ exports.defaults = () => ({
   pages: undefined,
 
   // <script type="module" crossorigin="use-credentials">
-  // #1656, #1867
-  corsUseCredentials: false,
+  // #1656, #1867, #2025
+  crossorigin: undefined,
+
+  // subresource integrity
+  integreity: false,
 
   css: {
     // extract: true,
diff --git a/packages/@vue/cli-service/lib/webpack/CorsPlugin.js b/packages/@vue/cli-service/lib/webpack/CorsPlugin.js
@@ -0,0 +1,21 @@
+module.exports = class CorsPlugin {
+  constructor ({ crossorigin, integrity }) {
+    this.crossorigin = crossorigin || (integrity ? '' : undefined)
+    this.integrity = integrity
+  }
+
+  apply (compiler) {
+    const ID = `vue-cli-cors-plugin`
+    compiler.hooks.compilation.tap(ID, compilation => {
+      compilation.hooks.htmlWebpackPluginAlterAssetTags.tap(ID, data => {
+        if (this.crossorigin != null) {
+          [...data.head, ...data.body].forEach(tag => {
+            if (tag.tagName === 'script' || tag.tagName === 'link') {
+              tag.attributes.crossorigin = this.crossorigin
+            }
+          })
+        }
+      })
+    })
+  }
+}
diff --git a/packages/@vue/cli-service/lib/webpack/ModernModePlugin.js b/packages/@vue/cli-service/lib/webpack/ModernModePlugin.js
@@ -5,9 +5,8 @@ const path = require('path')
 const safariFix = `!function(){var e=document,t=e.createElement("script");if(!("noModule"in t)&&"onbeforeload"in t){var n=!1;e.addEventListener("beforeload",function(e){if(e.target===t)n=!0;else if(!e.target.hasAttribute("nomodule")||!n)return;e.preventDefault()},!0),t.type="module",t.src=".",e.head.appendChild(t),t.remove()}}();`
 
 class ModernModePlugin {
-  constructor ({ targetDir, corsUseCredentials, isModernBuild }) {
+  constructor ({ targetDir, isModernBuild }) {
     this.targetDir = targetDir
-    this.corsUseCredentials = corsUseCredentials
     this.isModernBuild = isModernBuild
   }
 
@@ -41,11 +40,19 @@ class ModernModePlugin {
     compiler.hooks.compilation.tap(ID, compilation => {
       compilation.hooks.htmlWebpackPluginAlterAssetTags.tapAsync(ID, async (data, cb) => {
         // use <script type="module"> for modern assets
-        const modernAssets = data.body.filter(a => a.tagName === 'script' && a.attributes)
-        modernAssets.forEach(a => {
-          a.attributes.type = 'module'
-          if (this.corsUseCredentials) {
-            a.attributes.crossorigin = 'use-credentials'
+        data.body.forEach(tag => {
+          if (tag.tagName === 'script' && tag.attributes) {
+            tag.attributes.type = 'module'
+          }
+        })
+
+        // use <link rel="modulepreload"> instead of <link rel="preload">
+        // for modern assets
+        data.head.forEach(tag => {
+          if (tag.tagName === 'link' &&
+              tag.attributes.rel === 'preload' &&
+              tag.attributes.as === 'script') {
+            tag.attributes.rel = 'modulepreload'
           }
         })
 
@@ -70,13 +77,7 @@ class ModernModePlugin {
       })
 
       compilation.hooks.htmlWebpackPluginAfterHtmlProcessing.tap(ID, data => {
-        data.html = data.html
-          // use <link rel="modulepreload"> instead of <link rel="preload">
-          // for modern assets
-          .replace(/(<link as=script .*?)rel=preload>/g, this.corsUseCredentials
-            ? '$1rel=modulepreload crossorigin=use-credentials>'
-            : '$1rel=modulepreload>')
-          .replace(/\snomodule="">/g, ' nomodule>')
+        data.html = data.html.replace(/\snomodule="">/g, ' nomodule>')
       })
     })
   }
diff --git a/packages/@vue/cli-service/package.json b/packages/@vue/cli-service/package.json
@@ -24,7 +24,7 @@
     "@intervolga/optimize-cssnano-plugin": "^1.0.5",
     "@vue/cli-overlay": "^3.0.0-rc.11",
     "@vue/cli-shared-utils": "^3.0.0-rc.11",
-    "@vue/preload-webpack-plugin": "^1.0.0",
+    "@vue/preload-webpack-plugin": "^1.1.0",
     "@vue/web-component-wrapper": "^1.2.0",
     "acorn": "^5.7.1",
     "address": "^1.0.3",
diff --git a/yarn.lock b/yarn.lock
@@ -1045,9 +1045,9 @@
     execa "^0.10.0"
     q "^1.5.1"
 
-"@vue/preload-webpack-plugin@^1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@vue/preload-webpack-plugin/-/preload-webpack-plugin-1.0.0.tgz#08f156532909824da2aad258e151742d1e8f822e"
+"@vue/preload-webpack-plugin@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@vue/preload-webpack-plugin/-/preload-webpack-plugin-1.1.0.tgz#d768dba004261c029b53a77c5ea2d5f9ee4f3cce"
 
 "@vue/test-utils@^1.0.0-beta.20":
   version "1.0.0-beta.21"
