The browser and the JavaScript engine themselves add a bunch of globals on the window
object (e.g., JavaScript APIs such as localStorage
, etc.), so finding globals introduced by our code is like looking for a needle in a haystack.
浏览器和js引擎在window里添加了很多的全局属性(比如,js API如localStorage), 所以找到所有的全局引用就像干草堆里找面条(大海捞针)
思路
1.
新建iframe ,指向blank, 获取window的属性也就是全局变量
2.
删除iframe
3.
获取当前页面的所有全局变量, 然后用过滤不在第一步那个全局变量里的全局变量
/**
* RuntimeGlobalsChecker
*
* You can use this utility to quickly check what variables have been added (or
* leaked) to the global window object at runtime (by JavaScript code).
* By running this code, the globals checker itself is attached as a singleton
* to the window object as "__runtimeGlobalsChecker__".
* You can check the runtime globals programmatically at any time by invoking
* "window.__runtimeGlobalsChecker__.getRuntimeGlobals()".
*
*/
window.__runtimeGlobalsChecker__ = (function createGlobalsChecker() {
// Globals on the window object set by default by the browser.
// We collect them to then filter them out of from the list of globals (since
// we don't care about them).
// They're populated by "collectBrowserGlobals()" and will contain globals such
// as "location" and "localStorage".
let browserGlobals = [];
// Known globals on the window object that we can safely ignored.
// This list should be populated manually after trial and errors.
const ignoredGlobals = ["__runtimeGlobalsChecker__"];
/**
* Collect the global variables added to the window object by the browser by
* creating a temporary iframe and checking what global variables the browser
* adds on it.
* @returns {string[]} - List of globals added added by the browser
*/
function collectBrowserGlobals() {
const iframe = window.document.createElement("iframe");
iframe.src = "about:blank";
window.document.body.appendChild(iframe);
browserGlobals = Object.keys(iframe.contentWindow);
window.document.body.removeChild(iframe);
return browserGlobals;
}
/**
* Return the list of globals added at runtime (by JavaScript).
* @returns {string[]} - List of globals added at runtime (by JavaScript)
*/
function getRuntimeGlobals() {
// If we haven't collected the browser globals yet, do it now.
if (browserGlobals.length === 0) {
collectBrowserGlobals();
}
// Grab all the globals filtering out variables we don't care about (noise).
const runtimeGlobals = Object.keys(window).filter((key) => {
const isFromBrowser = browserGlobals.includes(key);
const isIgnored = ignoredGlobals.includes(key);
return !isFromBrowser && !isIgnored;
});
return runtimeGlobals;
}
return {
getRuntimeGlobals,
};
})();
•
This utility can easily run in a Continuous Integration context (e.g., in E2E tests using Cypress) to provide automated feedback.
•
I recommend running this utility in browser tabs with no extensions: most browser extensions inject global variables in the window object, adding noise to the result (e.g., __REACT_DEVTOOLS_BROWSER_THEME__, etc. from the React DevTools extension).
•
To avoid repeatedly copy/pasting the global checker code in your DevTools console, you can create a JavaScript snippet instead.
在这里偷的文章
评论区