移动端H5页面如何做代码加固防爬取？

Mr.明宇提问于 2026-03-19 14:42:25 阅读 81

移动

我们团队最近上线了一个活动页，结果第二天就被竞品完整扒走了HTML和JS逻辑。现在想给移动端H5加点防护，但不知道从哪下手。

试过把关键逻辑用eval混淆，但发现Chrome DevTools里还是能轻易还原。也考虑过用WebAssembly，但工期太紧搞不定。有没有轻量又有效的加固方案？比如能不能在构建时自动加密敏感函数？

目前项目是Vue2 + Webpack4，打包后的代码结构大概是这样：

function checkUserAuth(token) {
  if (!token || token.length < 10) {
    window.location.href = '/login';
    return false;
  }
  return true;
}

加固方案移动端安全

我来解答赞 10 收藏

反馈

2 条解答

Good“怡平 Lv1

先检查一下你们现在的打包配置，Vue2加Webpack4确实有很多可以优化的地方。直接上eval混淆确实不够用，Chrome开发者工具太强大了。

建议从这几个方面入手：首先在Webpack配置里开启production模式下的TerserPlugin高级压缩选项，这个能把代码压得更乱一些。具体配置大概是这样

optimization: {

  minimize: true,

  minimizer: [new TerserPlugin({

    terserOptions: {

      compress: {

        drop_console: true

      },

      mangle: {

        properties: {

          regex: /^_/

        }

      }

    }

  })]

}

另外可以在构建时用javascript-obfuscator插件加密敏感函数。它能自动混淆变量名和函数逻辑，比手动写eval要靠谱得多。记得只加密关键部分，不然会影响性能。

最后再加个简单的域名检测，通过window.location.hostname判断当前页面是否在合法域名下运行。虽然这些都不是万无一失的方案，但至少能增加扒站成本。

说到底，前端代码完全防不住有决心的人，重点是后端要做好验证和数据保护。前端加固主要是为了防止那些懒人直接复制粘贴。

2026-03-30 05:01

萌新.佳怡 Lv1

H5前端没法完全防爬，JS在浏览器跑人家总能调试。核心逻辑扔后端，前端只留调用接口。

混淆用 webpack-obfuscator，装一下配置就成：

// webpack.conf.js

const JavaScriptObfuscator = require('webpack-obfuscator');



module.exports = {

  plugins: [

    new JavaScriptObfuscator({

      compact: true,

      controlFlowFlattening: true,

      deadCodeInjection: true,

      stringArray: true,

      stringArrayThreshold: 0.75,

      rotateStringArray: true,

      shuffleStringArray: true

    }, ['*.js'])

  ]

};

关键业务逻辑改成API调用，别放前端。就酱。

2026-03-19 15:00