javascript - 在 JavaScript 中真正保护数据成员(类/IIFE 变量)

Question

上下文

我的任务是修复菜单编辑页面上的一个大错误，该错误是由过时的元素问题引起的，该问题是由服务器端呈现的 HTML 元素引起的。在我与这个 bug 进行的为期三天的斗争中，我从 Angular 中得到了一些灵​​感，并决定尝试制作一个菜单状态来为页面上的所有内容提供支持(添加/删除类别/项目，以及后来的模态分页以添加)

一些代码

我想到了这个 IIFE(作为 MVC 的“ Controller ”。选择器模态点击了这个的添加方法，删除按钮点击了这个的删除方法。此外，这个被传递给模板渲染函数，这实际上是弹出模式时首先遇到的事情):

/* all the categories, items, and modifiers that power this page */
var menuState = (function() { 
  let _categories = {
        attached: [],
        available: []
  }, _items = { 
        attached: [],
        available: []
  }, _modifiers = {
        attached: [],
        available: []
  }

  function getExposedMethodsFor(obj) { 
      return {
        all : function() { return obj.attached.concat(obj.available) },
        attached : function() { return obj.attached },
        available : function() { return obj.available }
        // ... other methods that work on obj.attached,obj.available
      }
    }

    let categoryExposedMethods = getExposedMethodsFor(_categories)
    // other exposer objects

    return {
        getAllCategories : categoryExposedMethods.all,
        getAttachedCategories : categoryExposedMethods.attached,
        getAvailableCategories : categoryExposedMethods.available
        // the rest of the exposed methods irrelevant to this question at hand
    }
})()

好的，问题是什么？

问题在于，这似乎是虚假的安全感。当我尝试单独对这个结构进行 XSS 测试时，它失败了。

我用 _categories 中的三个实体对其进行了测试，它们都是 attached，导致

menuState.getAllCategories().length

返回 3 和

menuState.getAvailableCategories().length

返回 0。好消息是当我尝试时

menuState.getAllCategories().push('a')
menuState.getAllCategories().length

我仍然得到三个。

但是，当我去的时候

menuState.getAvailableCategories().push('b')
menuState.getAvailableCategories().length

我得到 1，而不是 0 !!

真的有办法锁定这里的其他 setter/getter 吗？!如果不是，我有什么选择？

Answer 1

我用 Object.freeze 修复了它，我已经用它来重构我之前的开发人员在处理这个项目时写的“枚举”。它所做的是完全保护状态免受任何类型的更改，包括:

• 添加属性
• 删除属性
• 修改属性
• 重新分配被“卡住”的对象/数组

我如何使用它

在辅助方法中，我做了以下事情:

  attached : function() { return Object.freeze(obj.attached) },
  available : function() { return Object.freeze(obj.available) },

这可以防止数组被这些方法更改，从而关闭这种类型的 XSS。此外，menuState 是使用 const 声明的。