前端页面防止恶意调试的几种方法。

debugger

利用debugger关键字阻止F12调试，在打开F12调试工具时，会执行debugger来设置断点，

此时，页面执行会卡住，通过debugger执行时间间隔可判断，调试开启就跳转到空白页面。

文心一言采用方案。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<!DOCTYPE html>
<html>
    <header>
        <title>test</title>
    </header>
    <body>
        <h1>test</h1>
    </body>
    <script>
        setInterval(function() {

            var startTime = performance.now();
          	// 设置断点
            debugger; 
            var endTime = performance.now();
           	// 设置一个阈值，例如100毫秒
            if (endTime - startTime > 100) {
                window.location.href = 'about:blank';
            }
        }, 100);

    </script>

</html>

disable-devtool

disable-devtool 可以禁用所有一切可以进入开发者工具的方法，防止通过开发者工具进行的 ‘代码搬运’

该库有以下特性:

  1. 支持可配置是否禁用右键菜单
  2. 禁用 f12 和 ctrl+shift+i 等快捷键
  3. 支持识别从浏览器菜单栏打开开发者工具并关闭当前页面
  4. 开发者可以绕过禁用 (url参数使用tk配合md5加密)
  5. 多种监测模式，支持几乎所有浏览器（IE,360,qq浏览器,FireFox,Chrome,Edge…）
  6. 高度可配置、使用极简、体积小巧
  7. 支持npm引用和script标签引用(属性配置)
  8. 识别真移动端与浏览器开发者工具设置插件伪造的移动端，为移动端节省性能
  9. 支持识别开发者工具关闭事件
  10. 支持可配置是否禁用选择、复制、剪切、粘贴功能
  11. 支持识别 eruda 和 vconsole 调试工具
  12. 支持挂起和恢复探测器工作
  13. 支持配置ignore属性，用以自定义控制是否启用探测器
  14. 支持配置iframe中所有父页面的开发者工具禁用

Quick use

1.1 npm reference

1

npm i disable-devtool

1
2

import disableDevtool from'disable-devtool';
disableDevtool();

1.2 script attribute configuration

1

<script disable-devtool-auto src='https://cdn.jsdelivr.net/npm/disable-devtool'></script>

Or use cdn with version:

1
2
3
4

<!--Use a specific version-->
<script disable-devtool-auto src='https://cdn.jsdelivr.net/npm/disable-devtool@x.x.x'></script>
<!--Use latest version-->
<script disable-devtool-auto src='https://cdn.jsdelivr.net/npm/disable-devtool@latest'></script>

参考