feat: add support for output.crossOriginLoading config (#2632)

* feat: add basic support for output.crossOriginLoading

* feat: allow crossOriginLoading to be false value

* chore: update CrossOriginLoading::Disable

* test: add e2e test for crossOriginLoading

* chore: update pnpm-lock.yaml

* Update crates/rspack_plugin_runtime/src/runtime_module/css_loading.rs

* Update crates/rspack_plugin_runtime/src/runtime_module/load_script.rs

* Update crates/rspack_plugin_runtime/src/runtime_module/css_loading.rs

* Update crates/rspack_plugin_runtime/src/runtime_module/load_script.rs

---------

Co-authored-by: underfin <likui6666666@gmail.com>

crates/node_binding/binding.d.ts

@@ -303,6 +303,11 @@ export interface RawLibraryOptions {
   umdNamedDefine?: boolean
   auxiliaryComment?: RawLibraryAuxiliaryComment
 }
+export interface RawCrossOriginLoading {
+  type: boolean | string
+  stringPayload?: string
+  boolPayload?: boolean
+}
 export interface RawOutputOptions {
   path: string
   publicPath: string
@@ -312,6 +317,7 @@ export interface RawOutputOptions {
   webassemblyModuleFilename: string
   filename: string
   chunkFilename: string
+  crossOriginLoading: RawCrossOriginLoading
   cssFilename: string
   cssChunkFilename: string
   uniqueName: string

crates/rspack/tests/fixtures/.hash/expected/runtime.js

@@ -172,6 +172,10 @@ __webpack_require__.l = function loadScript(url, done, key, chunkId) {
 		script.timeout = 120;
 		// script.setAttribute("data-webpack", dataWebpackPrefix + key);
 		script.src = url;
+
+		if (false && script.src.indexOf(window.location.origin + '/') !== 0) {
+			script.crossOrigin = false;
+		}
 	}
 	inProgress[url] = [done];
 	var onScriptComplete = function (prev, event) {
@@ -253,6 +257,10 @@ var loadStylesheet = (chunkId, url, done, hmr) => {
 		link.setAttribute(loadingAttribute, 1);
 		link.rel = "stylesheet";
 		link.href = url;
+
+		if (false && link.href.indexOf(window.location.origin + '/') !== 0) {
+			link.crossOrigin = false;
+		}
 	}
 	var onLinkComplete = (prev, event) => {
 		link.onerror = link.onload = null;

crates/rspack_binding_options/src/options/raw_output.rs

@@ -1,7 +1,7 @@
 use napi_derive::napi;
 use rspack_core::{
-  BoxPlugin, LibraryAuxiliaryComment, LibraryName, LibraryOptions, OutputOptions, PluginExt,
-  WasmLoading,
+  BoxPlugin, CrossOriginLoading, LibraryAuxiliaryComment, LibraryName, LibraryOptions,
+  OutputOptions, PluginExt, WasmLoading,
 };
 use serde::Deserialize;
 
@@ -71,6 +71,30 @@ impl From<RawLibraryOptions> for LibraryOptions {
   }
 }
 
+#[derive(Deserialize, Debug, Clone)]
+#[serde(rename_all = "camelCase")]
+#[napi(object)]
+pub struct RawCrossOriginLoading {
+  #[napi(ts_type = "boolean | string")]
+  pub r#type: String,
+  pub string_payload: Option<String>,
+  pub bool_payload: Option<bool>,
+}
+
+impl From<RawCrossOriginLoading> for CrossOriginLoading {
+  fn from(value: RawCrossOriginLoading) -> Self {
+    match value.r#type.as_str() {
+      "string" => Self::Enable(
+        value
+          .string_payload
+          .expect("should have a string_payload when RawCrossOriginLoading.type is \"string\""),
+      ),
+      "bool" => Self::Disable,
+      _ => unreachable!(),
+    }
+  }
+}
+
 #[derive(Deserialize, Debug)]
 #[serde(rename_all = "camelCase")]
 #[napi(object)]
@@ -83,6 +107,7 @@ pub struct RawOutputOptions {
   pub webassembly_module_filename: String,
   pub filename: String,
   pub chunk_filename: String,
+  pub cross_origin_loading: RawCrossOriginLoading,
   pub css_filename: String,
   pub css_chunk_filename: String,
   pub unique_name: String,
@@ -117,6 +142,7 @@ impl RawOptionsApply for RawOutputOptions {
       unique_name: self.unique_name,
       filename: self.filename.into(),
       chunk_filename: self.chunk_filename.into(),
+      cross_origin_loading: self.cross_origin_loading.into(),
       css_filename: self.css_filename.into(),
       css_chunk_filename: self.css_chunk_filename.into(),
       library: self.library.map(Into::into),

crates/rspack_core/src/options/output.rs

@@ -20,6 +20,7 @@ pub struct OutputOptions {
   pub unique_name: String,
   pub filename: Filename,
   pub chunk_filename: Filename,
+  pub cross_origin_loading: CrossOriginLoading,
   pub css_filename: Filename,
   pub css_chunk_filename: Filename,
   pub library: Option<LibraryOptions>,
@@ -53,6 +54,21 @@ impl From<&str> for WasmLoadingType {
   }
 }
 
+#[derive(Debug)]
+pub enum CrossOriginLoading {
+  Disable,
+  Enable(String),
+}
+
+impl std::fmt::Display for CrossOriginLoading {
+  fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+    match self {
+      CrossOriginLoading::Disable => write!(f, "false"),
+      CrossOriginLoading::Enable(value) => write!(f, "'{}'", value),
+    }
+  }
+}
+
 pub const NAME_PLACEHOLDER: &str = "[name]";
 pub const PATH_PLACEHOLDER: &str = "[path]";
 pub const EXT_PLACEHOLDER: &str = "[ext]";

crates/rspack_loader_sass/tests/fixtures.rs

@@ -48,6 +48,7 @@ async fn loader_test(actual: impl AsRef<Path>, expected: impl AsRef<Path>) {
             wasm_loading: rspack_core::WasmLoading::Disable,
             webassembly_module_filename: rspack_core::Filename::from_str("").expect("TODO:"),
             chunk_filename: rspack_core::Filename::from_str("").expect("TODO:"),
+            cross_origin_loading: rspack_core::CrossOriginLoading::Disable,
             unique_name: Default::default(),
             css_chunk_filename: rspack_core::Filename::from_str("").expect("TODO:"),
             css_filename: rspack_core::Filename::from_str("").expect("TODO:"),

crates/rspack_plugin_runtime/src/runtime_module/css_loading.rs

@@ -101,7 +101,12 @@ impl RuntimeModule for CssLoadingRuntimeModule {
         &stringify_chunks(&initial_chunk_ids_with_css, 0)
       )));
 
-      source.add(RawSource::from(include_str!("runtime/css_loading.js")));
+      source.add(RawSource::from(
+        include_str!("runtime/css_loading.js").replace(
+          "__CROSS_ORIGIN_LOADING_PLACEHOLDER__",
+          &compilation.options.output.cross_origin_loading.to_string(),
+        ),
+      ));
 
       if with_loading {
         source.add(RawSource::from(

crates/rspack_plugin_runtime/src/runtime_module/load_script.rs

@@ -24,8 +24,12 @@ impl RuntimeModule for LoadScriptRuntimeModule {
     self.id
   }
 
-  fn generate(&self, _compilation: &Compilation) -> BoxSource {
-    RawSource::from(include_str!("runtime/load_script.js")).boxed()
+  fn generate(&self, compilation: &Compilation) -> BoxSource {
+    RawSource::from(include_str!("runtime/load_script.js").replace(
+      "__CROSS_ORIGIN_LOADING_PLACEHOLDER__",
+      &compilation.options.output.cross_origin_loading.to_string(),
+    ))
+    .boxed()
   }
 }
 

crates/rspack_plugin_runtime/src/runtime_module/runtime/css_loading.js

@@ -32,6 +32,10 @@ var loadStylesheet = (chunkId, url, done, hmr) => {
 		link.setAttribute(loadingAttribute, 1);
 		link.rel = "stylesheet";
 		link.href = url;
+
+		if (__CROSS_ORIGIN_LOADING_PLACEHOLDER__ && link.href.indexOf(window.location.origin + '/') !== 0) {
+			link.crossOrigin = __CROSS_ORIGIN_LOADING_PLACEHOLDER__;
+		}
 	}
 	var onLinkComplete = (prev, event) => {
 		link.onerror = link.onload = null;

crates/rspack_plugin_runtime/src/runtime_module/runtime/load_script.js

@@ -1,4 +1,5 @@
 var inProgress = {};
+
 // var dataWebpackPrefix = "webpack:";
 // loadScript function to load a script via script tag
 __webpack_require__.l = function loadScript(url, done, key, chunkId) {
@@ -29,6 +30,10 @@ __webpack_require__.l = function loadScript(url, done, key, chunkId) {
 		script.timeout = 120;
 		// script.setAttribute("data-webpack", dataWebpackPrefix + key);
 		script.src = url;
+
+		if (__CROSS_ORIGIN_LOADING_PLACEHOLDER__ && script.src.indexOf(window.location.origin + '/') !== 0) {
+			script.crossOrigin = __CROSS_ORIGIN_LOADING_PLACEHOLDER__;
+		}
 	}
 	inProgress[url] = [done];
 	var onScriptComplete = function (prev, event) {

crates/rspack_testing/src/test_config.rs

@@ -369,6 +369,7 @@ impl TestConfig {
       output: c::OutputOptions {
         filename: c::Filename::from_str(&self.output.filename).expect("Should exist"),
         chunk_filename: c::Filename::from_str(&self.output.chunk_filename).expect("Should exist"),
+        cross_origin_loading: rspack_core::CrossOriginLoading::Disable,
         css_filename: c::Filename::from_str(&self.output.css_filename).expect("Should exist"),
         css_chunk_filename: c::Filename::from_str(&self.output.css_chunk_filename)
           .expect("Should exist"),

packages/playground/fixtures/cross-origin-loading/package.json

@@ -0,0 +1,4 @@
+{
+  "name": "@rspack-test/cross-origin-loading",
+  "private": true
+}

packages/playground/fixtures/cross-origin-loading/rspack.config.js

@@ -0,0 +1,24 @@
+/** @type { import('@rspack/core').RspackOptions } */
+
+module.exports = {
+	context: __dirname,
+	mode: "development",
+	entry: "./src/index.js",
+	stats: "none",
+	builtins: {
+		html: [
+			{
+				template: "./src/index.html"
+			}
+		],
+		define: {
+			"process.env.NODE_ENV": JSON.stringify("development")
+		}
+	},
+	output: {
+		crossOriginLoading: "anonymous"
+	},
+	devServer: {
+		port: 3000
+	}
+};

packages/playground/fixtures/cross-origin-loading/src/foo.js

@@ -0,0 +1 @@
+export default "foo";

packages/playground/fixtures/cross-origin-loading/src/index.html

@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head> </head>
+	<body>
+		<div id="root"></div>
+	</body>
+</html>

packages/playground/fixtures/cross-origin-loading/src/index.js

@@ -0,0 +1,7 @@
+// Set the public path of async chunk to a cross-origin URL
+__webpack_public_path__ = "https://cdn.example.com/";
+
+// Avoid removing script tag
+Node.prototype.removeChild = () => {};
+
+import("./foo.js");

packages/playground/fixtures/cross-origin-loading/test/index.test.ts

@@ -0,0 +1,12 @@
+import { wait } from "../../utils";
+
+test("should set crossOrigin to anonymous for script tag correctly", async () => {
+	await wait(50);
+	const scripts = await page.$$("script");
+
+	const crossOrigins = await Promise.all(
+		scripts.map(script => script.getAttribute("crossorigin"))
+	);
+
+	expect(crossOrigins).toEqual(["anonymous", null]);
+});

packages/playground/fixtures/utils.ts

@@ -34,7 +34,7 @@ export async function waitingUpdate(
 	}
 }
 
-async function wait(time: number) {
+export async function wait(time: number) {
 	return new Promise(resolve => {
 		setTimeout(() => {
 			resolve(undefined);

packages/playground/scripts/setupFiles.ts

@@ -21,7 +21,7 @@ beforeAll(async () => {
 		return;
 	}
 	const testDir = path.resolve(__dirname, "../temp", caseName);
-	const configPath = path.resolve(testDir, "webpack.config.js");
+	const configPath = path.resolve(testDir, "rspack.config.js");
 	const configFile = require(configPath);
 	const compiler = createCompiler(configFile);
 	server = new RspackDevServer(compiler.options.devServer ?? {}, compiler);

packages/rspack/src/config/adapter.ts

@@ -11,6 +11,7 @@ import assert from "assert";
 import { normalizeStatsPreset } from "../stats";
 import { isNil } from "../util";
 import {
+	CrossOriginLoading,
 	EntryNormalized,
 	Experiments,
 	ExternalItem,
@@ -144,6 +145,15 @@ function getRawResolve(resolve: Resolve): RawOptions["resolve"] {
 	};
 }
 
+function getRawCrossOriginLoading(
+	crossOriginLoading: CrossOriginLoading
+): RawOptions["output"]["crossOriginLoading"] {
+	if (typeof crossOriginLoading === "boolean") {
+		return { type: "bool", boolPayload: crossOriginLoading };
+	}
+	return { type: "string", stringPayload: crossOriginLoading };
+}
+
 function getRawOutput(output: OutputNormalized): RawOptions["output"] {
 	const wasmLoading = output.wasmLoading!;
 	return {
@@ -152,6 +162,7 @@ function getRawOutput(output: OutputNormalized): RawOptions["output"] {
 		assetModuleFilename: output.assetModuleFilename!,
 		filename: output.filename!,
 		chunkFilename: output.chunkFilename!,
+		crossOriginLoading: getRawCrossOriginLoading(output.crossOriginLoading!),
 		cssFilename: output.cssFilename!,
 		cssChunkFilename: output.cssChunkFilename!,
 		uniqueName: output.uniqueName!,

packages/rspack/src/config/defaults.ts

@@ -375,6 +375,8 @@ const applyOutputDefaults = (
 		// });
 		return Array.from(enabledWasmLoadingTypes);
 	});
+
+	D(output, "crossOriginLoading", false);
 };
 
 const applyExternalsPresetsDefaults = (

packages/rspack/src/config/normalization.ts

@@ -49,6 +49,7 @@ export const getNormalizedRspackOptions = (
 				publicPath: output.publicPath,
 				filename: output.filename,
 				chunkFilename: output.chunkFilename,
+				crossOriginLoading: output.crossOriginLoading,
 				cssFilename: output.cssFilename,
 				cssChunkFilename: output.cssChunkFilename,
 				assetModuleFilename: output.assetModuleFilename,

packages/rspack/src/config/schema.js

@@ -62,6 +62,10 @@ module.exports = {
 				}
 			]
 		},
+		CrossOriginLoading: {
+			description: "This option enables cross-origin loading of chunks.",
+			enum: [false, "anonymous", "use-credentials"]
+		},
 		Context: {
 			description:
 				"The base directory (absolute path!) for resolving the `entry` option. If `output.pathinfo` is set, the included pathinfo is shortened to this directory.",
@@ -987,6 +991,9 @@ module.exports = {
 				chunkFilename: {
 					$ref: "#/definitions/ChunkFilename"
 				},
+				crossOriginLoading: {
+					$ref: "#/definitions/CrossOriginLoading"
+				},
 				cssChunkFilename: {
 					$ref: "#/definitions/CssChunkFilename"
 				},

packages/rspack/src/config/types.ts

@@ -114,6 +114,7 @@ export interface Output {
 	publicPath?: PublicPath;
 	filename?: Filename;
 	chunkFilename?: ChunkFilename;
+	crossOriginLoading?: CrossOriginLoading;
 	cssFilename?: CssFilename;
 	cssChunkFilename?: CssChunkFilename;
 	assetModuleFilename?: AssetModuleFilename;
@@ -140,6 +141,7 @@ export type AssetModuleFilename = string;
 export type WebassemblyModuleFilename = string;
 export type Filename = FilenameTemplate;
 export type ChunkFilename = FilenameTemplate;
+export type CrossOriginLoading = false | "anonymous" | "use-credentials";
 export type CssFilename = FilenameTemplate;
 export type CssChunkFilename = FilenameTemplate;
 export type FilenameTemplate = string;
@@ -205,6 +207,7 @@ export interface OutputNormalized {
 	publicPath?: PublicPath;
 	filename?: Filename;
 	chunkFilename?: ChunkFilename;
+	crossOriginLoading?: CrossOriginLoading;
 	cssFilename?: CssFilename;
 	cssChunkFilename?: CssChunkFilename;
 	assetModuleFilename?: AssetModuleFilename;