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

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

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

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

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

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

以上就是如何防止浏览器隐藏元素篡改网页水印？的详细内容，更多请关注米云其它相关文章！