禁止用户打开浏览器debug调试窗口的方法

禁用方法

以下代码是查看某个网站的时候发现的,的确很管用。

//debug调试时跳转页面
var element = new Image();
Object.defineProperty(element,'id',{get:function(){window.location.href="http://www.xxx.com/aboutus.html"}});
console.log(element);

上面这段代码的意思是:

  1. 创建一个<img>标签,
  2. 利用Object.defineProperty方法,在这个img上定义了idgetter
  3. 每当打印element(即定义的img)时,就会调用这个getter,跳转到指定页面。
  4. 在控制台打印这个元素

破解方法:

以上方法的确在大部分浏览器中都奏效,作为码农的我们当然是很好奇的,该如何破解这个限制呢?
其实破解方法很简单,只要用到浏览器书签栏,万能的书签不仅可以存储链接,还可以执行 JS 代码

  1. 创建一个书签,在地址栏存入如下代码
    javascript:window.addEventListener('beforeunload', function (e) { e.preventDefault();e.returnValue = '' });
  2. 通过监听beforeunload事件并指定returnValue,浏览器会在网页跳转前询问是否离开此网页,点击取消即可留在当前页面了。这样当我们打开debug调试时,就可以取消页面跳转了。

console.log 的执行时机

在Chrome中,console.log 在控制台打开后才起作用,它的确是调用了,但是还没打印,也就是还没有触发<img>标签id的getter;因此用书签来毁掉console.log是在调用之后的,无法阻止打开debug时打印<img>标签从而触发getter方法。

刷新页面读取network的数据

debug调试读取network发过来的数据,必须要刷新页面,一旦刷新,我们对beforeunload的监听就会失效,必定触发重定向,导致无法获取network中资源的请求和响应数据。这时候单纯使用浏览器的debug调试就很难拿到这些数据了。

本作品采用《CC 协议》,转载必须注明作者和本文链接
本帖由系统于 6个月前 自动加精
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
讨论数量: 9

你是不是太小看浏览器了。。。 直接勾选上 Preserve log ,就可以保存跳转前的信息。。。

1年前 评论
王子飞 (楼主) 1年前
忆往昔弹指间 (作者) 1年前

使用场景是什么?有禁用调试窗口的场景吗

1年前 评论

我擦,上面的网址是个真实存在的 ** 站点。。。。调试的时候,跳转过去了,然后就没有然后了

1年前 评论

有个美剧视频站就是这么干的...

1年前 评论
two_steps

奇怪的知识增加了

1年前 评论

离谱 这个网站就他妈离谱 保安 保安

1年前 评论

这个网站有点意思

4个月前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!