前端防扒代码片段

Posted 2022-10-24 刘翾

分享一段看到的挺有意思的代码

只要打开了devtools, 由于有debugger的存在, 导致页面的交互失效了. 并且即使点了放开debugger, 后面的reload又会导致页面刷新. 这样的对于页面的需要二次交互的部分, 算是隐藏了, 因为触发不了页面的事件. 可以有效防止嫖代码, 或者在network上分析接口.

对于正常使用的用户, 不打开devtools, 不会触发debugger浮层, setInterval也中断在了第一次执行时, 没影响.

// 放在页面main.js之前插入这段script效果更佳

    (
  (function() 
    var callbacks = [],
        timeLimit = 50,
        open = false;
    setInterval(loop, 1);
    return 
        addListener: function(fn) 
            callbacks.push(fn);
        ,
        cancleListenr: function(fn) 
            callbacks = callbacks.filter(function(v) 
                return v !== fn;
            );
        
    
    function loop() 
        var startTime = new Date();
        debugger;
        if (new Date() - startTime > timeLimit) 
            if (!open) 
                callbacks.forEach(function(fn) 
                    fn.call(null);
                );
            
            open = true;
            window.stop();
            alert('不要扒我了');
            window.location.reload();
         else 
            open = false;
        
    
)()
).addListener(function() 
    window.location.reload();
);