Fix same origin policy issue when adding @font-face rules

If the first stylesheet in the document is located on an external domain, then
trying to access the `cssRules` property of that `CSSStyleSheet` object will
result in a Security error being thrown in Firefox. In Safari, `cssRules` will
be null, which causes a null pointer exception in the `styleSheet.cssRules.length`
expression.

diff --git a/src/fonts.js b/src/fonts.js
index b027b766adcaaa8ce4069aa74b94aa12d00d82f8..f4f71c4f6771898549a5eeff0e38da1d514b6eae 100644 (file)
--- a/src/fonts.js
+++ b/src/fonts.js
@@ -1787,12 +1787,11 @@ var Font = (function Font() {
       var url = ('url(data:' + this.mimetype + ';base64,' +
                  window.btoa(data) + ');');
       var rule = "@font-face { font-family:'" + fontName + "';src:" + url + '}';
-      var styleSheet = document.styleSheets[0];
-      if (!styleSheet) {
-        document.documentElement.firstChild.appendChild(
-          document.createElement('style'));
-        styleSheet = document.styleSheets[0];
-      }
+
+      document.documentElement.firstChild.appendChild(
+        document.createElement('style'));
+
+      var styleSheet = document.styleSheets[document.styleSheets.length - 1];
       styleSheet.insertRule(rule, styleSheet.cssRules.length);
 
       return rule;