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

禁止浏览器隐藏元素设置

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

解决方案

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

方案 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)
  }
};

登录后复制

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

以上就是禁止浏览器隐藏元素设置防止用户篡改网页时，如何应对控制台调试带来的隐患？的详细内容，更多请关注米云其它相关文章！