我想知道在将javascript代码从另一位作者（免费使用）导入您的项目时，您会考虑哪种安全措施。
所以，如果你遇到super simple navigation template from codepen，我发现它之后我发现它不起作用，除非它使用包含XMLHttpRequest的js文件（为什么你需要一个http请求为此模板，我不知道）这里的another example有很多var声明和替换。
所以重申一下我的问题，除了看下面这段代码是不是很狡猾之外，我还想知道为什么你需要一个像这样的简单网站的http请求，以及当你使用其他人的代码时你会采取什么衡量标准，或者你可能永远不会使用其他人的代码？
!function () {
function e(e, r) {
return [].slice.call((r || document).querySelectorAll(e))
}
if (window.addEventListener) {
var r = window.StyleFix = {
link: function (e) {
try {
if ("stylesheet" !== e.rel || e.hasAttribute("data-noprefix"))return
} catch (t) {
return
}
var n, i = e.href || e.getAttribute("data-href"),
a = i.replace(/[^\/]+$/, ""), o = (/^[a-z]{3,10}:/.exec(a) || [""])[0],
s = (/^[a-z]{3,10}:\/\/[^\/]+/.exec(a) || [""])[0], l = /^([^?]*)\??/.exec(i)[1], u = e.parentNode, p = new XMLHttpRequest;
p.onreadystatechange = function () {
4 === p.readyState && n()
}, n = function () {
var t = p.responseText;
if (t && e.parentNode && (!p.status || p.status < 400 || p.status > 600)) {
if (t = r.fix(t, !0, e), a) {
t = t.replace(/url\(\s*?((?:"|')?)(.+?)\1\s*?\)/gi, function (e, r, t) {
return /^([a-z]{3,10}:|#)/i.test(t) ? e : /^\/\//.test(t) ? 'url("' + o + t + '")' : /^\//.test(t) ? 'url("' + s + t + '")' : /^\?/.test(t) ? 'url("' + l + t + '")' : 'url("' + a + t + '")'
});
var n = a.replace(/([\\\^\$*+[\]?{}.=!:(|)])/g, "\\$1");
t = t.replace(RegExp("\\b(behavior:\\s*?url\\('?\"?)" + n, "gi"), "$1")
}
var i = document.createElement("style");
i.textContent = t, i.media = e.media, i.disabled = e.disabled, i.setAttribute("data-href", e.getAttribute("href")), u.insertBefore(i, e), u.removeChild(e), i.media = e.media
}
};
try {
p.open("GET", i), p.send(null)
} catch (t) {
"undefined" != typeof XDomainRequest && (p = new XDomainRequest, p.onerror = p.onprogress = function () {
}, p.onload = n, p.open("GET", i), p.send(null))
}
e.setAttribute("data-inprogress", "")
}, styleElement: function (e) {
if (!e.hasAttribute("data-noprefix")) {
var t = e.disabled;
e.textContent = r.fix(e.textContent, !0, e), e.disabled = t
}
}, styleAttribute: function (e) {
var t = e.getAttribute("style");
t = r.fix(t, !1, e), e.setAttribute("style", t)
}, process: function () {
e("style").forEach(StyleFix.styleElement), e("[style]").forEach(StyleFix.styleAttribute)
}, register: function (e, t) {
(r.fixers = r.fixers || []).splice(void 0 === t ? r.fixers.length : t, 0, e)
}, fix: function (e, t, n) {
for (var i = 0; i < r.fixers.length; i++)e = r.fixers[i](e, t, n) || e;
return e
}, camelCase: function (e) {
return e.replace(/-([a-z])/g, function (e, r) {
return r.toUpperCase()
}).replace("-", "")
}, deCamelCase: function (e) {
return e.replace(/[A-Z]/g, function (e) {
return "-" + e.toLowerCase()
})
}
};
!function () {
setTimeout(function () {
}, 10), document.addEventListener("DOMContentLoaded", StyleFix.process, !1)
}()
}
}(), function (e) {
function r(e, r, n, i, a) {
if (e = t[e], e.length) {
var o = RegExp(r + "(" + e.join("|") + ")" + n, "gi");
a = a.replace(o, i)
}
return a
}
if (window.StyleFix && window.getComputedStyle) {
var t = window.PrefixFree = {
prefixCSS: function (e, n) {
var i = t.prefix;
if (t.functions.indexOf("linear-gradient") > -1 && (e = e.replace(/(\s|:|,)(repeating-)?linear-gradient\(\s*(-?\d*\.?\d*)deg/gi, function (e, r, t, n) {
return r + (t || "") + "linear-gradient(" + (90 - n) + "deg"
})), e = r("functions", "(\\s|:|,)", "\\s*\\(", "$1" + i + "$2(", e), e = r("keywords", "(\\s|:)", "(\\s|;|\\}|$)", "$1" + i + "$2$3", e), e = r("properties", "(^|\\{|\\s|;)", "\\s*:", "$1" + i + "$2:", e), t.properties.length) {
var a = RegExp("\\b(" + t.properties.join("|") + ")(?!:)", "gi");
e = r("valueProperties", "\\b", ":(.+?);", function (e) {
return e.replace(a, i + "$1")
}, e)
}
return n && (e = r("selectors", "", "\\b", t.prefixSelector, e), e = r("atrules", "@", "\\b", "@" + i + "$1", e)), e = e.replace(RegExp("-" + i, "g"), "-"), e = e.replace(/-\*-(?=[a-z]+)/gi, t.prefix)
}, property: function (e) {
return (t.properties.indexOf(e) ? t.prefix : "") + e
}, value: function (e) {
return e = r("functions", "(^|\\s|,)", "\\s*\\(", "$1" + t.prefix + "$2(", e), e = r("keywords", "(^|\\s)", "(\\s|$)", "$1" + t.prefix + "$2$3", e)
}, prefixSelector: function (e) {
return e.replace(/^:{1,2}/, function (e) {
return e + t.prefix
})
}, prefixProperty: function (e, r) {
var n = t.prefix + e;
return r ? StyleFix.camelCase(n) : n
}
};
!function () {
var e = {}, r = [], n = getComputedStyle(document.documentElement, null), i = document.createElement("div").style, a = function (t) {
if ("-" === t.charAt(0)) {
r.push(t);
var n = t.split("-"), i = n[1];
for (e[i] = ++e[i] || 1; n.length > 3;) {
n.pop();
var a = n.join("-");
o(a) && -1 === r.indexOf(a) && r.push(a)
}
}
}, o = function (e) {
return StyleFix.camelCase(e) in i
};
if (n.length > 0)for (var s = 0; s < n.length; s++)a(n[s]); else for (var l in n)a(StyleFix.deCamelCase(l));
var u = {uses: 0};
for (var p in e) {
var f = e[p];
u.uses < f && (u = {prefix: p, uses: f})
}
t.prefix = "-" + u.prefix + "-", t.Prefix = StyleFix.camelCase(t.prefix), t.properties = [];
for (var s = 0; s < r.length; s++) {
var l = r[s];
if (0 === l.indexOf(t.prefix)) {
var c = l.slice(t.prefix.length);
o(c) || t.properties.push(c)
}
}
"Ms" != t.Prefix || "transform" in i || "MsTransform" in i || !("msTransform" in i) || t.properties.push("transform", "transform-origin"), t.properties.sort()
}(), function () {
function e(e, r) {
return i[r] = "", i[r] = e, !!i[r]
}
var r = {
"linear-gradient": {property: "backgroundImage", params: "red, teal"},
calc: {property: "width", params: "1px + 5%"},
element: {property: "backgroundImage", params: "#foo"},
"cross-fade": {property: "backgroundImage", params: "url(a.png), url(b.png), 50%"}
};
r["repeating-linear-gradient"] = r["repeating-radial-gradient"] = r["radial-gradient"] = r["linear-gradient"];
var n = {
initial: "color",
"zoom-in": "cursor",
"zoom-out": "cursor",
box: "display",
flexbox: "display",
"inline-flexbox": "display",
flex: "display",
"inline-flex": "display",
grid: "display",
"inline-grid": "display",
"min-content": "width"
};
t.functions = [], t.keywords = [];
var i = document.createElement("div").style;
for (var a in r) {
var o = r[a], s = o.property, l = a + "(" + o.params + ")";
!e(l, s) && e(t.prefix + l, s) && t.functions.push(a)
}
for (var u in n) {
var s = n[u];
!e(u, s) && e(t.prefix + u, s) && t.keywords.push(u)
}
}(), function () {
function r(e) {
return a.textContent = e + "{}", !!a.sheet.cssRules.length
}
var n = {
":read-only": null,
":read-write": null,
":any-link": null,
"::selection": null
}, i = {keyframes: "name", viewport: null, document: 'regexp(".")'};
t.selectors = [], t.atrules = [];
var a = e.appendChild(document.createElement("style"));
for (var o in n) {
var s = o + (n[o] ? "(" + n[o] + ")" : "");
!r(s) && r(t.prefixSelector(s)) && t.selectors.push(o)
}
for (var l in i) {
var s = l + " " + (i[l] || "");
!r("@" + s) && r("@" + t.prefix + s) && t.atrules.push(l)
}
e.removeChild(a)
}(), t.valueProperties = ["transition", "transition-property"], e.className += " " + t.prefix, StyleFix.register(t.prefixCSS)
}
}(document.documentElement);
这是代码。
答案 0 :(得分：2)
为什么你需要一个像这样的简单网站的http请求
你没有。对页面的影响完全由CSS完成。你可以删除所有的JS，它仍然有用。
JavaScript是this library的缩小版（这就是为什么它很难阅读），这是一个复杂而脆弱的尝试，以适应旧版浏览器的CSS样式，这些浏览器需要某些特定于浏览器的属性前缀较新的CSS功能。它必须执行XMLHttpRequests才能获取样式表文件并使用它们。
目前还不清楚为什么示例代码一直在使用该库，因为CSS已经包含了属性的前缀版本。但这是从互联网上抓取随机代码的喜悦和诅咒，你不知道它是否合情合理......
我想知道在将javascript代码从其他作者（免费使用）导入您的项目时，您会考虑哪种安全措施。
没有灵丹妙药。您必须阅读并理解所有代码正在执行的操作，或者您必须完全信任代码的作者（以及托管它的服务的运营商，如果您直接从第三方服务器（如CDN）链接它）。