Add option to ignore external stylesheets

This adds an option called `disableCrossDomain: 'true'` to ignore external stylesheets. This is needed when you can’t allow CORS due to your CSP or can’t set a CSP at all. This closes #7, closes #15 and fixes some bug reports related to that behavior.
anselmh · Feb 23, 2015 · 7f0400d · 7f0400d
1 parent b24d08a
commit 7f0400d
Show file tree

Hide file tree

Showing 7 changed files with 44 additions and 11 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,7 @@
 # Changelog
 
 ### HEAD
+* Add option `disableCrossDomain: 'true'` to ignore external stylesheets (CORS/CSP) (#7, #15)
 
 ### 0.3.7 (January, 26th, 2015)
 * Update README with latest browser developments

diff --git a/README.md b/README.md
@@ -58,7 +58,8 @@ Then include the CSS file [`polyfill.object-fit.css`](https://github.com/anselmh
 	<script>
 		objectFit.polyfill({
 			selector: 'img', // this can be any CSS selector
-			fittype: 'cover' // either contain, cover, fill or none
+			fittype: 'cover', // either contain, cover, fill or none
+			disableCrossDomain: 'true' // either 'true' or 'false' to not parse external CSS files.
 		});
 	</script>
 

diff --git a/dist/polyfill.object-fit.js b/dist/polyfill.object-fit.js
@@ -46,13 +46,18 @@
 	// handles extraction of `cssRules` as an `Array` from a stylesheet or something that behaves the same
 	var getSheetRules = function (stylesheet) {
 		var sheetMedia = stylesheet.media && stylesheet.media.mediaText;
-		var sheetHost = getCSSHost(stylesheet.href);
+		var sheetHost;
 
 		// if this sheet is cross-origin and option is set skip it
-		if ((sheetHost !== window.location.host)) { // && avoidExternalStylesheets)  { 
-			return [];
+		if (objectFit.disableCrossDomain == 'true') {
+			sheetHost = getCSSHost(stylesheet.href);
+
+			if ((sheetHost !== window.location.host)) {
+				return [];
+			}
 		}
 
+
 		// if this sheet is disabled skip it
 		if (stylesheet.disabled) {
 			return [];
@@ -280,6 +285,8 @@
 
 	objectFit.observer = null;
 
+	objectFit.disableCrossDomain = 'false';
+
 	objectFit.getComputedStyle = function(element, context) {
 		context = context || window;
 
@@ -403,7 +410,13 @@
 		if (!args.selector || !args.replacedElements) {
 			return;
 		}
+
+		// Set option objectFit.disableCrossDomain
+		objectFit.disableCrossDomain = args.disableCrossDomain || 'false';
+
+		// Set option fit-type
 		args.fittype = args.fittype || 'none';
+
 		switch (args.fittype) {
 			default:
 				return;
@@ -415,7 +428,9 @@
 			break;
 		}
 
+		// Set option replacedElements
 		var replacedElements = args.replacedElements;
+
 		if(!replacedElements.length) {
 			return;
 		}
@@ -624,7 +639,7 @@
 				console.log('object-fit not natively supported');
 			}
 			// If the library is loaded after document onload event
-			if(document.readyState === 'complete') {
+			if (document.readyState === 'complete') {
 				objectFit.init(args);
 			} else {
 				// Otherwise attach event listeners

diff --git a/dist/polyfill.object-fit.min.js b/dist/polyfill.object-fit.min.js
diff --git a/src/polyfill.getMatchedCSSRules.js b/src/polyfill.getMatchedCSSRules.js
@@ -46,13 +46,18 @@
 	// handles extraction of `cssRules` as an `Array` from a stylesheet or something that behaves the same
 	var getSheetRules = function (stylesheet) {
 		var sheetMedia = stylesheet.media && stylesheet.media.mediaText;
-		var sheetHost = getCSSHost(stylesheet.href);
+		var sheetHost;
 
 		// if this sheet is cross-origin and option is set skip it
-		if ((sheetHost !== window.location.host)) { // && avoidExternalStylesheets)  { 
-			return [];
+		if (objectFit.disableCrossDomain == 'true') {
+			sheetHost = getCSSHost(stylesheet.href);
+
+			if ((sheetHost !== window.location.host)) {
+				return [];
+			}
 		}
 
+
 		// if this sheet is disabled skip it
 		if (stylesheet.disabled) {
 			return [];

diff --git a/src/polyfill.object-fit.core.js b/src/polyfill.object-fit.core.js
@@ -19,6 +19,8 @@
 
 	objectFit.observer = null;
 
+	objectFit.disableCrossDomain = 'false';
+
 	objectFit.getComputedStyle = function(element, context) {
 		context = context || window;
 
@@ -142,7 +144,13 @@
 		if (!args.selector || !args.replacedElements) {
 			return;
 		}
+
+		// Set option objectFit.disableCrossDomain
+		objectFit.disableCrossDomain = args.disableCrossDomain || 'false';
+
+		// Set option fit-type
 		args.fittype = args.fittype || 'none';
+
 		switch (args.fittype) {
 			default:
 				return;
@@ -154,7 +162,9 @@
 			break;
 		}
 
+		// Set option replacedElements
 		var replacedElements = args.replacedElements;
+
 		if(!replacedElements.length) {
 			return;
 		}
@@ -363,7 +373,7 @@
 				console.log('object-fit not natively supported');
 			}
 			// If the library is loaded after document onload event
-			if(document.readyState === 'complete') {
+			if (document.readyState === 'complete') {
 				objectFit.init(args);
 			} else {
 				// Otherwise attach event listeners

diff --git a/tests/index-external-css.html b/tests/index-external-css.html
@@ -28,7 +28,8 @@ <h1><code>object-fit: cover;</code></h1>
 		document.addEventListener('DOMContentLoaded', function () {
 			objectFit.polyfill({
 				selector: 'img',
-				fittype: 'cover'
+				fittype: 'cover',
+				disableCrossDomain: 'false'
 			});
 		});
 	</script>