feat: add crossOriginLoading option support (#313)

Author: chikara-chan

src/index.js

@@ -272,6 +272,7 @@ class MiniCssExtractPlugin {
  const chunkMap = this.getCssChunkObject(chunk);
  if (Object.keys(chunkMap).length > 0) {
  const chunkMaps = chunk.getChunkMaps();
+ const { crossOriginLoading } = mainTemplate.outputOptions;
  const linkHrefPath = mainTemplate.getAssetPath(
  JSON.stringify(this.options.chunkFilename),
  {
@@ -365,6 +366,17 @@ class MiniCssExtractPlugin {
  ]),
  '};',
  'linkTag.href = fullhref;',
+ crossOriginLoading
+ ? Template.asString([
+ `if (linkTag.href.indexOf(window.location.origin + '/') !== 0) {`,
+ Template.indent(
+ `linkTag.crossOrigin = ${JSON.stringify(
+ crossOriginLoading
+ )};`
+ ),
+ '}',
+ ])
+ : '',
  'var head = document.getElementsByTagName("head")[0];',
  'head.appendChild(linkTag);',
  ]),

test/manual/index.html

@@ -47,6 +47,10 @@
  <p>Preloaded inlined CSS: Must be green.</p>
  <p><button class="preloaded-button2">Pressing this button</button> displays an alert and should turn red.</p>
  </div>
+ <div class="test crossorigin">
+ <p>CrossOriginLoading Option: Must be red.</p>
+ <p><button>Pressing this button</button> loads chunks with crossorigin attribute and should turn green.</p>
+ </div>
  <div class="errors"></div>
  <script async defer src="/dist/main.js"></script>
 </body>

test/manual/src/crossorigin.css

@@ -0,0 +1,3 @@
+.crossorigin {
+ background: lightgreen;
+}

test/manual/src/crossorigin.js

@@ -0,0 +1 @@
+import './crossorigin.css';

test/manual/src/index.js

@@ -24,3 +24,17 @@ makeButton(".preloaded-button1", () => import(/* webpackChunkName: "preloaded1"
 makeButton(".preloaded-button2", () => import(/* webpackChunkName: "preloaded2" */ './preloaded2'));
 
 makeButton(".lazy-failure-button", () => import('./lazy-failure.js'), false);
+
+makeButton(".crossorigin", () => {
+ const originalPublicPath = __webpack_public_path__;
+ __webpack_public_path__ = "http://0.0.0.0:8080/dist/";
+ const promise = import("./crossorigin").then(() => {
+ const lastTwoElements = Array.from(document.head.children).slice(-2);
+ const hasCrossorigin = lastTwoElements.every(element => element.crossOrigin === "anonymous");
+ if (!hasCrossorigin) {
+ throw new Error('Chunks miss crossorigin="anonymous" attribute.')
+ }
+ });
+ __webpack_public_path__ = originalPublicPath;
+ return promise;
+});

test/manual/webpack.config.js

@@ -5,6 +5,7 @@ module.exports = {
  output: {
  chunkFilename: "[contenthash].js",
  publicPath: '/dist/',
+ crossOriginLoading: 'anonymous',
  },
  module: {
  rules: [
@@ -25,5 +26,8 @@ module.exports = {
  ],
  devServer: {
  contentBase: __dirname,
+ headers: {
+ "Access-Control-Allow-Origin": "*",
+ }
  },
 };