资讯频道 → Web前端
阅读更多

1顶
0踩

Web前端

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

2016-12-27 16:03 by 副主编 jihong10102006 评论(0) 有9098人浏览
css html github 前端

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

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

有时候为了抢一个红包，会跑到另一个地方去拍照，虽然略麻烦，但整体的互动还是很有意思的。

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

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

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

对于上图中间那块区域，我们可以通过固定的轮廓对底图进行遮罩得出。

所以对于前端而言，我们可以通过这样的 DOM 结构来实现如上需求：

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

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

本文不再赘述该 CSS3 特性。

另外还有一点小需求 —— 希望 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，例如之前的《天猫双十一狂抢优惠券？机智的程序猿这么玩》，开动脑筋想一想办法经常会出来（这也是为何大公司做活动，都会谨慎地加上防刷措施的原因）。共勉~
  • 大小: 203.7 KB
  • 大小: 261.7 KB
  • 大小: 181.7 KB
  • 大小: 28.4 KB
  • 大小: 348.8 KB
  • 大小: 348.8 KB
来自: vajoy
1
顶
0
踩
评论 共 0 条 请登录后发表评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • 前端轻松破解支付宝AR抢红包

    不过对于机智的前端童鞋来说，只需要简单的一段代码就能破解AR红包（当然成功率也不是100%）。破解原理见《上线仅一天：支付宝AR红包惨遭技术流破解》（https://news.cnblogs.com/n/559670/），感谢这位设计师童鞋。...

  • 【opencv】支付宝AR实景红包领取方法

    最新的支付宝10.0.0增加了AR实景红包功能。 如何不通过寻找实景去得到红包呢？ 今天早上突然想抢几个红包，于是写了个小程序   首先找到一个周围的红包，点击“按住看线索”，然后屏幕截图。 然后提取出线索区域，...

  • 前后端分离后的前端时代，使用前端技术能做哪些事？

    什么是前后端分离，要区分前端和后端，需要有个明确的界限。一般，用户可以直接看到的东西，都是属于前端的范畴，除了前端之外都属于后端了。 在传统的像ASP，JSP和PHP等开发模式中，前端是处在一个混沌的状态中，...

  • 前后端分离后的互联网时代，使用前端技术能做哪些事？

    什么是前后端分离，要区分前端和后端，需要有个明确的界限。一般，用户可以直接看到的东西，都是属于前端的范畴，除了前端之外都属于后端了。 在传统的像ASP，JSP和PHP等开发模式中，前端是处在一个混沌的状态中，...

  • 大火的前端时代，使用前端技术能实现什么？

    什么是前后端分离，要区分前端和后端，需要有个明确的界限。一般，用户可以直接看到的东西，都是属于前端的范畴，除了前端之外都属于后端了。 在传统的像ASP，JSP和PHP等开发模式中，前端是处在一个混沌的状态中，...

  • 前后端分离后的前端时代，前端技术要会做哪些事？

    一般，用户可以直接看到的东西，都是属于前端的范畴，除了前端之外都属于后端了。 2，在传统的像ASP，JSP和PHP等开发模式中，前端是处在一个混沌的状态中，可以说是没有独立的“人格”可言。 3，前端负责切图和编写...

  • 前后端分离后的前端时代

    本文从前端开发的视角，聊一聊前后端分离之后的前端开发的那些事儿。阅读全文，大约需要8分钟。  什么是前后端分离 要区分前端和后端，需要有个明确的界限。一般，用户可以直接看到的东西，都是属于...

  • 移动端开发的未来在哪里？-Tamic博客

    从去年下半年开始，就开始听到各种言论，例如 “Android 开发凉凉”、“移动端开发没出路了赶紧转行”、“要被 XXX 替代了” 等等，充分反映了大家焦虑的心态。移动端开发真的要凉凉了吗？我也经常和朋友聊起这个...

  • 物业公司绩效考核制度.doc

    物业公司绩效考核制度

  • 2025最新小学数学义务教育课程标准(2022年版)必考题库附含答案.docx

    2025最新小学数学义务教育课程标准(2022年版)必考题库附含答案.docx

  • SDL-1.2.15-17.el7.x64-86.rpm.tar.gz

    1、文件内容：SDL-1.2.15-17.el7.rpm以及相关依赖 2、文件形式：tar.gz压缩包 3、安装指令： #Step1、解压 tar -zxvf /mnt/data/output/SDL-1.2.15-17.el7.tar.gz #Step2、进入解压后的目录，执行安装 sudo rpm -ivh *.rpm 4、安装指导：私信博主，全程指导安装

  • 软件研发绩效考核办法.doc

    软件研发绩效考核办法

  • FactoryIO液位PID仿真程序入门指南：使用TIA Portal V15与FactoryIO 2.4.0的梯形图编程,factoryio液位PID仿真程序 使用简单的梯形图编写，通俗易懂，起到抛

    FactoryIO液位PID仿真程序入门指南：使用TIA Portal V15与FactoryIO 2.4.0的梯形图编程,factoryio液位PID仿真程序 使用简单的梯形图编写，通俗易懂，起到抛砖引玉的作用，比较适合有动手能力的入门初学者。 软件环境： 1、西门子编程软件：TIA Portal V15（博图V15） 2、FactoryIO 2.4.0 内容清单： 1、FactoryIO中文说明书+场景模型文件 2、博图V15PLC程序(源码)。 ,核心关键词：FactoryIO液位PID仿真程序; 梯形图编写; 通俗易懂; 入门初学者; 西门子编程软件; TIA Portal V15（博图V15）; FactoryIO 2.4.0; FactoryIO中文说明书; 场景模型文件; PLC程序（源码）。,"FactoryIO液位控制：梯形图PID仿真程序"

  • 微信自动锁定2.0为保护日常隐私3分钟不操作鼠标和键盘自动锁定微信.rar

    # 微信自动锁定：您的隐私保护神器在当今数字化时代，隐私安全日益重要。微信作为我们日常沟通和信息交流的重要工具，其中的隐私保护不容忽视。为了满足大家对微信隐私保护的需求，我们特别推出了“微信自动锁定”软件。 1. **自动锁定**：这是软件的核心功能。当您在使用微信的过程中，若3分钟内没有任何鼠标和键盘操作，软件会自动锁定微信。这一功能有效防止了他人在您离开电脑时，未经授权访问您的微信，保护您的聊天记录、个人信息等隐私不被泄露。 2. **便捷的托盘操作**：程序启动后，会自动收纳到电脑右下角的托盘中，不占用过多屏幕空间，也不会干扰您的正常工作和使用。当您需要退出程序时，只需右键点击托盘图标，选择“退出”即可，操作简单便捷。 3. **灵活的托盘图标设置**：托盘图标支持两种设置方式。您可以选择指定路径的图片作为托盘图标，按照自己的喜好进行个性化设置；也可以使用base64编码的图标，满足不同用户的多样化需求。

  • 基于Python 的BP神经网络的高频金融时间序列分析毕业设计

    【作品名称】：基于Python 的BP神经网络的高频金融时间序列分析【毕业设计】 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【项目介绍】： This project includes three sections. GetData Data crawling. Responsible for crawling and processing the high frequency data of stock transcation in recent years. And the data format would be converted to an appropriate format. predict Core algorithm. Implement the Back Propagation Neural Networks 【资源声明】：本资源作为“参考资料”而不是“定制需求”，代码只能作为参考，不能完全复制照搬。需要有一定的基础看懂代码，自行调试代码并解决报错，能自行添加功能修改代码。

  • PackageKit-gtk3-module-1.1.10-2.el7.centos.x64-86.rpm.tar.gz

    1、文件内容：PackageKit-gtk3-module-1.1.10-2.el7.centos.rpm以及相关依赖 2、文件形式：tar.gz压缩包 3、安装指令： #Step1、解压 tar -zxvf /mnt/data/output/PackageKit-gtk3-module-1.1.10-2.el7.centos.tar.gz #Step2、进入解压后的目录，执行安装 sudo rpm -ivh *.rpm 4、安装指导：私信博主，全程指导安装

  • 三相PWM整流器的双闭环控制与C语言实现的PI控制及SVPWM模块技术解析,三相PWM整流器，采用双闭环控制，用C语言实现PI控制，SVPWM等模块 ,核心关键词：三相PWM整流器；双闭环控制；C语

    三相PWM整流器的双闭环控制与C语言实现的PI控制及SVPWM模块技术解析,三相PWM整流器，采用双闭环控制，用C语言实现PI控制，SVPWM等模块。 ,核心关键词：三相PWM整流器；双闭环控制；C语言实现；PI控制；SVPWM模块；,三相PWM整流器双闭环PI控制与SVPWM模块实现

  • 反激式开关电源仿真研究：电压外环PI控制下12V输出电压及MATLAB建模分析,反激式开关电源，反激仿真电力电子仿真，电压外环PI控制，输入电压18-75V,输出电压12V,输出功率12W,MATLA

    反激式开关电源仿真研究：电压外环PI控制下12V输出电压及MATLAB建模分析,反激式开关电源，反激仿真电力电子仿真，电压外环PI控制，输入电压18-75V,输出电压12V,输出功率12W,MATLAB simulink软件。 ,核心关键词：反激式开关电源; 反激仿真; 电力电子仿真; 电压外环PI控制; 输入电压18-75V; 输出电压12V; 输出功率12W; MATLAB Simulink软件。,基于反激式开关电源的电力电子仿真与电压外环PI控制研究

  • 电赛小车源码 常规C/C++编程

    电赛小车源码 常规C/C++编程 【核心代码】 ├── 2003智能小车（全国大学生电子设计竞赛） │ ├── BrainCar.M51 │ ├── BrainCar.Opt │ ├── BrainCar.Uv2 │ ├── BrainCar.hex │ ├── BrainCar.lnp │ ├── BrainCar.plg │ ├── BrainCar_Opt.Bak │ ├── BrainCar_Uv2.Bak │ ├── Config.h │ ├── Follow.LST │ ├── Follow.OBJ │ ├── Follow.c │ ├── Follow.h │ ├── IOCfg.LST │ ├── IOCfg.OBJ │ ├── IOCfg.c │ ├── LightDTC.LST │ ├── LightDTC.OBJ │ ├── LightDTC.c │ ├── LightDTC.h │ ├── MetalDTC.LST │ ├── MetalDTC.OBJ │ ├── Met

Global site tag (gtag.js) - Google Analytics