侧边栏壁纸
  • 累计撰写 793 篇文章
  • 累计创建 1 个标签
  • 累计收到 1 条评论
标签搜索

目 录CONTENT

文章目录

检查全局变量

Dettan
2022-07-23 / 0 评论 / 0 点赞 / 23 阅读 / 555 字
温馨提示:
本文最后更新于 2022-07-23,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。
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.

这里偷的文章

0

评论区