前端防止恶意调试

一下敏感环境下,比如h5游戏,产品活动等页面下,我们是不希望用户可以打开控制台进行调试和查看代码的.所以要进行一些保护.

初级

阻止F12事件, 右键事件

window.onkeydown = window.onkeyup = window.onkeypress = function (event) {  
    // 判断是否按下F12，F12键码为123  
    if (event.keyCode = 123) {  
        event.preventDefault() // 阻止默认事件行为  
        window.event.returnValue = false  
    }  
}

window.oncontextmenu = function() {  
    event.preventDefault() // 阻止默认事件行为  
    return false  
}

解决方式:

这个仅仅阻止了部分能打开控制台的方式,但还是会有漏网之鱼,可以先按F12,再访问网站就可以了

中级

debugger疯狂输出断点防止调试

在控制台打开的情况下, debugger语句用于停止执行JS代码，并调用 (如果可用) 调试函数。使用debugger语句类似于在代码中设置断点

(() => {
    function block() {
        setInterval(() => {
            debugger;
        }, 50);
    }
    try {
        block();
    } catch (err) {}
})();

解决方式:

浏览器里面关闭Debug调试

高级

 var errorDetector = function errorDetector(trigger) {
      var e = new Error();
      Object.defineProperty(e, 'message', {
        get: function get() {
          trigger();
        }
      });
      console.log(e);
    };

    var getChromeTest = function getChromeTest(fire) {
      var re = /./;
      re.toString = getChromeRerenderTestFunc(fire);

      var func = function func() {
        return re;
      };

      func.toString = getChromeRerenderTestFunc(fire);
      var date = new Date();
      date.toString = getChromeRerenderTestFunc(fire);
      console.log('%c', // < 92
      func, // 92
      func(), // >= 93, <= 101
      date); // >= 102

      var errorFire = getChromeRerenderTestFunc(fire);
      errorDetector(errorFire);
    };
    
    var counts = 0;
    var triggered = 0;
    var getChromeRerenderTestFunc = function getChromeRerenderTestFunc(fire) {
      var mark = 0;
      var seq = 1 << counts++;
      return function () {
        if (triggered && !(triggered & seq)) {
          return;
        }

        mark++;

        if (mark === 2) {
          triggered |= seq;
          fire();
          mark = 1;
        }
      };
    };

利用了Error类型对象的get函数,实现了控制台触发的监听.
使用时,初始化执行getChromeTest(fire),其中fire函数为触发回调函数,我们可以设置为

() => {
    setInterval(() => {
            location.reload();
            location.href = "https://womenzhai.cn/message";			
    }, 50);
}}

在用户打开控制台的时候,页面就会刷新和调转到其他页面,分支进行调试