VUE WEB端如何防止用户打开调试模式（F12）

小夏卷编程

已于 2024-03-11 10:30:19 修改

阅读量2.7k

点赞数 13

文章标签：前端 vue.js javascript

于 2024-03-11 10:09:16 首次发布

本文链接：https://blog.youkuaiyun.com/a_biggerfish/article/details/136614025

版权

文章介绍了如何在Vue应用中检测页面是否在调试模式下打开，通过监测窗口大小变化判断，同时处理了快速打开F12导致的宽度获取误差。还讨论了如何禁用网页右键菜单和键盘F12快捷键以防止调试。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.首先我们需要注意的是用户在打开网页是就已经打开调试模式我们需要如何检测页面是否打开调试窗口，因为浏览器的安全策略通常会阻止网站检测这种类型的信息，所以我们需要通过一些特殊手段来实现。

实现方法：在APP.vue文件中添加mounted生命周期里面，此时元素已经挂载完成

        let outerWidth = window.outerWidth;
        let innerWidth = window.innerWidth;
        let outerHeight = window.outerHeight;
        let innerHeight = window.innerHeight;
        //如果窗口外部高度-内部高度大于200，或者外部宽度-内部宽度大于200，就跳转到about:blank
        if (outerHeight - innerHeight > 200 || outerWidth - innerWidth > 200) {
          window.location.href = 'about:blank';
        }

bug1：在输入网址后，快速打开f12，此时网站还没有加载完全，返回的屏幕宽度和屏幕内部宽度是一样的，但是当我使用setTimeOut做延时处理的时候获取到的宽度又不一样，是打开调试窗口之后的宽度

bug2：窗口的外宽/高度可能在输入网址后，快速打开f12情况下出现0，所以这里使用的时候获取屏幕的宽/高度

总结：在网址加载前打开浏览器调试工具，可能出现程序的内部宽/高度已经挂载完成，调试窗口才打开，获取不到最新的内部宽/高度，所以最好使用延时获取最准确的，大于200的值也是测试后的一个比较好的一个值，因为一些css可能会影响到屏幕的内部宽/高度(需要排除)。

 let screenWidth = window.screen.width;
    let innerWidth = window.innerWidth;
    let screenHeight = window.screen.height;
    let innerHeight = window.innerHeight;
    console.log("width",screenWidth,window.outerWidth,innerWidth)
    setTimeout(()=>{
      console.log("rWidth", window.screen.width,window.outerWidth,window.innerWidth)
    })

改良后的代码：

setTimeout(()=>{
        let screenWidth = window.screen.width;
        let innerWidth = window.innerWidth;
        let screenHeight = window.screen.height;
        let innerHeight = window.innerHeight;
        //如果窗口外部高度-内部高度大于200，或者外部宽度-内部宽度大于200，就跳转到about:blank
        if (screenWidth - innerHeight > 200 || screenHeight - innerWidth > 200) {
          window.location.href = 'about:blank';
        }
      },200)

2.然后就是在网页打开之后可以禁用右键菜单，和键盘敲击f12按钮

 //监听用户敲击键盘事件
      window.addEventListener('keydown',this.handleKeydown);
      //阻止右键打开菜单
      document.oncontextmenu = function(event) {
        event.preventDefault();
      };

 methods:{
    handleKeydown(event) {
      //如果键盘敲击f12就阻止f12打开，然后弹框提醒，这个都放在app.vue里面，当然在页面还没有加载的时候最好在index.html里面也加上对应的方法
        if (event.key === 'F12') {
        event.preventDefault(); // 阻止F12的默认行为
        Modal.error({
          title:'警告',
          content:'检测非法调试，F12被管理员禁用',
          okText:'知道了'
        })
      }
    }
  },