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使用对象的defineProperty进行变量监控操作示例

    JS使用对象的defineProperty进行变量监控操作示例

    这篇文章主要介绍了JS使用对象的defineProperty进行变量监控操作,结合实例形式分析了对象defineProperty方法的功能及简单使用技巧,需要的朋友可以参考下
    2019-02-02
  • JavaScript实现Flash炫光波动特效

    JavaScript实现Flash炫光波动特效

    JavaScript写的炫光波动效果,看到一些Flash效果不错,用JS也模拟一下,还有很多不完善的地方,给各位参考参考。
    2015-05-05
  • ES6所改良的javascript“缺陷”问题

    ES6所改良的javascript“缺陷”问题

    这篇文章主要介绍了ES6所改良的javascript“缺陷”问题的相关资料,需要的朋友可以参考下
    2016-08-08
  • 原生JS实现的多个彩色小球跟随鼠标移动动画效果示例

    原生JS实现的多个彩色小球跟随鼠标移动动画效果示例

    这篇文章主要介绍了原生JS实现的多个彩色小球跟随鼠标移动动画效果,涉及javascript事件响应、页面元素属性动态修改及随机数应用等相关操作技巧,需要的朋友可以参考下
    2018-02-02
  • 利用原生JS自动生成文章标题树的实例

    利用原生JS自动生成文章标题树的实例

    网上关于生成文章标题树的示例很多,这篇文章介绍的是利用原生JS实现自动生成文章标题树,实现过程很简单,有需要的可以参考借鉴。
    2016-08-08
  • element el-input 删除边框的实现

    element el-input 删除边框的实现

    本文主要介绍了element el-input 删除边框的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • js原生日历的实例(推荐)

    js原生日历的实例(推荐)

    下面小编就为大家带来一篇js原生日历的实例(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • JS删除String里某个字符的方法

    JS删除String里某个字符的方法

    这篇文章主要介绍了JS删除String里某个字符的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,,需要的朋友可以参考下
    2019-06-06
  • js+canvas简单绘制圆圈的方法

    js+canvas简单绘制圆圈的方法

    这篇文章主要介绍了js+canvas简单绘制圆圈的方法,涉及JavaScript调用canvas组件实现简单图形绘制的相关技巧,需要的朋友可以参考下
    2016-01-01
  • Bootstrap每天必学之前端开发框架

    Bootstrap每天必学之前端开发框架

    Bootstrap每天必学之前端开发框架,今天这篇文章就带着大家了解认识当下最流行的前端开发框架Bootstrap,bootstrap深受大家喜爱的原因到底是什么呢,我们一探究竟。
    2015-11-11

最新评论