关于浏览器Devtools的open,close监听

关于浏览器Devtools的open/close监听

前言

常见open行为结果

  • 无限debugger
  • 反复刷新页面
  • 跳转指定页面

页面跳转:

*// 类似 HTTP 重定向到菜鸟教程*
window.location.replace("http://localhost");
*// 类似点击菜鸟教程的链接(a 标签)*
window.location.href = "http://localhost";

关闭页面:

window.close()  // 不过只能由 Window.open() 方法打开的窗口的 window 对象来调用。

通常各个监听行为都使用了setIntervalsetTimeout函数, 不方便debug的时候可以使用 定时器事件断点

以下是sgcc.com.cn中对于打开devtool行为的处理

    try {window.opener = null,  // 返回打开当前窗口的那个窗口的引用window.open("", "_self"),  // 这里先使用了, open方法打开当前窗口, 再使用close去关闭window.close(),   // 关闭当前窗口, 不过有时候还是会失败(应该与浏览器有关系)window.history.back()  // 会话历史记录中向后移动一页, 没有不执行} catch (e) {}setTimeout((function () {window.location.href = f.timeOutUrl || "https://theajack.github.io/disable-devtool/404.html?h=".concat(encodeURIComponent(location.host))}), 500)

一些使用了反调试的网站

  • fly63前端网-web前端技术开发,编程资源,实用教程,在线工具站
  • 技术检索-国网新能源云 (sgcc.com.cn)
  • samy kamkar ≈) home

TIP: 浏览器的不同可能导致方法在不同的浏览器出现不同的结果

1. 窗口判断

方案: 根据浏览器窗口判断

缺点: 无法监听独立窗口的devtool

demo: https://sindresorhus.com/devtools-detect/

代码: sindresorhus/devtools-detect: Detect if DevTools is open and its orientation (github.com)

const devtools = {isOpen: false,orientation: undefined,
};const threshold = 170;const main = ({emitEvents = true} = {}) => {const widthThreshold = globalThis.outerWidth - globalThis.innerWidth > threshold;const heightThreshold = globalThis.outerHeight - globalThis.innerHeight > threshold;const orientation = widthThreshold ? 'vertical' : 'horizontal';if (!(heightThreshold && widthThreshold)&& ((globalThis.Firebug && globalThis.Firebug.chrome && globalThis.Firebug.chrome.isInitialized) || widthThreshold || heightThreshold)) {devtools.isOpen = true;devtools.orientation = orientation;} else {devtools.isOpen = false;devtools.orientation = undefined;}
};

2. debugger时间差

方案: 打开控制台会触发debugger, 导致debugger前后时间差过大; 根据时间差判断是否打开控制台

缺点: 容易被定位到关键代码位置, 覆盖/重写关键函数即可破解; 使用debugger直接使用永不在此暂停就跳过了这个debug

相关:

  • demo: https://codepo8.github.io/console-killer/demo.html
  • 代码: https://github.com/codepo8/console-killer
  • 文章: https://dev.to/codepo8/cracking-a-developer-tools-killer-script-2lpl

具体代码还做了对F12, 右键菜单做了屏蔽,无法在demo中打开控制台; 但是这种无法避免我先打开控制台, 再进行访问地址

var minimalUserResponseInMiliseconds = 200;
function check() { console.clear();before = new Date().getTime();debugger;after = new Date().getTime();if (after - before > minimalUserResponseInMiliseconds) { document.write(" Dont open Developer Tools. ");self.location.replace(window.location.protocol + window.location.href.substring(window.location.protocol.length));  } else { before = null;after = null;delete before;delete after;}setTimeout(check, 100);
}

3. 读取元素id

利用Chrome开发者工具会自动读取元素id的特性,重写getter实现需求
let element = document.createElement('checkDevTools');
Object.defineProperty(element, 'id', {get: function () {/* TODO */isDevToolsOpened = true;}
});
element.__defineGetter__('id', function () {isDevToolsOpened = true;
});
console.debug(element); //使用console.debug()使打印出的辅助信息默认隐藏

4. performance对象比较性能

博客: 如何知道 Chrome 控制台何时打开 (guya.net)

demo: Chrome Developer Tools State (guya.net)

APi: Performance - Web API | MDN (mozilla.org)

  • **通过performance对象:**可以使用performance对象来检测页面加载的性能。一般情况下,开发者工具的打开会对性能指标产生一些影响,如资源加载时间的延长。因此,可以通过比较某些性能指标的值来判断开发者工具是否打开。
if (performance.memory && performance.memory.usedJSHeapSize > 0) {console.log("Developer tools open"); // 内存使用情况大于0,可能表示开发者工具已打开
}

5. toString

对于一些浏览器,比如Chrome、FireFox,如果控制台输出的是对象,则保留对象的引用,每次打开开发者工具的时候都会重新调用一下对象的toString()方法将返回结果打印到控制台(console tab)上。

所以只需要创建一个对象,重写它的toString()方法,然后在页面初始化的时候就将其打印在控制台上(这里假设控制台还没有打开),当用户打开控制台时会再去调用一下这个对象的toString()方法,用户打开控制台的行为就会被捕获到。

缺点: 只能捕获到开发者工具处于关闭状态向打开状态转移的过程(先打开devtool再访问网页即可破解)

var devtools = function() {};
// var devtools = /./;
devtools.toString = function() {if (!this.opened) {alert("Opened");}this.opened = true;
}console.log('%c', devtools);

不过使用这个在新版的 chrome 126.0.6478.127中貌似已经失效了, 我测试theajack/disable-devtool库只能使用窗口判断和性能判断两种方式可以触发这个版本的 chrome.

三方库:

1. theajack/disable-devtool

github: theajack/disable-devtool: Disable web developer tools from the f12 button, right-click and browser menu (github.com)

demo: Disable web developer tools with one line (theajack.github.io)

使用的检测方法如下:

  RegToString = 0, // 根据正则检测DefineId, // 根据dom id检测Size, // 根据窗口尺寸检测DateToString, // 根据Date.toString 检测FuncToString, // 根据Function.toString 检测Debugger, // 根据断点检测,仅在ios chrome 真机情况下有效Performance, // 根据log大数据性能检测

sgcc.com.cn 网站使用了这个库

2. AEPKILL/devtools-detector

使用了多种检查方式判断

github: devtools-detector/src/index.ts at master · AEPKILL/devtools-detector (github.com)

demo: https://blog.aepkill.com/demos/devtools-detector/

other:

  • adamschwartz/chrome-inspector-detector:检测 Chrome 检查器是打开还是关闭。 (github.com)

讨论

  • javascript - Find out whether Chrome console is open - Stack Overflow
  • (3 封私信) 前端开发中如何在JS文件中检测用户浏览器是否打开了调试面板(F12打开开发者工具)? - 知乎 (zhihu.com)
  • https://dev.to/codepo8/cracking-a-developer-tools-killer-script-2lpl
  • https://jsfiddle.net/eligrey/j4v270p4/

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/871566.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

树莓派PICO使用INA226测量电流和总线电压(3)

上一篇文章我们讲了如何测试电流,但是INA226有一个非常典型的问题,那就是误差比较大,因为采样电阻非常小,我的开发板用的是100mΩ的采样电阻,在设定中我也用的是这个采样电阻值,但事实上,测试得…

免费开源工具—— Clarity Al:一键图像放大/增强,Magnific平替!

今天给大家推荐一款图像增强工具——Clarity AI ,免费且开源,快来看看吧! 1、效果展示 MagnificAl是一款基于人工智能技术的图像处理工具,主要功能包括图像放大、像素级AI重绘、灵活的设置调整以及多种优化场景。它能够支持最高放大至16倍,甚…

算法力扣刷题记录 四十五【110.平衡二叉树】

前言 二叉树篇继续 记录 四十五【110.平衡二叉树】 一、题目阅读 给定一个二叉树,判断它是否是 平衡二叉树。 示例 1: 输入:root [3,9,20,null,null,15,7] 输出:true示例 2: 输入:root [1,2,2,3,3…

电容充放电时间计算

电容充电时间的结论:t充电 R * C 时,Ut2*VCC/3,这是一个不能让我释怀的结论。 1、电池充电 U0表示电容C在充电0时刻的电压值; Ut表示电容C在充电t时刻的电压值; U1表示电容C在充电∝时刻的电压值,就是电源电压; Q C * U ---…

【C/C++积累技巧】实现 连续播放文件图片+逐帧文本显示, 同时 可以按任意键退出(基于easyx小游戏编程)

技巧一、使用 IMAGE数组循环&#xff1a;实现【连续播放图片】 &#xff08;1&#xff09;一张图片如何放映在 图形化窗口上&#xff1a;借用两个函数 #include<graphics.h> // 函数的头文件IMAGE imgMy; // 图形变量 loadimage(&imgMy, "写入你想显示的图片路…

Java高频面试基础知识点整理27

干货分享&#xff0c;感谢您的阅读&#xff01;背景​​​​​​高频面试题基本总结回顾&#xff08;含笔试高频算法整理&#xff09; 最全文章见&#xff1a;Java高频面试基础知识点整理 &#xff08;一&#xff09;Java基础高频知识考点 针对人员&#xff1a; 1.全部人员都…

vs2019 QT无法打开源文件QModbusTcpClient

vs2019无法打开源文件QModbusTcpClient 如果配置的msvc2019,则查找到Include目录 然后包含&#xff1a; #include <QtSerialBus/qmodbustcpclient.h>

STL 提供的容器可以有多快?(下)「榨干最后一滴」

以下内容为本人的烂笔头&#xff0c;如需要转载&#xff0c;请声明原文链接 微信公众号「ENG八戒」https://mp.weixin.qq.com/s/QWgA97TDMGBnwR4hKA7BwA 查表的消耗 某些场景下需要用到大量的 (string, X) 键值对来存储数据&#xff0c;标准库提供了关联容器 std::map 来解决键…

Python酷库之旅-第三方库Pandas(021)

目录 一、用法精讲 52、pandas.from_dummies函数 52-1、语法 52-2、参数 52-3、功能 52-4、返回值 52-5、说明 52-6、用法 52-6-1、数据准备 52-6-2、代码示例 52-6-3、结果输出 53、pandas.factorize函数 53-1、语法 53-2、参数 53-3、功能 53-4、返回值 53-…

经典卷积网络

放假回家了&#xff0c;感觉快坚持不下去了&#xff0c;目前还没有找到关于无监督学习实现分类的课程&#xff0c;普通数据当然肯定不会给你实现分类的啊 给些建议吧。 LeNet 通过共享卷积核&#xff0c;减少网络参数。 一般只统计卷积计算层和全连接计算层&#xff0c;其余操…

【redis操作语句】

1.数据库操作 redis默认有16个数据库&#xff0c;编号为0~15&#xff0c;且默认访问0号数据库 获取当前键值对数量:先set创建一个键值对,再用dbsize获取&#xff0c;flushdb清空再获取。 127.0.0.1:6379> set k1 v1 OK 127.0.0.1:6379> dbsize (integer) 1 127.0.0.1:…

安卓onNewIntent 什么时候执行

一.详细介绍 onNewIntent 方法 onNewIntent 是 Android 中 Activity 生命周期的一部分。它在特定情况下被调用&#xff0c;主要用于处理新的 Intent&#xff0c;而不是创建新的 Activity 实例。详细介绍如下&#xff1a; 使用场景 singleTop 启动模式&#xff1a; 如果一个 Ac…

UML建模案例分析-需求对类图的影响很大

概要 类图描述系统中类的静态结构。 概念是概念&#xff0c;但类图受需求的影响是非常大的&#xff0c;可以说类图是建模的源头。尽管用例图是源头&#xff0c;但对类图的作用有限。 例子 进销存系统里&#xff0c;产品类中&#xff0c;至少要包括如下属性&#xff1a;名称…

现代动力系统理论导论 第一卷+第二卷 Anatole Katok 金成桴

第0章 引言 0&#xff0e;1&#xff0e; 动力学主要分支 0&#xff0e;2&#xff0e; 流&#xff0c;向量场&#xff0c;微分方程 0&#xff0e;3&#xff0e; 时间1映射&#xff0c;截面&#xff0c;扭扩 0&#xff0e;4&#xff0e; 线性化与局部化 第1部分 例子与基本概念 …

Ubuntu使用K3S一分钟快速搭建K8S集群

快速入门指南 | Rancher文档 准备3台服务器 Master节点安装脚本# K3s 提供了一个安装脚本,可以方便的在 systemd 或 openrc 的系统上将其作为服务安装。这个脚本可以在 https://get.k3s.io 获得。要使用这种方法安装 K3s,只需运行以下命令: curl -sfL https://rancher-mi…

Android Spinner

1. Spinner Spinner是下拉列表&#xff0c;如图3-14所示&#xff0c;通常用于为用户提供选择输入。Spinner有一个重要的属性&#xff1a;spinnerMode&#xff0c;它有2种情况&#xff1a; 属性值为dropdown时&#xff0c;表示Spinner的数据下拉展示&#xff0c;如图1&#xf…

反应式编程:原理功能介绍及实践

简介 反应式编程&#xff08;Reactive Programming&#xff09;是一种面向数据流和变化传播的编程范式。它强调异步数据流的处理&#xff0c;通过声明性地定义依赖关系&#xff0c;使得系统能够自动响应数据的变化。 功能 异步处理&#xff1a;反应式编程天然支持异步操作&am…

机器学习和人工智能对金融行业的影响——案例分析

作者主页: 知孤云出岫 目录 引言机器学习和人工智能在金融行业的应用1. 风险管理信用评分风险预测 2. 交易高频交易量化交易 3. 客户服务聊天机器人个性化推荐 4. 反欺诈检测 机器学习和人工智能带来的变革1. 提高效率2. 降低成本3. 提升客户体验 未来发展趋势1. 更智能的风控系…

【中台】数字中台建设方案(PPT)

数字中台建设要点&#xff1a; 数据采集与整合&#xff1a; 打破企业内部各个业务系统的数据隔阂&#xff0c;通过数据采集和数据交换实现数据的集中管理&#xff0c;形成统一的数据中心&#xff0c;为后续数据价值的挖掘提供基础。 利用自研或第三方ETL&#xff08;Extract, T…

FreeRTOS学习(1)STM32单片机移植FreeRTOS

一、FreeRTOS源码的下载 1、官网下载 FreeRTOS官方链接 官方下载速度慢&#xff0c;需要翻墙&#xff0c;一般选择第一个 2、直接通过仓库下载 仓库地址链接 同样很慢&#xff0c;甚至打不开网页&#xff0c;也不建议使用这种方法。 3、百度网盘 链接&#xff1a;https:…