JavaScript安全加密之禁止别人调试自己的前端页面代码实现

 更新时间:2023年08月06日 16:28:05   作者:极客飞兔  
这篇文章主要为大家介绍了JavaScript安全加密之如何禁止别人调试自己的前端页面代码实现,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

🎈 为啥要禁止?

  • 由于前端页面会调用很多接口,有些接口会被别人爬虫分析,破解后获取数据
  • 为了 杜绝 这种情况,最简单的方法就是禁止人家调试自己的前端代码

🎈 无限 debugger

  • 前端页面防止调试的方法主要是通过不断 debugger 来疯狂输出断点,因为 debugger 在控制台被打开的时候就会执行
  • 由于程序被 debugger 阻止,所以无法进行断点调试,所以网页的请求也是看不到的
  • 基础代码如下:
/**
* 基础禁止调试代码
*/
(() => {
    function ban() {
      setInterval(() => {
        debugger;
      }, 50);
    }
    try {
      ban();
    } catch (err) { }
})();

🎈 无限 debugger 的对策

  • 如果仅仅是加上面那么简单的代码,对于一些技术人员而言作用不大
  • 可以通过控制台中的 Deactivate breakpoints 按钮或者使用快捷键 Ctrl + F8 关闭无限 debugger
  • 这种方式虽然能去掉碍眼的 debugger,但是无法通过左侧的行号添加 breakpoint

🎈 禁止断点的对策

  • 如果将 setInterval 中的代码写在一行,就能禁止用户断点,即使添加 logpoint 为 false 也无用
  • 当然即使有些人想到用左下角的格式化代码,将其变成多行也是没用的
(() => {
  function ban() {
    setInterval(() => { debugger; }, 50);
  }
  try {
    ban();
  } catch (err) { }
})();

🎈 忽略执行的代码

  • 通过添加 add script ignore list 需要忽略执行代码行或文件
  • 也可以达到禁止无限 debugger

🎈 忽略执行代码的对策

  • 那如何针对上面操作的恶意用户呢
  • 可以通过将 debugger 改写成 Function("debugger")(); 的形式来应对
  • Function 构造器生成的 debugger 会在每一次执行时开启一个临时 js 文件
  • 当然使用的时候,为了更加的安全,最好使用加密后的脚本
// 加密前
(() => {
  function ban() {
    setInterval(() => {
      Function('debugger')();
    }, 50);
  }
  try {
    ban();
  } catch (err) { }
})();
// 加密后
eval(function(c,g,a,b,d,e){d=String;if(!"".replace(/^/,String)){for(;a--;)e[a]=b[a]||a;b=[function(f){return e[f]}];d=function(){return"\w+"};a=1}for(;a--;)b[a]&&(c=c.replace(new RegExp("\b"+d(a)+"\b","g"),b[a]));return c}('(()=>{1 0(){2(()=>{3("4")()},5)}6{0()}7(8){}})();',9,9,"block function setInterval Function debugger 50 try catch err".split(" "),0,{}));

🎈 终极增强防调试代码

  • 为了让自己写出来的代码更加的晦涩难懂,需要对上面的代码再优化一下
  • 将 Function('debugger').call() 改成 (function(){return false;})['constructor']('debugger')['call']();
  • 并且添加条件,当窗口外部宽高和内部宽高的差值大于一定的值 ,我把 body 里的内容换成指定内容
  • 当然使用的时候,为了更加的安全,最好加密后再使用
(() => {
  function block() {
    if (window.outerHeight - window.innerHeight > 200 || window.outerWidth - window.innerWidth > 200) {
      document.body.innerHTML = "检测到非法调试,请关闭后刷新重试!";
    }
    setInterval(() => {
      (function () {
        return false;
      }
      ['constructor']('debugger')
      ['call']());
    }, 50);
  }
  try {
    block();
  } catch (err) { }
})();

以上就是JavaScript安全加密之禁止别人调试自己的前端页面代码实现的详细内容,更多关于JavaScript前端页面禁止调试的资料请关注脚本之家其它相关文章!

相关文章

  • js判断空对象的实例(超简单)

    js判断空对象的实例(超简单)

    下面小编就为大家带来一篇js判断空对象的实例(超简单)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • JS生成登录验证码的实现示例

    JS生成登录验证码的实现示例

    本文主要介绍了JS生成登录验证码的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-12-12
  • javascript获取网页中指定节点的父节点、子节点的方法小结

    javascript获取网页中指定节点的父节点、子节点的方法小结

    如何获取要更新的这些元素呢?用JavaScript获取这些节点的方法有很多种,下面是总结的一些方法,感兴趣的朋友可以参考下哈
    2013-04-04
  • JavaScript的内置对象Date详解

    JavaScript的内置对象Date详解

    这篇文章主要为大家介绍了vue组件通信的几种方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-11-11
  • 使用 JavaScript 创建可维护的幻灯片效果代码

    使用 JavaScript 创建可维护的幻灯片效果代码

    显然,效果很实用。对于这个效果,我们并不解释如何去使用效果库,而是讲解如何创建类似的效果,并保持他的可用性,分离式(unobtrusive),可维护性(让未来的维护者,在不需要修改你的脚本的情况下,修改图片,外观或文本标签)。
    2008-06-06
  • 详解单页面路由工程使用微信分享及二次分享解决方案

    详解单页面路由工程使用微信分享及二次分享解决方案

    这篇文章主要介绍了详解单页面路由工程使用微信分享及二次分享解决方案,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02
  • Javascript获取background属性中url的值

    Javascript获取background属性中url的值

    Javascript获取CSS中属性值方法有很多,今天工作的时候遇到了一个问题是需要利用Javascript获取css中background-img属性url的值,通过查阅网站的资料找到了解决方法,现在将方法分享给大家,有需要的朋友们们可以参考借鉴,下面来一起看看吧。
    2016-10-10
  • JS中的算法与数据结构之队列(Queue)实例详解

    JS中的算法与数据结构之队列(Queue)实例详解

    这篇文章主要介绍了JS中的算法与数据结构之队列(Queue),结合实例形式详细分析了javascript中队列的概念、原理、定义及常见操作技巧,需要的朋友可以参考下
    2019-08-08
  • JavaScript学习笔记之函数记忆

    JavaScript学习笔记之函数记忆

    这篇文章主要介绍了JavaScript学习笔记之函数记忆,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • 浅谈js中的attributes和Attribute的用法与区别

    浅谈js中的attributes和Attribute的用法与区别

    这篇文章主要介绍了浅谈js中的attributes和Attribute的用法与区别,attributes可以获取一个对象中的一个属性,attributes 属性返回指定节点属性的集合,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07

最新评论