如何防御用户使用浏览器隐藏元素设置

在网页防篡改措施中，浏览器提供的隐藏元素设置是一个常见漏洞。它允许用户隐藏水印或其他安全措施。那么，如何禁止用户使用浏览器隐藏元素呢？

解决方法

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. 无限递归阻断代码执行

利用 JavaScript 的 debugger 语句可以无限递归，直至浏览器栈溢出。这会阻断代码执行，从而防止用户修改隐藏元素设置。

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

4. 转换为图片

将网页内容整体转换为图片可以有效防止用户单独去掉隐藏元素。