H5还有人在用吗

近几天，老板让我调查一下现在市面上H5的使用现状。粗略地调查了一下，发现现在使用H5的真不多了，但是还是有人在用H5的，原因无非一是成本低，相比户外广告，H5制作费用根本不值一提；二是效果好，转化率高，好一点的H5大概有10W浏览量，这也反映H5数据统计精准，企业知道钱花在哪个地方，心里就踏实。

但是，H5的安全性会让企业非常头疼，不知道大家还记不记得几年前某App H5 页面被植入色情内容广告在安全圈引起了轰动。后来排查才基本确定为用户当地运营商http劫持导致H5页面被插入广告，给该App 造成极大影响。

为什么H5是黑灰产高发区？

从顶象多年的防控经验来看，H5面临的风险相对较多是有其原因的。

1、JavaScript代码特性。

H5平台开发语言是JavaScript，所有的业务逻辑代码都是直接在客户端以某种“明文”方式执行。代码的安全防护主要依靠混淆，混淆效果直接决定了客户端的安全程度。不过对于技术能力较强的黑产，仍然可以通过调试还原出核心业务处理流程。

2、企业营销推广需求追求简单快捷。

首先，相比其他平台，很多公司在H5平台的开放业务往往会追求简单，快捷。比如在营销推广场景，很多企业的H5页面只需从微信点击链接直接跳转到一个H5页面，点击页面按钮即可完成活动，获取积分或者小红包。

一方面确实提升了用户体验，有助于拉新推广；但另一方面简便的前端业务逻辑，往往也会对应简单的代码，这也给黑灰产提供了便利，相比去破解App，H5或者小程序的破解难度要低一些。

数据显示，如果企业在营销时不做风险控制，黑产比例一般在20%以上，甚至有一些高达50%。这就意味着品牌主在营销中相当一部分费用被浪费了。

3、H5平台自动化工具众多。

核心流程被逆向后，攻击者则可以实现“脱机”，即不再依赖浏览器来执行前端代码。攻击者可以自行构造参数，使用脚本提交请求，即实现完全自动化，如selenium，autojs，Puppeteer等。这些工具可以在不逆向JS代码的情况下有效实现页面自动化，完成爬虫或者薅羊毛的目的。

4、防护能力相对薄弱。

从客观层面来看，H5平台无论是代码保护强度还是风险识别能力，都要弱于App。这是现阶段的框架导致，并不是技术能力问题。JavaScript数据获取能力受限于浏览器，出于隐私保护，浏览器限制了很多数据获取，这种限制从某种程度上也削弱了JavaScript在业务安全层面的能力。

以电商App为例，出于安全考虑，很多核心业务只在App上支持。如果H5和App完全是一样的参数逻辑和加密防护，对于攻击者，破解了H5也就等于破解了App。

5、用户对H5缺乏系统认识。

最后，大部分用户对H5的安全缺乏系统性的认识，线上业务追求短平快，没有在H5渠道构建完善的防护体系情况下就上线涉及资金的营销业务。

H5代码混淆

基于上面这些问题，我们可以采取H5代码混淆的方式来稍微解一下困境。

一、产品简介

H5代码混淆产品，通过多层加密体系，对H5文件进行加密、混淆、压缩，可以有效防止H5源代码被黑灰产复制、破解。

二、混淆原理

对代码中的数字，正则表达式、对象属性访问等统一转为字符串的表示形式
对字符串进行随机加密（多种加密方式，倒序/随机密钥进行轮函数加密等）
对字符串进行拆分，并分散到不同作用域
打乱函数顺序
提取常量为数组引用的方式

举个简单的例子来说明一下流程
（1）变量和函数重命名：

// 混淆前
function calculateSum(a, b) {
  var result = a + b;
  return result;
}

// 混淆后
function a1xG2b(c, d) {
  var e = c + d;
  return e;
}

（2）代码拆分和重新组合：

// 混淆前
function foo() {
  console.log('Hello');
  console.log('World');
}

// 混淆后
function foo() {
  console.log('Hello');
}

function bar() {
  console.log('World');
}

（3）控制流转换：

// 混淆前
if (condition) {
  console.log('Condition is true');
} else {
  console.log('Condition is false');
}

// 混淆后
var x = condition ? 'Condition is true' : 'Condition is false';
console.log(x);

（4）添加无用代码：

// 混淆前
function foo() {
  console.log('Hello');
}

// 混淆后
function foo() {
  console.log('Hello');
  var unusedVariable = 10;
  for (var i = 0; i < 5; i++) {
    unusedVariable += i;
  }
}