Question

我使用js-code从我的网站获取上述折叠css代码。它适用于谷歌Chrome浏览器。但如果我在FIrefox上使用它，我将收到安全错误：

**SecurityError: The operation is insecure.**
findCriticalCSS/outputCss< 
map self-hosted
findCriticalCSS
<anonym>
<anonym>

这是我的剧本：

function post(path, params, method) {
method = method || "post"; // Set method to post by default if not specified.

// The rest of this code assumes you are not using a library.
// It can be made less wordy if you use one.
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) {
        // Pseudo classes formatting
        var formatPseudo = /([^\s,\:\(])\:\:?(?!not)[a-zA-Z\-]{1,}(?:\(.*?\))?/g;
        // Height in px we want critical styles for
        var targetHeight = 900;
        var criticalNodes = [];

    // Step through the document tree and identify nodes that are within our targetHeight
    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("Found " + criticalNodes.length + " critical nodes.");

    // Find stylesheets that have been loaded
    var stylesheets = document.styleSheets;
    console.log("Found " + stylesheets.length + " stylesheet(s).");

    var outputCss = Array.prototype.map.call(stylesheets,function(sheet) {
        var rules = sheet.rules || sheet.cssRules;
        // If style rules are present
        if (rules) {
            return {
                sheet: sheet,
                // Convert rules into an array
                rules: Array.prototype.map.call(rules, function(rule) {
                    try {
                        // If the rule contains a media query
                        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) { // If rule does not contain a media query
                            return criticalNodes.filter(function(e) { return e.matches(rule.selectorText.replace(formatPseudo, "$1")) }).length > 0 ? rule.cssText : null;
                        } else {  // If identified via CSSRule like @font and @keyframes
                            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}, "")




    // Remove linebreaks

    console.log(outputCss.replace(/\n/g,""))
}

findCriticalCSS(window, document);
})()

我认为它是因为我的网站包含一些外部css文件或类似的东西。有人可以帮我解决问题并修复它吗？

提前致谢， J. doe;）

Answer 1

如果您尝试从其他域读取样式表，则可能由以下行触发错误：

var rules = sheet.rules || sheet.cssRules;

来自MDN documentation：

在某些浏览器中，如果从其他域加载样式表，则调用cssRules会导致SecurityError。

FireFox上的JavaScript地图函数安全错误

1 个答案: