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

Question

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

Answer 1

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

Answer 2

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

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

当然，也是有应对方法的

Answer 3

首先你可以通过禁止打开控制台，防止别人进行代码调试,一般有以下方案
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 4

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

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

1. JavaScript 事件监听：你可以监听网页中的各种事件，例如右键点击事件，然后阻止默认行为或取消事件的进一步传播。例如，你可以监听 contextmenu 事件并取消它：

document.addEventListener('contextmenu', function(e) {    e.preventDefault();});

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

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

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