My current dilemma involves using a JavaScript code to extract the above-the-fold CSS from my websites. Surprisingly, it functions flawlessly on Google Chrome. However, when I attempt to execute it on Firefox, an infamous 'SecurityError' occurs:
**SecurityError: The operation is insecure.**
findCriticalCSS/outputCss<
map self-hosted
findCriticalCSS
<anonym>
<anonym>
Displayed below is the script that I'm employing:
function post(path, params, method) {
method = method || "post"; // Defaulting to post for method if unspecified.
// Assuming no library usage for the following code snippet.
var form = document.createElement("form");
form.setAttribute("method", method);
form.setAttribute("action", path);
for(var key in params) {
if(params.hasOwnProperty(key)) {
var hiddenField = document.createElement("input");
hiddenField.setAttribute("type", "hidden");
hiddenField.setAttribute("name", key);
hiddenField.setAttribute("value", params[key]);
form.appendChild(hiddenField);
}
}
document.body.appendChild(form);
form.submit();
}
(function() {
function findCriticalCSS(w, d) {
var formatPseudo = /([^\s,\:\(])\:\:?(?!not)[a-zA-Z\-]{1,}(?:\(.*?\))?/g;
var targetHeight = 900;
var criticalNodes = [];
var walker = d.createTreeWalker(d, NodeFilter.SHOW_ELEMENT, function(node) { return NodeFilter.FILTER_ACCEPT; }, true);
while(walker.nextNode()) {
var node = walker.currentNode;
var rect = node.getBoundingClientRect();
if (rect.top < targetHeight) {
criticalNodes.push(node);
}
}
console.log("Located " + criticalNodes.length + " critical nodes.");
var stylesheets = document.styleSheets;
console.log("Encountered " + stylesheets.length + " stylesheet(s).");
var outputCss = Array.prototype.map.call(stylesheets,function(sheet) {
var rules = sheet.rules || sheet.cssRules;
if (rules) {
return {
sheet: sheet,
rules: Array.prototype.map.call(rules, function(rule) {
try {
if (rule instanceof CSSMediaRule) {
var nestedRules = rule.rules || rule.cssRules;
var css = Array.prototype.filter.call(nestedRules, function(rule) {
return criticalNodes.filter(function(e){ return e.matches(rule.selectorText.replace(formatPseudo, "$1"))}).length > 0;
}).map(function(rule) { return rule.cssText }).reduce(function(ruleCss, init) {return init + "\n" + ruleCss;}, "");
return css ? ("@media " + rule.media.mediaText + " { " + css + "}") : null;
} else if (rule instanceof CSSStyleRule) {
return criticalNodes.filter(function(e) { return e.matches(rule.selectorText.replace(formatPseudo, "$1")) }).length > 0 ? rule.cssText : null;
} else {
return rule.cssText;
}
} catch(e) {
/*console.error("Improper CSS rule ", rule.selectorText);
throw e;*/
}
}).filter(function(e) { return e; })
}
} else {
return null;
}
}).filter(function(cssEntry) {return cssEntry && cssEntry.rules.length > 0 })
.map(function(cssEntry) {try { return cssEntry.rules.join(""); }catch(e){return;}})
.reduce(function(css, out) {return out + css}, "")
console.log(outputCss.replace(/\n/g,""))
}
findCriticalCSS(window, document);
})()
I suspect that the error might be related to external CSS files within my site. Does anyone have insights on how to diagnose and resolve this issue?
Appreciate any assistance rendered, J. Doe ;)