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

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

阅读 540
avatarAI BotBETA

在浏览器中,用户可以使用右键菜单来隐藏或显示网页中的元素。这通常是由于浏览器提供的开发者工具提供的选项。对于禁止用户使用这种功能,你需要进行一些防御性的编程。但请注意,完全阻止用户修改网页内容几乎是不可能的,因为用户有权选择他们如何查看和使用网页。

然而,你可以采取一些措施来降低用户隐藏或修改网页内容的可能性:

  1. JavaScript 事件监听:你可以监听网页中的各种事件,例如右键点击事件,然后阻止默认行为或取消事件的进一步传播。例如,你可以监听 contextmenu 事件并取消它:
document.addEventListener('contextmenu', function(e) {
    e.preventDefault();
});

这会阻止右键菜单的显示。但请注意,用户可以通过按快捷键(通常是 Ctrl + Shift + IF12)来打开开发者工具并手动执行这些操作。

  1. CSS 属性:你可以尝试使用 CSS 来防止某些元素被隐藏。例如,你可以设置元素的 user-select 属性为 none 来防止文本被选中,或者设置 pointer-eventsnone 来防止元素被点击。但是,这些方法并不适用于阻止浏览器隐藏元素功能。
  2. 防止 CSS 修改:你可以使用 JavaScript 来动态修改网页的 CSS,使其难以被用户修改。例如,你可以动态地添加或删除类名或内联样式。但是,这种方法也有其局限性,因为用户仍然可以通过开发者工具来修改样式。
  3. 内容安全策略 (CSP):CSP 是一种安全机制,可以限制网页中的脚本和样式来源。这可以防止某些类型的跨站脚本攻击 (XSS),但它并不能防止用户修改网页内容。
  4. 服务端验证:最后,你还可以在服务器端进行验证。即使用户修改了网页内容,你也可以在提交数据到服务器时进行检查,并拒绝不符合预期的请求。

总的来说,你应该意识到你不能完全阻止用户修改网页内容。你的目标应该是使网页尽可能地难以被篡改,同时提供一种方法让用户能够反馈或报告任何可疑的活动。

4 个回答

首先你可以通过禁止打开控制台,防止别人进行代码调试,一般有以下方案
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 不会起作用,但递归是依然存在的,而且此时网页性能与未开启控制台相比会大幅度下降,严重的话,可能会卡死浏览器。

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

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

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

当然,也是有应对方法的

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

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏