禁止调试？！阻止用户打开开发者工具三大方法

风无雨
8,863 阅读3分钟

前言

之前有群友发过来一个网址,向我们问问题,结果网页一打开调试工具就跳转空白页,这个可给我气坏了,我倒要看看怎么实现这个.看看怎么阻止用户打开开发者工具.

1.禁用按键

通过

  • F12,

  • 右键菜单选择检查,

  • 键盘contextmenu按键选择检查,

  • shift+F10选择检查,

  • ctrl+shift+I

    都可以打开开发者工具.

    所以第一种阻止用户打开开发者工具的方法就是阻止这些按键.

代码实现如下:

  • 注意,keyCode已弃用,这里使用key和code来实现

其中key是返回的按下的按键值,区分大小写

而code返回的是对应按键的特征值,不区分大小写

MDN实际例子如下:

developer.mozilla.org/en-US/play

image-20231026102057439.png

我们看到key区分大小写并且和点击按键名相同,code值不区分大小写,一个按键一个值并且和实际点击按键名不同

  • 我的建议是当涉及字母不区分大小写时使用code值
  • 字母区分大小写时使用key值
  • 其他按键key和code都可以用

image-20231026094947592.png

image-20231026095117265.png

image-20231026100704729.png

  • 禁用右键菜单和contextmenu,
  • 阻止contextmenu默认事件,同时可以阻止鼠标右键显示菜单,同时也可以阻止键盘上的contextmenu按键唤起菜单,实现阻止调试的效果
    document.addEventListener('contextmenu', (e) => {
        e.preventDefault();
    })
  • 禁用f12,禁用ctrl+shift+i,禁用shift+f10
    document.addEventListener('keydown', (e) => {
        // 禁止f12,禁用ctrl+shift+i,禁用shift+f10
        if (e.code === 'F12' || e.ctrlKey && e.shiftKey && e.code === 'KeyI' || e.shiftKey && e.code === 'F10') {
            e.preventDefault();
        }
    })

2.断点阻止

给代码加 debugger

我们使用一个定时器不停执行debugger

  • 当没有打开开发者工具时debugger不会生效
  • 打开开发者工具时debugger才会生效

代码如下:

        setInterval(() => {
            debugger;
        }, 1000);

3.使用插件

已经有人写了一个插件来实现防止用户调试的目的

这个插件叫做disable-devtool,npm链接如下

www.npmjs.com/package/dis…

image-20231027154332765.png

使用如下

  • 1.安装插件npm i disable-devtool
  • 2.引入项目

我这里使用的是之前写的测试vue项目,我把他引到main.ts中

    import DisableDevtool from 'disable-devtool';
    ​
    DisableDevtool({
        ...........//配置项
    });
  • 3.增加配置项

因为这个插件的开发者是中国人,所以有详细的中文注释,很容易上手

插件开发者的博客:www.shiyix.cn/

options配置如下:

    interface IConfig {
        md5: string; // 绕过禁用的md5值，详情见3.2，默认不启用绕过禁用
        url: string; // 关闭页面失败时的跳转页面，默认值为localhost
        timeOutUrl: string; // 关闭页面超时跳转的url
        tkName: string; // 绕过禁用时的url参数名称，默认为 ddtk
        ondevtoolopen(type: DetectorType, next: Function): void; // 开发者面板打开的回调，启用时url参数无效
        ondevtoolclose: Function | null;
        interval: number; // 定时器的时间间隔 默认200ms
        disableMenu: boolean; // 是否禁用右键菜单 默认为true
        stopIntervalTime: number; // 在移动端时取消监视的等待时长
        clearIntervalWhenDevOpenTrigger: boolean; // 是否在触发之后停止监控
        detectors: DetectorType[] | 'all';  // 启用的监测器 默认为全部
        clearLog: boolean; // 是否每次都清除log
        disableSelect: boolean; // 是否禁用选择文本 默认为false
        disableCopy: boolean; // 是否禁用复制 默认为false
        disableCut: boolean; // 是否禁用剪切 默认为false
        disablePaste: boolean; // 是否禁用粘贴 默认为false
        ignore: (string|RegExp)[] | null | (()=>boolean); // 某些情况忽略禁用
        disableIframeParents: boolean; // iframe中是否禁用所有父窗口，默认 true
        seo: boolean; // 是否启用对seo进行保护，默认 true
    }
  • 4.个人选择配置

我希望默认可以右键可以打开菜单,但是在打开开发者工具时跳转空页面

设置如下:

    import DisableDevtool from 'disable-devtool';
    ​
    DisableDevtool({
        url: 'about:blank',
        timeOutUrl: 'about:blank',
        disableMenu: false
    });

总结

  • 1.禁用按键时注意使用按键的keycode,key还是code
  • 2.加断点,用户可以通过禁用断点来避开
  • 3.目前来看使用插件是一个不错的方法,他已经包含了第一种的阻止按键方法
avatar
文章
阅读
粉丝