js操作：关于前端防止用户操作控制台实操感受

最近公司的erp后台体量在随着业务量扩增，后台操作的用户量上升，因为职位权限问题无法对服务器和数据以及部署相关内容进行直接操作，就显现出了一个比较常态化的问题：“关于接口和缓存直接在后台暴露问题”，用户的数据在network和localStorage内一览无余，虽然关键的key或者sign用了MD5不可逆加密，但暴露出的数据依旧非常致命，于是就针对比较常见的操作进行了拦截譬如，Shift+Ctrl+I 、 右键 、 F12 、设置栏控制台打卡后强制关闭页面并跳转，代码如下： 

document.oncontextmenu = function () {
        // alert("右键被禁用");
        return false;
      };
document.onkeydown =
    document.onkeyup =
        document.onkeypress =
          function (event) {
            let e =
              event || window.event || arguments.callee.caller.arguments[0];
            if ((e && e.keyCode == 123) || e.key == "Shift" || e.key == "I") {
              e.returnValue = false;
              return false;
            }
          };

// 禁用开发者工具 打开工具自动跳转 界面缩放也会触发此方法，这个方法的原始逻辑就是监听window窗口的变化
var h = window.innerHeight,
  w = window.innerWidth;
window.onresize = function () {
  if (h != window.innerHeight || w != window.innerWidth) {
    window.close();
    window.location = "about:blank";
    // alert('禁止打开开发者调试工具')
  }
};

但是，有局限性，那就是在页面最初展示时，window.close() 这个方法是不可调用的，因为它并不是通过window内部的方法进入的，报错如下：

 

同样，哪怕是加入了window.location跳转到其他页面，仍旧可以在其他页面事先打开开发者控制面板后在重新输入URL跳转到指定页面查询数据，这种场景下，几乎只依靠前端几乎无法做防御判断。

并且在缩放界面的时候也同样会触发onresize这个api，容易影响用户体验。

观察过其他的一些大型网站，network几乎不会暴露，storage展示的也不过是一排加密后的键值对，这个操作到底是怎么完成的呢？有朋友说服务器部署时有可以直接设置的开关，这一块儿有待考究。