前端防扒代码片段

最新推荐文章于 2025-05-24 09:20:07 发布

原创最新推荐文章于 2025-05-24 09:20:07 发布 · 1.3k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

JavaScript 专栏收录该内容

84 篇文章

订阅专栏

该代码示例展示了一种防止页面代码被抄袭的策略，通过在页面加载时设置debugger断点，当开发者工具被打开时触发警告并强制页面刷新，确保交互失效。此方法主要针对打开开发者工具进行代码分析的情况，对于普通用户不会造成影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

只要打开了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();
});