您当前的位置:首页 > 电脑百科 > 程序开发 > 编程百科

如何防止用户打开浏览器开发者工具,查看源码?

时间:2023-03-06 13:23:28  来源:微信公众号  作者:前端西瓜哥
首先是给代码加 Debugger。Debugger 是 JAVAScript 中的关键字,用于在代码中设置断点。

大家好,我是前端西瓜哥。

作为一名前端开发,在浏览一些网页时,有时会在意一些交互效果的实现,会打开开发者工具查看源码实现。

但有些网站做了防窥探处理,打开开发者工具后,会无法再正常进行网页的操作。

它是怎么做到的呢?

debugger

首先是给代码加 debugger。

debugger 是 JavaScript 中的关键字,用于在代码中设置断点。

在代码执行到 debugger 所在位置时会停止,此时上下文还保留着。此时我们可以查看一些变量的值,以及一点点地往下执行,看看是否进入正确的条件分支、变量是否正确等。

但前提是已经打开了开发者工具。

所以我们用一个定时器不停地执行 debugger 就行。

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

如果用户不打开开发者工具,debugger 会被浏览器忽略。

如果打开了,就会正常执行 debugger 给你的页面打一个断点,导致你无法操作页面。即使你跳过,因为定时器的存在,等下还会给你打上断点。

考虑到定时器不停执行可能会影响性能,所以不要设置太短,4s 应该差不多。

一个使用了该方案的动漫网站。

图片

函数调用栈的始端使用了 setInterval 定时器。

图片

发现一个有趣的点,就是我用苹果笔记本打开开发者工具,再关闭后,光标会变成默认样式,并再也无法改变光标样式了。大概是浏览器的 bug?不知道有没有读者知道是为什么。

结尾

这是一个比较简单的方案。另外推荐看看 disable-devtool 库,支持比较多的配置,也可以看看它是怎么检测用户打开开发者工具行为的发生的。



Tags:浏览器   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
首先是给代码加 Debugger。Debugger 是 JavaScript 中的关键字,用于在代码中设置断点。大家好,我是前端西瓜哥。作为一名前端开发,在浏览一些网页时,有时会在意一些交互效果的实...【详细内容】
2023-03-06  Tags: 浏览器  点击:(0)  评论:(0)  加入收藏
手机和电脑上的弹窗广告问题一直引起社会各界的关注,部分弹窗广告甚至还存在着木马植入、信息诈骗和强制消费等安全隐患问题。据央广“中国之声”报道,这些弹窗广告可以根据上...【详细内容】
2023-02-28  Tags: 浏览器  点击:(6)  评论:(0)  加入收藏
Edge浏览器兼容性设置是一项非常重要且实用的功能技巧,可以帮助小伙伴更好地访问那些需要特定浏览器设置或版本的网站和应用程序。在本文中,小编将简要介绍如何使用Edge浏览器...【详细内容】
2023-02-23  Tags: 浏览器  点击:(5)  评论:(0)  加入收藏
有时使用win11浏览器打开某些网页,却出现无法访问的情况,这是因为浏览器没有设置为兼容模式,很多用户都不会进行设置。那么win11浏览器兼容模式怎么设置呢?下面小编来告诉你设...【详细内容】
2023-02-10  Tags: 浏览器  点击:(28)  评论:(0)  加入收藏
前言WebAssembly SIMD以独立于平台的方式向 WebAssembly 应用程序公开硬件 SIMD 指令。 SIMD 提案引入了一种新的 128 位值类型,可用于表示不同类型的打包数据,以及几种对打包...【详细内容】
2023-02-09  Tags: 浏览器  点击:(26)  评论:(0)  加入收藏
随着业务环境的快速变化,安全性是开发人员和测试人员在其现代 Web 开发周期中面临的最大挑战之一。构建和部署现代 Web 应用程序的复杂性导致更多的安全漏洞。根据IBM 和 Pon...【详细内容】
2023-02-08  Tags: 浏览器  点击:(30)  评论:(0)  加入收藏
欢迎关注“新浪科技”的微信订阅号:techsina 文/Juny来源/硅星人(ID:guixingren123)自从ChatGPT横空出世并持续爆火以来,微软、谷歌这两家硅谷科技巨头之间的火药味就越来越重了...【详细内容】
2023-02-08  Tags: 浏览器  点击:(112)  评论:(0)  加入收藏
IT之家 1 月 14 日消息,谷歌去年在 Chrome Beta 版本中测试了“Instance Switcher”功能,允许安卓用户分屏并排运行两个 Chrome 浏览器。现在谷歌向所有 Chrome 用户开放这项...【详细内容】
2023-01-14  Tags: 浏览器  点击:(35)  评论:(0)  加入收藏
IT之家 1 月 10 日消息,谷歌正在为其 Chrome 网络浏览器开发一项新功能,允许用户在特定网站上一键禁用所有扩展。从外媒 ghacks 放出的截图可以看到,用户可以在某个网站中点击...【详细内容】
2023-01-10  Tags: 浏览器  点击:(43)  评论:(0)  加入收藏
随着越来越多的网站开始使用HTTPS,Chrome近日开始测试一项新的安全措施:阻止下载HTTP链接的文件。目前,当用户使用Chrome访问HTTP站点时,浏览器会自动将其标记为"不安全"。而此...【详细内容】
2022-12-29  Tags: 浏览器  点击:(45)  评论:(0)  加入收藏
▌简易百科推荐
首先是给代码加 Debugger。Debugger 是 JavaScript 中的关键字,用于在代码中设置断点。大家好,我是前端西瓜哥。作为一名前端开发,在浏览一些网页时,有时会在意一些交互效果的实...【详细内容】
2023-03-06  前端西瓜哥  微信公众号  Tags:浏览器   点击:(0)  评论:(0)  加入收藏
有些擦除了但有些没有擦除泛型类型,到底该信谁呢?当然是无条件相信​​javap -c​​,因为一切反编译操作都基于它。so结论是:Java的泛型是伪泛型,编译后泛型类型都会被擦除。...【详细内容】
2023-03-06  YourBatman  微信公众号  Tags:编译   点击:(3)  评论:(0)  加入收藏
提高我们的 DevOps 技能可以帮助我们成为更好的开发人员、队友和管理者。学习 DevOps 原则和对 Git 的不同看法。我以一个笑话开始我的一些谈话:在我那个时代,我们没有监控或...【详细内容】
2023-03-03  科技狠活与软件技术  今日头条  Tags:DevOps   点击:(6)  评论:(0)  加入收藏
前言在验证码项目中,都会遇到验证码被恶意大量高频的调用,给服务造成很多无效的注册或登录,占用大量的系统资源。而我在想,有没有哪一款验证码产品可以设置黑/白名单限制IP访问...【详细内容】
2023-03-03  norhone  今日头条  Tags:验证码   点击:(7)  评论:(0)  加入收藏
当渲染层 JS 资源加载完成后,直接省略反序列化、初始化 Model、计算排版数据等阶段,将 FVG 转换成 Widget 进行 Canvas 渲染,这一步非常接近于 React 的 hydrate,很巧妙。用过 C...【详细内容】
2023-02-28  前端小馆    Tags:Canvas   点击:(7)  评论:(0)  加入收藏
所谓 I/O,就是 Input/Output,输入/输出,在操作系统中,输入输出操作其实并不简单工作在用户态的应用程序想要读取磁盘中的具体文件内容,就需要经过 System Call(系统调用)陷入内核态...【详细内容】
2023-02-26  飞天小牛肉  51CTO  Tags:IO 模型   点击:(7)  评论:(0)  加入收藏
Web Speech API是一种Web技术,允许用户将语音数据合并到应用程序中。它可以通过浏览器将语音转换为文本,反之亦然。...【详细内容】
2023-02-24  李睿  51CTO  Tags: API   点击:(8)  评论:(0)  加入收藏
低代码开发可以解决哪些问题?如果用4句话去归纳,低代码开发可以解决以下问题—— 为企业提供更高的灵活性,用户可以突破代码的限制自主开发业务应用; 通过减少对专业...【详细内容】
2023-02-23  制造业老简    Tags:低代码   点击:(12)  评论:(0)  加入收藏
今天我们就来浅聊一下什么是接口测试,接口测试又该如何进行呢?一、什么是接口测试?接口测试是一种常见的软件测试方法,用于测试软件系统中不同模块之间的接口。接口是指两个或多...【详细内容】
2023-02-22  雪碧不加冰    Tags:接口测试   点击:(10)  评论:(0)  加入收藏
IT之家 2 月 22 日消息,微软集成开发环境(IDE)工具 Visual Studio 2022 于今天发布了 17.5 正式版更新,适用于 Windows 和 macOS 平台的版本已开放下载。Visual Studio 2022 17....【详细内容】
2023-02-22    IT之家  Tags:Visual Studio   点击:(24)  评论:(0)  加入收藏
站内最新
站内热门
站内头条