Merge pull request #16925 from chenjiahan/fix/css_cross_origin_loading

fix: crossOriginLoading anonymous not work when loading styles
webpack · Apr 12, 2023 · 7f08e4d · 7f08e4d
2 parents ee1a267 + be63915
commit 7f08e4d
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 2 deletions.
diff --git a/lib/css/CssLoadingRuntimeModule.js b/lib/css/CssLoadingRuntimeModule.js
@@ -111,7 +111,7 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 				? crossOriginLoading === "use-credentials"
 					? 'link.crossOrigin = "use-credentials";'
 					: Template.asString([
-							"if (link.src.indexOf(window.location.origin + '/') !== 0) {",
+							"if (link.href.indexOf(window.location.origin + '/') !== 0) {",
 							Template.indent(
 								`link.crossOrigin = ${JSON.stringify(crossOriginLoading)};`
 							),

diff --git a/test/configCases/crossorigin/set-crossorigin/index.js b/test/configCases/crossorigin/set-crossorigin/index.js
@@ -65,3 +65,17 @@ it("should load script with crossorigin attribute anonymous (different origin)",
 
 	return promise;
 });
+
+it("should load style with crossorigin attribute anonymous (different origin)", function() {
+	var originalValue = __webpack_public_path__;
+	__webpack_public_path__ = "https://example.com/";
+	const promise = import("./style.css?e" /* webpackChunkName: "crossorigin-different-origin" */);
+	__webpack_public_path__ = originalValue;
+
+	var link = document.head._children[0];
+
+	expect(link.href).toBe("https://example.com/crossorigin-different-origin.web.css");
+	expect(link.crossOrigin).toBe("anonymous");
+
+	return promise;
+});
diff --git a/test/configCases/crossorigin/set-crossorigin/style.css b/test/configCases/crossorigin/set-crossorigin/style.css
@@ -0,0 +1,3 @@
+body {
+  color: red;
+}
diff --git a/test/configCases/crossorigin/set-crossorigin/webpack.config.js b/test/configCases/crossorigin/set-crossorigin/webpack.config.js
@@ -10,5 +10,8 @@ module.exports = {
 	},
 	optimization: {
 		minimize: false
+	},
+	experiments: {
+		css: true
 	}
 };
diff --git a/test/helpers/FakeDocument.js b/test/helpers/FakeDocument.js
@@ -160,7 +160,9 @@ class FakeSheet {
 		let css = fs.readFileSync(
 			path.resolve(
 				this._basePath,
-				this._element.href.replace(/^https:\/\/test\.cases\/path\//, "")
+				this._element.href
+					.replace(/^https:\/\/test\.cases\/path\//, "")
+					.replace(/^https:\/\/example\.com\//, "")
 			),
 			"utf-8"
 		);