window变量冻结

背景:有时候我们会把很多重要的数据(如用户信息,权限相关信息)直接挂载在window下的,之前就碰到过因为将全局变量赋值给别的变量,导致该全局变量在代码中被多次覆写,同时在页面中也出现了一些不可预知的错误。因为这种错误有时候很难被发现,而且挂载在window在的变量会暴露在浏览器的控制台中,可能会给项目埋下一些安全隐患。因此就有了下面这篇文章。

目的:让某些全局变量完全只读而不可以被覆写。

1.TypeScript readonly

TypeScript 类型系统允许你在一个接口里使用 readonly 来标记属性。顾名思义,在 TypeScript 中它可以把一个属性变成只读的。

但是readonly 只能确保在直接赋值时不能修改属性,但是当你把这个属性交给其他并没有这种保证的使用者(允许出于类型兼容性的原因),他们能改变它。

image.png

同时在浏览器的控制台中也能够对readonly属性进行操作。综上所述,该方案不可行。

2.Object.freeze()

我们看看MDN上该方法的定义:

Object.freeze() 方法可以冻结一个对象。一个被冻结的对象再也不能被修改;冻结了一个对象则不能向这个对象添加新的属性,不能删除已有属性,不能修改该对象已有属性的可枚举性、可配置性、可写性,以及不能修改已有属性的值。此外,冻结一个对象后该对象的原型也不能被修改。freeze() 返回和传入的参数相同的对象。

看上去该方法能够满足我们的需求,而且为了使整个对象不可变,MDN上还提供了递归冻结每个类型为对象的属性的方法(深冻结)。

image.png

只要将各个全局进行深冻结,问题似乎就能够被解决。但上面所做的只能避免全局变量内的属性不被更改,但无法避免全局变量被完全重写。因此,我们还需要通过通过 Object.defineProperty 来设置全部变量的 configurable 和 writable 为 false。最终可得到让全局变量完全只读,不可以被修改的方法:


image.png

image.png

推荐阅读更多精彩内容