禁止浏览器隐藏元素设置防止用户篡改网页时，如何应对控制台调试带来的隐患？

本篇文章给大家分享《禁止浏览器隐藏元素设置防止用户篡改网页时，如何应对控制台调试带来的隐患？ 》，覆盖了文章的常见基础知识，其实一个语言的全部知识点一篇文章是不可能说完的，但希望通过这些问题，让读者对自己的掌握程度有一定的认识(B 数)，从而弥补自己的不足，更好的掌握它。

禁止浏览器隐藏元素设置

防止用户篡改网页时，浏览器隐藏元素功能可能成为隐患。如何应对这一挑战？

解决方案

首先，可以通过禁止打开控制台，防止用户进行代码调试：

方案 1

禁止右键查看源码和 F12：

// 禁止 F12 键盘事件
document.addEventListener('keydown', function(event){
  return 123 != event.keyCode || (event.returnValue = false)
});

// 禁止右键、选择、复制
document.addEventListener(‘'contextmenu'’, function(event){
  return event.returnValue = false
})

方案 2

通过页面宽度变化监测控制台：

监测可视区域宽高和浏览器宽高的差值，如果超过设定的阈值，则判断控制台已打开。

function resize(){
  var threshold = 200;
  var widthThreshold = window.outerWidth - window.innerWidth > threshold;
  var heightThreshold = window.outerHeight - window.innerHeight > threshold;
  if(widthThreshold || heightThreshold){
    console.log('控制台打开了')
  }
}
window.addEventListener('resize', resize);
resize()

方案 3

利用 debugger 特性，无限递归：

如果没有调试功能可用，debugger 语句将不起作用。利用这个特性，可以阻止代码执行：

function check() {
  function doCheck(a) {
    (function() {}["constructor"]("debugger")()); //debugger
    doCheck(++a);
  }
  try {
    doCheck(0)
  } catch(err) {
    console.log(err)
  }
};

最后，将网页整体转换成图片也是一种选择，用户无法单独去除。

今天关于《禁止浏览器隐藏元素设置防止用户篡改网页时，如何应对控制台调试带来的隐患？ 》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！