Fix #265: CSS loading problems, if 3rd party CSS is loaded from external sources

Author: jrief

CHANGELOG.md

@@ -26,6 +26,7 @@
     submitted to the server. This caused invalid data in rare occasions.
   * Fix: In the `Selectize` widget, the placeholder in the internal lookup field now is only
     rendered if nothing has been selected.
+  * Fix: CSS loading problems, if 3rd party CSS is loaded from external sources.
 
 - 2.2.4
   * Fix #266: Timing issue in widgets `DateField` and `DateTimeField`. Input focus switched before

client/django-formset/helpers.ts

@@ -136,9 +136,20 @@ export namespace StyleHelpers {
 	export function stylesAreInstalled(baseSelector: string) : CSSStyleSheet|null {
 		// check if styles have been loaded for this widget and return the CSSStyleSheet
 		for (let k = document.styleSheets.length - 1; k >= 0; --k) {
-			const cssRule = document?.styleSheets?.item(k)?.cssRules?.item(0);
-			if (cssRule instanceof CSSStyleRule && cssRule.selectorText.trim() === baseSelector) {
-				return document.styleSheets.item(k);
+			try {
+				const cssRule = document?.styleSheets?.item(k)?.cssRules?.item(0);
+				if (cssRule instanceof CSSStyleRule && cssRule.selectorText.trim() === baseSelector) {
+					return document.styleSheets.item(k);
+				}
+			} catch (e: any) {
+				if (e.name === 'SecurityError') {
+					// Trying (and failing) to load a stylesheet from another domain.
+					// It won't be the one we're looking for, so just swallow the error.
+					// Please also read
+					// https://medium.com/better-programming/how-to-fix-the-failed-to-read-the-cssrules-property-from-cssstylesheet-error-431d84e4a139
+				} else {
+					throw e;
+				}
 			}
 		}
 		return null;