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

1顶
0踩

Web前端

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

2016-12-27 16:03 by 副主编 jihong10102006 评论(0) 有9213人浏览
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 替代了” 等等，充分反映了大家焦虑的心态。移动端开发真的要凉凉了吗？我也经常和朋友聊起这个...

  • 基于ssm+vue的垃圾分类网站（java毕业设计，包括源码，数据库,教程）.zip

    Java 项目， Java 毕业设计，Java 课程设计，基于 SSM 开发的，含有代码注释，新手也可看懂。毕业设计、期末大作业、课程设计、高分必看，下载下来，简单部署，就可以使用。 包含：项目源码、数据库脚本、软件工具等，前后端代码都在里面。 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷，具有很高的实际应用价值。 项目都经过严格调试，确保可以运行！ 1. 技术组成 前端：vue/html5 后台框架：SSM 开发环境：idea 数据库：MySql（建议用 5.7 版本，8.0 有时候会有坑） 数据库工具：navicat 部署环境：Tomcat（建议用 7.x 或者 8.x 版本）， maven 2. 部署 如果部署有疑问的话，可以找我咨询 Java工具包下载地址： https://pan.quark.cn/s/eb24351ebac4

  • Flutter分析：带有质量平衡部分机翼的MATLAB计算（含Elastic轴与中心对齐）

    内容概要：本文档主要针对含有质量平衡段（即弹性轴和重心重合点xa=0）的硬翼Flutter问题提供了MATLAB解决方案。文档通过迭代的方式对一系列参数（如频率比(fr)、弹性轴(E)和半径(r)等）进行操作，并利用贝塞尔函数(Kn)来评估flutter速度(UFhat)，从而预测了不同质比(mu)下flutter的缩减速度变化情况。同时，文档包含了绘图命令以视觉展示减小颤振速度随质量比变化的趋势以及相应的MATLAB代码。 适合人群：航空工程、飞行器动力学领域的科研工作者，工程师及研究生。尤其是那些从事飞行安全性和稳定性研究的专业人士。 使用场景及目标：主要用于解决飞行器设计过程中遇到的具体颤振问题，能够为设计新型飞机或其他有翼飞行物体提供科学依据和技术支持。它还能够辅助教育，帮助相关专业的学生理解flutter现象及其预防措施。 其他说明：此文件是以数值方法探讨带质量平衡的翅膀颤振特性的实例，在工程上有着重要意义。对于希望深入学习此类问题的人来说，这是一个极好的参考资料和实验平台。然而，实际应用还需要进一步考虑真实条件下的复杂因素，因此需要更多的专业知识和背景资料的支持。

  • GUI面板MATLAB人脸识别系统.zip

    GUI面板MATLAB人脸识别系统

  • 2023年全国计算机二级笔记.pdf

    2023年全国计算机二级笔记.pdf

  • 【人机交互】MATLAB水果成熟度分析.zip

    【人机交互】MATLAB水果成熟度分析

  • 基于SSM+JSP的个人交友网站+数据库（Java毕业设计，包括源码，教程）.zip

    Java 项目， Java 毕业设计，Java 课程设计，基于 SpringBoot 开发的，含有代码注释，新手也可看懂。毕业设计、期末大作业、课程设计、高分必看，下载下来，简单部署，就可以使用。 包含：项目源码、数据库脚本、软件工具等，前后端代码都在里面。 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷，具有很高的实际应用价值。 项目都经过严格调试，确保可以运行！ 1. 技术组成 前端：jsp 后台框架：SSM 开发环境：idea 数据库：MySql（建议用 5.7 版本，8.0 有时候会有坑） 数据库工具：navicat 部署环境：Tomcat（建议用 7.x 或者 8.x 版本）， maven 2. 部署 如果部署有疑问的话，可以找我咨询 Java工具包下载地址： https://pan.quark.cn/s/eb24351ebac4

  • Java毕业设计-SpringBoot+Vue的车辆充电桩（附源码、数据库、教程）.zip

    Java 项目， Java 毕业设计，Java 课程设计，基于 SpringBoot 开发的，含有代码注释，新手也可看懂。毕业设计、期末大作业、课程设计、高分必看，下载下来，简单部署，就可以使用。 包含：项目源码、数据库脚本、软件工具等，前后端代码都在里面。 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷，具有很高的实际应用价值。 项目都经过严格调试，确保可以运行！ 1. 技术组成 前端：html、javascript、Vue 后台框架：SpringBoot 开发环境：idea 数据库：MySql（建议用 5.7 版本，8.0 有时候会有坑） 数据库工具：navicat 部署环境：Tomcat（建议用 7.x 或者 8.x 版本）， maven 2. 部署 如果部署有疑问的话，可以找我咨询 Java工具包下载地址： https://pan.quark.cn/s/eb24351ebac4 后台路径地址：localhost:8080/项目名称/admin/dist/index.html 前台路径地址：localhost:8080/项目名称/front/index.html （无前台不需要输入）

  • 2023年秋季学期公共课计算机基础与应用.pdf

    2023年秋季学期公共课计算机基础与应用.pdf

  • 基于SSM+JSP的多用户博客个人网站+数据库（Java毕业设计，包括源码，教程）.zip

    Java 项目， Java 毕业设计，Java 课程设计，基于 SpringBoot 开发的，含有代码注释，新手也可看懂。毕业设计、期末大作业、课程设计、高分必看，下载下来，简单部署，就可以使用。 包含：项目源码、数据库脚本、软件工具等，前后端代码都在里面。 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷，具有很高的实际应用价值。 项目都经过严格调试，确保可以运行！ 1. 技术组成 前端：jsp 后台框架：SSM 开发环境：idea 数据库：MySql（建议用 5.7 版本，8.0 有时候会有坑） 数据库工具：navicat 部署环境：Tomcat（建议用 7.x 或者 8.x 版本）， maven 2. 部署 如果部署有疑问的话，可以找我咨询 Java工具包下载地址： https://pan.quark.cn/s/eb24351ebac4

  • 联邦基金目标利率数据.xlsx

    美联储在2024年9月18日宣布将其调50个基点，降至4.75%至5.00%之间的水平。这是美联储自2020年3月以来首次降息，也是自2023年7月将利率水平调升至历史高位后的首次下调，标志着货币政策由紧缩周期向宽松周期的转向 数据名称：美国联邦基金有效利率、目标利率历史数据 样本数量：12667条 数据年份：1990.1-2024.9 数据说明：包括有效利率、目标利率 更新日期：2024年9月

  • 基于SpringBoot+Vue的招聘信息管理系统 (2)（Java毕业设计，包括源码、数据库、教程）.zip

    Java 项目，仅供学习参考。 Java 毕业设计，Java 课程设计，基于 SpringBoot 开发的，含有代码注释，新手也可看懂。毕业设计、期末大作业、课程设计、高分必看，下载下来，简单部署，就可以使用。 包含：项目源码、数据库脚本、软件工具等，前后端代码都在里面。 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷，具有很高的实际应用价值。 项目都经过严格调试，确保可以运行！ 1. 技术组成 前端：html、javascript、Vue 后台框架：SpringBoot 开发环境：idea 数据库：MySql（建议用 5.7 版本，8.0 有时候会有坑） 数据库工具：navicat 部署环境：Tomcat（建议用 7.x 或者 8.x 版本）， maven 2. 部署 如果部署有疑问的话，可以找我咨询 Java工具包下载地址： https://pan.quark.cn/s/eb24351ebac4 后台路径地址：localhost:8080/项目名称/admin/dist/index.html 前台路径地址：localhost:8080/项目名称/front/index.html （无前台不需要输入）

Global site tag (gtag.js) - Google Analytics