上下文
我的任务是修复菜单编辑页面上的一个大错误,该错误是由过时的元素问题引起的,该问题是由服务器端呈现的 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 吗?!如果不是,我有什么选择?
最佳答案
我用 Object.freeze
修复了它,我已经用它来重构我之前的开发人员在处理这个项目时写的“枚举”。它所做的是完全保护状态免受任何类型的更改,包括:
- 添加属性
- 删除属性
- 修改属性
- 重新分配被“卡住”的对象/数组
我如何使用它
在辅助方法中,我做了以下事情:
attached : function() { return Object.freeze(obj.attached) },
available : function() { return Object.freeze(obj.available) },
这可以防止数组被这些方法更改,从而关闭这种类型的 XSS。此外,menuState
是使用 const
声明的。
关于javascript - 在 JavaScript 中真正保护数据成员(类/IIFE 变量),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53800097/