如何防止用户使用浏览器隐藏元素设置绕过网页防篡改措施？

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

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

解决方法

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. 转换为图片

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

以上就是如何防止用户使用浏览器隐藏元素设置绕过网页防篡改措施？的详细内容，更多请关注昆居客【www.kunjuke.com】。