如何防止浏览器隐藏元素篡改网页水印？

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《如何防止浏览器隐藏元素篡改网页水印？ 》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~

防止浏览器隐藏元素篡改网页水印

在网页水印的设计中，阻止用户使用浏览器提供的“隐藏元素”选项至关重要。本文将探讨禁止此选项的方法，以及隐藏元素触发事件和修改样式的情况。

禁止右键查看源码和控制台

1. 禁止 F12 键盘事件

document.addEventListener('keydown', function(event){
   return 123 != event.keyCode || (event.returnValue = false)
});

2. 禁止右键、选择和复制

document.addEventListener(‘'contextmenu'’, function(event){
   return event.returnValue = false
})

监测浏览器宽高变化

通过监测浏览器可视区域和浏览器整体区域的宽高差，可以检测控制台是否开启。

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()

无限递归利用 debugger 特性

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

其他方法

1. 禁止打开控制台

2. 转换为图片

将整体页面转换为图片，这样用户无法单独移除隐藏元素。

以上就是《如何防止浏览器隐藏元素篡改网页水印？ 》的详细内容，更多关于的资料请关注golang学习网公众号！