如何防止用户使用浏览器隐藏元素攻击网页水印？

在文章实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天golang学习网就整理分享《如何防止用户使用浏览器隐藏元素攻击网页水印？ 》，聊聊，希望可以帮助到正在努力赚钱的你。

如何防范用户使用浏览器隐藏元素攻击网页水印

在创建网页水印系统时，防止用户使用浏览器工具篡改水印至关重要。其中一个潜在的攻击向量是浏览器提供的隐藏元素选项。

禁止浏览器隐藏元素

该选项无法完全禁止，但可以使用以下技术进行阻止：

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. 利用调试器特性

使用调试器特性创建无限递归，阻止代码执行并降低网页性能。

代码示例：

function check() {
  function doCheck(a) {
    (function() {
      {}["constructor"]("debugger");
    })(); //debugger
    doCheck(++a);
  }

  try {
    doCheck(0);
  } catch (err) {
    console.log(err);
  }
}

其他建议

• 考虑将水印转换成图片，使用户无法单独移除。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~