在Web开发中,创建具有固定位置和透明背景色的元素(覆盖整个页面,直到用户以某种方式进行交互(通过接受同意或支付服务))是一个非常流行的想法。然后该元素被删除,用户可以使用该网页。
这里是例子:
但是,用户可以使用浏览器中的开发工具手动删除元素。
有什么办法可以防止它?是否可以禁止删除某些特定元素?
答案 0 :(得分:8)
你不能。
浏览器属于用户,并且完全在他们的控制之下。
如果您不希望在他们接受条款之前向他们提供某些东西,那么在他们同意之前,不要将它们发送给浏览器。
答案 1 :(得分:1)
这是不可能的。您可以使用户更难以绕开它,但不能阻止他们将其从页面中删除。
我已经看到网站使用许多不同的解决方案来使访问变得更困难,从锁定页面滚动到完全删除弹出窗口后的内容,但最终您不能阻止用户修改DOM。
答案 2 :(得分:0)
您需要添加控制服务器端。 您的用户可以控制他们接收的数据。如果您不希望他们访问数据,请不要发送数据。
答案 3 :(得分:0)
在似乎无法阻止用户删除元素的情况下,有可能检测到元素删除。
MutationObserver API使我们能够检测到特定DOM元素的变化。
的示例var in_dom = document.body.contains(element);
var observer = new MutationObserver(function(mutations) {
if (document.body.contains(element)) {
if (!in_dom) {
console.log("element inserted");
}
in_dom = true;
} else if (in_dom) {
in_dom = false;
console.log("element removed");
}
});
observer.observe(document.body, {childList: true});
当元素被删除时,我们当然可以再次添加它或重定向到错误页面,指示对该页面的任何操作都是非法的。
使用this React extension尤其容易删除元素。如果我们使用React,那么我们只需要包装要防止其被删除的元素即可:
import { WatchForRemoval } from 'react-mutation-observer';
...
<WatchForRemoval onRemoval={console.log.bind(null, 'Child removal triggered.')}>
<div>
Removing this element will trigger callback
</div>
</WatchForRemoval>