查找哪些JavaScript变量泄漏到全局范围

2022-05-11155次阅读javascript原生Js

检测错误或无意中添加到全局范围的变量有助于调试应用程序并避免命名冲突。web应用及其依赖项增长越多,对全局范围内发生的事情有一个良好的了解就越重要(例如,确保多个库——甚至多个应用——可以在页面上共存,而不会发生全局名称冲突)。

在本文中,将向您展示如何在web应用程序中查找在运行时添加到全局作用域中的变量即添加至网页上的window对象的全局变量。

  1. 创建一个指向它的一次性 iframe about:blank(以确保window对象处于干净状态)。
  2. 检查 iframe的window对象并存储其全局变量名称。
  3. 删除 iframe。
(function () {
  // Grab browser's default global variables.
  const iframe = window.document.createElement("iframe");
  iframe.src = "about:blank";
  window.document.body.appendChild(iframe);
  const browserGlobals = Object.keys(iframe.contentWindow);
  window.document.body.removeChild(iframe);

  // Get the global variables added at runtime by filtering out the browser's
  // default global variables from the current window object.
  const runtimeGlobals = Object.keys(window).filter((key) => {
    const isFromBrowser = browserGlobals.includes(key);
    return !isFromBrowser;
  });

  console.log("Runtime globals", runtimeGlobals);
})();

原文:https://mmazzarolo.com/blog/2022-02-14-find-what-javascript-variables-are-leaking-into-the-global-scope/

上一篇: Typescript keyof操作符  下一篇: 向我解释Twitter 源代码的前10行  

查找哪些JavaScript变量泄漏到全局范围相关文章