如何禁止用户使用浏览器提供的隐藏元素设置？

Question

在做网页水印，在做了各种的防止用户篡改之后，发现还有一个大招就是浏览器右键元素中有一个隐藏元素选项，请问应该如何禁止浏览器隐藏元素？或者说浏览器隐藏元素会触发哪些事件？或者说隐藏元素是修改了哪些样式？应该如何处理呢？

Answer 1

首先你可以通过禁止打开控制台，防止别人进行代码调试,一般有以下方案
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、通过页面宽度变化监测控制台
浏览宽高变化监测主要是监测浏览器可视区域的宽高：window.innerWidth / window.innerHeight（滚动条和内容区）和浏览器宽高：window.outerWidth / window.outerHeight（inner的基础上加上工具条的宽高）之间的差值。

因为我们不知道浏览器是否开启了工具条及工具条的宽高，所以我们设置一个阈值如200，如果outer – inner 大于200，我们就认为开启了控制台。

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、利用debugger的特性，无限递归
这个方法不能监测控制台被打开，但是能达到不让别人浏览你代码的目的。

上面也说了：debugger 语句调用任何可用的调试功能，可以阻断代码执行，如果没有调试功能可用，则此语句不起作用。

另外：每个浏览器都有其最大调用栈，如果超出就会抛出Maximum call stack size exceeded的错误并终止程序。

利用上面讲的特性组合成下面的代码：

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

上面代码check运行时，如果控制台未开启，debugger 不会起作用，但是doCheck会不断循环，直至爆栈，抛出错误，中止本次check运行；如果控制台开启，则会不断的进行断点调试和循环doCheck的调用，直至爆栈；如果控制台开启，但是取消了debugger调式，虽然此时debugger 不会起作用，但递归是依然存在的，而且此时网页性能与未开启控制台相比会大幅度下降，严重的话，可能会卡死浏览器。

但是总有破解方案,个人建议也可以考虑给整体转换成图片,这样用户就没办法单独去掉

Answer 2

一个简单的办法，就是使用一直创建新标签，并且使用随机的标签名字。

比如 <xsad>水印</xsad>、<dfvv>水印</dfvv>，每次创建新元素的时候，删除掉前一个元素。

当然，也是有应对方法的

Answer 3

只要他懂前端就没有办法完美的禁止, 即便是楼上说的循环创建标签也可以禁用js来实现删除水印的效果, 抖音搜 渡一 水印 ,有人专门讲过这个话题

Answer 4

我想到一个是监听dom的变化MutationObserver然后做一些操作，比如刷新页面

浏览器控制太可以通过设置打开，无法完全禁止