【Vue】防止用户篡改浏览器网页信息

原创

szlsay 2024-06-18 17:06:07 博主文章分类：web-vue ©著作权

文章标签 vue.js javascript 前端回调函数页面布局 文章分类 HarmonyOS 后端开发

©著作权归作者所有：来自51CTO博客作者szlsay的原创作品，请联系作者获取转载授权，否则将追究法律责任

1、禁用右键菜单和F12快捷键

document.oncontextmenu = function () {
      return false;
    };

    document.onkeydown = function (e) {
      console.log(e)
      if (e.keyCode == 123) {
        e.preventDefault();
        return false;
      }
    };

function click(e) {
      if (document.all) {
        if (event.button == 2 || event.button == 3) {
          alert("欢迎光临寒舍，有什么需要帮忙的话，请与站长联系！谢谢您的合作！！！");
          oncontextmenu = 'return false';
        }
      }
      if (document.layers) {
        if (e.which == 3) {
          oncontextmenu = 'return false';
        }
      }
    }
    if (document.layers) {
      document.captureEvents(Event.MOUSEDOWN);
    }
    document.onmousedown = click;
    document.oncontextmenu = new Function("return false;")

    document.onkeydown = document.onkeyup = document.onkeypress = function () {
      if (window.event.keyCode == 123) {
        window.event.returnValue = false;
        return (false);
      }
    }

攻破方式：组合快捷键或更多工具 -> 开发者工具

2、禁止调试

setInterval(function () {
      var startTime = performance.now();
      debugger;
      var endTime = performance.now();
      if (endTime - startTime > 100) {
        window.location.href = 'about:blank';
      }
    }, 100);

setInterval(function () {
      check();
    }, 2000);
    var check = function () {
      function doCheck(a) {
        if (('' + a / a)['length'] !== 1 || a % 20 === 0) {
          (function () { }['constructor']('debugger')());
        } else {
          (function () { }['constructor']('debugger')());
        }
        doCheck(++a);
      }
      try {
        doCheck(0);
      } catch (err) { }
    };
    check();

3、MutationObserver 监测DOM变化

MutationObserver是用于异步监测DOM树的变化，并在发生变化时执行相应的操作。它提供了一种异步的方式来监听DOM元素的增加、删除、属性变化等操作，以及文本节点的修改。通过MutationObserver，开发者可以实时地捕捉到DOM的变化，并做出相应的响应。

MutationObserver是在2012年引入的，目前被广泛支持的浏览器（包括Chrome、Firefox、Safari、Edge等）都提供了对MutationObserver的支持。

3.1 MutationObserver的属性

MutationObserver提供了一些属性，用于配置和控制观察器的行为。下面是一些常用的属性：
attributes：是否监测元素的属性变化。
attributeOldValue：是否在属性变化时记录旧值。
attributeFilter：指定要监测的属性列表。
childList：是否监测子元素的添加或移除。
subtree：是否监测后代元素的变化。
characterData：是否监测文本节点的内容变化。
characterDataOldValue：是否在文本节点内容变化时记录旧值。
通过这些属性，可以灵活地配置MutationObserver的观察行为，以满足不同的需求。

3.2 MutationObserver的应用场景

MutationObserver在许多场景下都能发挥重要作用。下面是一些常见的应用场景：

动态内容加载
当页面中的内容是通过异步加载或动态生成时，可以使用MutationObserver来监测内容的变化，并在变化发生后进行相应的处理，如更新页面布局、添加事件监听器等。例如，在无限滚动加载的场景中，当新的内容被加载到页面时，可以使用MutationObserver来自动监听内容的变化，并在变化发生后动态添加相应的元素或事件。
表单验证
当需要实时验证用户输入时，可以使用MutationObserver来监测表单元素的变化，以及对应的属性变化，如值的变化、禁用状态的变化等。这样可以及时地对用户的输入进行验证和反馈。例如，在一个表单中，当用户输入时，可以使用MutationObserver来监测输入框的值变化，并在值变化后进行实时的表单验证。
响应式布局
当页面布局需要根据DOM变化自适应调整时，可以使用MutationObserver来监测相关元素的变化，并根据变化动态地调整页面布局。例如，在响应式网页设计中，当窗口大小发生变化或元素被添加或移除时，可以使用MutationObserver来监听相关元素的变化，并根据变化重新计算和调整页面布局，以适应不同的设备和屏幕尺寸。
自定义组件开发
在自定义组件的开发中，MutationObserver可以用于监听组件内部的DOM变化，以及对应的属性变化。这样可以在组件内部做出相应的处理，如更新组件的状态、重新渲染组件等。例如，当一个自定义组件中的某个子元素被添加或移除时，可以使用MutationObserver来监听这些变化，并在变化发生后更新组件的状态或重新渲染组件。

使用MutationObserver的示例
下面通过几个示例来演示如何使用MutationObserver进行DOM变化的监测。

3.3 监测元素属性变化

下面的示例代码演示了如何使用MutationObserver监测元素的属性变化，并在变化发生后进行相应的处理：

// 目标元素
const targetElement = document.querySelector('#target');

// 创建一个MutationObserver实例
const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.type === 'attributes') {
      console.log(`属性 ${mutation.attributeName} 发生变化`);
      // 执行相应的处理逻辑
    }
  });
});

// 配置观察器
const config = {
  attributes: true,
};

// 启动观察器
observer.observe(targetElement, config);

在上述代码中，我们首先选择了一个目标元素，然后创建了一个MutationObserver实例。接下来，我们配置了观察器，指定我们要监测的变化类型为属性变化。最后，我们通过调用observe方法，将观察器绑定到目标元素上。

当目标元素的属性发生变化时，MutationObserver的回调函数将被调用，并传递一个mutations参数，该参数包含了所有发生的变化。在回调函数中，我们可以根据变化的类型（mutation.type）来判断具体的变化类型，并执行相应的处理逻辑。

3.4 监测子元素的添加或移除

下面的示例代码演示了如何使用MutationObserver监测子元素的添加或移除，并在变化发生后进行相应的处理：

// 目标元素
const targetElement = document.querySelector('#target');

// 创建一个MutationObserver实例
const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.type === 'childList') {
     

 mutation.addedNodes.forEach((addedNode) => {
        console.log(`添加了子元素：${addedNode.nodeName}`);
        // 执行相应的处理逻辑
      });

      mutation.removedNodes.forEach((removedNode) => {
        console.log(`移除了子元素：${removedNode.nodeName}`);
        // 执行相应的处理逻辑
      });
    }
  });
});

// 配置观察器
const config = {
  childList: true,
};

// 启动观察器
observer.observe(targetElement, config);
在上述代码中，我们创建了一个MutationObserver实例，并将观察器配置为监测子元素的添加或移除。当目标元素的子元素发生添加或移除操作时，MutationObserver的回调函数将被调用，并传递一个mutations参数，该参数包含了所有发生的变化。在回调函数中，我们可以根据变化的类型（mutation.type）为childList来判断子元素的添加或移除操作，并执行相应的处理逻辑。

3.5 监测文本节点的内容变化

下面的示例代码演示了如何使用MutationObserver监测文本节点的内容变化，并在变化发生后进行相应的处理：

// 目标元素
const targetElement = document.querySelector('#target');

// 创建一个MutationObserver实例
const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.type === 'characterData') {
      console.log(`文本节点内容发生变化：${mutation.target.nodeValue}`);
      // 执行相应的处理逻辑
    }
  });
});

// 配置观察器
const config = {
  characterData: true,
};

// 启动观察器
observer.observe(targetElement, config);

在上述代码中，我们创建了一个MutationObserver实例，并将观察器配置为监测文本节点的内容变化。当目标元素的文本节点的内容发生变化时，MutationObserver的回调函数将被调用，并传递一个mutations参数，该参数包含了所有发生的变化。在回调函数中，我们可以根据变化的类型（mutation.type）为characterData来判断文本节点的内容变化，并执行相应的处理逻辑。

监听DOM元素的删除事件（用于IE老版）

方法1：使用Mutation事件，例如`DOMNodeRemoved`事件


var targetElement = document.getElementById("target"); // 要监听的DOM元素

targetElement.addEventListener("DOMNodeRemoved", function(event) {
  console.log("DOM元素已删除");
  // 在这里执行你的逻辑
});


方法2：使用`onpropertychange`事件来监听DOM元素的属性变化。
当DOM元素被删除时，其父元素的`childNodes`属性会发生变化


var parentElement = document.getElementById("parent"); // 父元素

parentElement.onpropertychange = function(event) {
  if (event.propertyName === "childNodes") {
    console.log("DOM元素已删除");
    // 在这里执行你的逻辑
  }
};



//attachEvent——兼容：IE7、IE8；不兼容firefox、chrome、IE9、IE10、IE11、safari、opera
//addEventListener——兼容：firefox、chrome、IE、safari、opera；不兼容IE7、IE8

function fn(e) {
  // 处理属性变化
  console.log("Property changed:", e.propertyName);
}

// 检查是否支持MutationObserver
if (!window.MutationObserver) {
  var observer = document.createElement("div");
  // 处理属性变化
  var eventName = "propertychange"
  // 检查是否支持addEventListener
  if (observer.addEventListener) {
    observer.addEventListener(eventName, fn, false);
  } else {
    observer.attachEvent('on' + eventName, fn);
  }
  var targetNode = document.getElementById("myElement");
  observer.observe(targetNode);
} else {
  // 如果支持MutationObserver，使用原生方法
  var observer = new MutationObserver(function (mutations) {
    mutations.forEach(function (mutation) {
      console.log(mutation);
    });
  });

  var targetNode = document.getElementById("myElement");
  observer.observe(targetNode, { attributes: true, childList: true, subtree: true });
}

上一篇：【Vue】使用腾讯地图，提示“此key每日调用量已达到上限”

下一篇：【HarmonyOS NEXT】习题册

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯