支付宝AR抢红包？前端轻松就破解~

时间 2019-11-06

标签支付宝红包前端轻松破解繁體版

原文原文链接

近期阿里搞了各LBS+AR实景的红包玩法，小伙伴们在公司里都玩疯了~html

有时候为了抢一个红包，会跑到另外一个地方去拍照，虽然略麻烦，但总体的互动仍是颇有意思的。前端

不过对于机智的前端童鞋来讲，只须要简单的一段代码就能破解AR红包（固然成功率也不是100%）。git

破解原理见《上线仅一天：支付宝AR红包惨遭技术流破解》，感谢这位设计师童鞋。github

咱们要作的事情其实很简单 —— 把系统自带的小横条都去掉，去掉的部分取其附近的图片内容来填充，最终获得的效果图有不小的概率会被识别为匹配成功：web

对于上图中间那块区域，咱们能够经过固定的轮廓对底图进行遮罩得出。canvas

因此对于前端而言，咱们能够经过这样的 DOM 结构来实现如上需求：工具

其中 C 和 B 实际上是同一个背景（即抢红包页面的手机截图），A 是一个遮罩轮廓，会对 B 进行剪辑得到非条纹部分的图片内容。同时 B 再相对 C 进行垂直偏移，用自身被剪辑后的内容挡住 C 的条纹。优化

根据图片alpha通道来作遮罩的能力，咱们可使用 CSS3 的 mask-image 特性来实现，其具体应用在我以前《巧用 mask-image 实现简单进度加载界面》一文中已作了详细介绍：this

本文再也不赘述该 CSS3 特性。url

另外还有一点小需求 —— 但愿 B 和 C 的底图能够动态更换。这个咱们使用 input[type=file] 组件来实现便可。

直接贴代码吧：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            margin-top: -1500px;
            position: relative;
            overflow: hidden;
            background: #EEE;
            width: 1440px;
            height: 2110px;
        }

        #bg, #mask-bg {
            position: absolute;
            width: 1440px;
            height: 2560px;
            background-size: cover;
        }
        #mask-bg{
            top:9px;
            mask-image: url(mask.png);
            -webkit-mask-image: url(mask.png);
        }
        input {
            height: 60px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
<div>
    <p id="bg"></p>
    <p id="mask-bg"></p>
</div>
<input type="file">

<script>
    var input = document.querySelector('input'),
        bg = document.querySelector('#bg'),
        maskBg = document.querySelector('#mask-bg');

    input.onchange = function () {
        var src = getObjectURL(this.files[0]);
        setBg(src);

    };

    function setBg(src){
        bg.style.backgroundImage = 'url(' + src + ')';
        maskBg.style.backgroundImage = 'url(' + src + ')';
    }

    /**
     * 经过选择的文件获取其图片路径（blob）
     * @param file
     * @returns {*}
     */
    function getObjectURL(file) {
        var url = null;
        if (window.createObjectURL != undefined) {
            url = window.createObjectURL(file)
        } else if (window.URL != undefined) {
            url = window.URL.createObjectURL(file)
        } else if (window.webkitURL != undefined) {
            url = window.webkitURL.createObjectURL(file)
        }
        return url
    }

</script>
</body>

须要了解的是，咱们在 getObjectURL 方法中使用了 URL.createObjectURL 接口来为所选文件生成对应的 blob 内容的URL，再将其赋给底图的 background-image。其格式是这样的：

最终总体效果以下：

须要注意的是，这里的图片宽高值，以及遮罩图 mask.png，都是根据个人手机分辨率来定制的，因此要使用该工具的话请自行修改样式和遮罩图片。

该小工具挂在个人 github 仓库上，有需求的能够自助下载修改。

Tips：
1. 这里没法保证成功率100%，尽可能选择颜色较深、没有文字出现的照片，成功率会大一点；
2. 支付宝是有防刷措施的，天天都有领取红包的数量上限，因此要经过AR红包来发家致富是走不通了（手动滑稽）；
3. 如今破解起来很轻松的一个地方是，支付宝每次生成的条纹都是固定的（条数、位置、粗度），说很差之后会对这块进行优化，进而动态生成条纹，那本文的办法就不适用了（mask.png没法适应）。不过即便那样也能够走canvas来hack。

其实阿里蛮多福利都能经过前端来hack，例如以前的《天猫双十一狂抢优惠券？机智的程序猿这么玩》，开动脑筋想想办法常常会出来（这也是为什么大公司作活动，都会谨慎地加上防刷措施的缘由）。共勉~