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

1顶
0踩

Web前端

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

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

  • Jpeg Encoder ip：支持YCbCr422输入与输出，可编程量化表，Verilog代码实现，适用于FPGA平台仿真,Jpeg Encoder ip：支持YCbCr格式转换，可编程量化，纯Ve

    Jpeg Encoder ip：支持YCbCr422输入与输出，可编程量化表，Verilog代码实现，适用于FPGA平台仿真,Jpeg Encoder ip：支持YCbCr格式转换，可编程量化，纯Verilog代码易于FPGA移植与VCS仿真应用,Jpeg Encoder ip jpeg编码器： 支持YCbCr422输入，422格式输出 每路数据为8bit 支持可编程量化表 纯verilog代码，方便移植到任何FPGA平台 使用vcs进行仿真 ,Jpeg Encoder IP; YCbCr422输入; 422格式输出; 8bit数据; 可编程量化表; 纯Verilog代码; 方便移植; VCS仿真。,Jpeg编码器：YCbCr422输入输出，可编程量化表，Verilog代码移植性强

  • 【轴承压力】基于matlab GUI止推轴承压力计算【含Matlab源码 12069期】.zip

    Matlab领域上传的视频是由对应的完整代码运行得来的，完整代码皆可运行，亲测可用，适合小白； 1、从视频里可见完整代码的内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作

  • 集字卡v4.3.4微信公众号原版三种UI+关键字卡控制+支持强制关注.zip

    字卡v4.3.4 原版 三种UI+关键字卡控制+支持获取用户信息+支持强制关注 集卡模块从一开始的版本到助力版本再到现在的新规则版本。 集卡模块难度主要在于 如何控制各种不同的字卡组合 被粉丝集齐的数量。 如果不控制那么一定会出现超过数量的粉丝集到指定的字卡组合，造成奖品不够的混乱，如果大奖价值高的话，超过数量的粉丝集到大奖后，就造成商家的活动费用超支了。我们冥思苦想如何才能限制集到指定字卡组合的粉丝数，后我们想到了和支付宝一样的选一张关键字卡来进行规则设置的方式来进行限制，根据奖品所需的关键字卡数，设定规则就可以控制每种奖品所需字卡组合被粉丝集到的数量，规则可以在活动进行中根据需要进行修改，活动规则灵活度高。新版的集卡规则，在此次政府发布号的活动中经受了考验，集到指定字卡组合的粉丝没有超出规则限制。有了这个规则限制后，您无需盯着活动，建好活动后就无人值守让活动进行就行了，您只需要时不时来看下蹭蹭上涨的活动数据即可。 被封？ 无需担心，模块内置有防封功能，支持隐藏主域名，显示炮灰域名，保护活动安全进行。 活动准备？ 只需要您有一个认证服务号即可，支持订阅号借用认证服务号来做活动。如果您

  • DeepSeek写的俄罗斯方块小游戏

    使用DeepSeek写的俄罗斯方块小游戏，可以直接用手机浏览器打开进行游戏操作。

  • 界面GUI设计MATLAB的人脸识别设计.zip

    MATLAB可以用于开发人脸识别考勤系统。下面是一个简单的示例流程： 1. 数据采集：首先收集员工的人脸图像作为训练数据集。可以要求员工提供多张照片以获得更好的训练效果。 2. 图像预处理：使用MATLAB的图像处理工具对采集到的人脸图像进行预处理，例如灰度化、裁剪、缩放等操作。 3. 特征提取：利用MATLAB的人脸识别工具包，如Face Recognition Toolbox，对处理后的图像提取人脸特征，常用的方法包括主成分分析（PCA）和线性判别分析（LDA）等。 4. 训练模型：使用已提取的人脸特征数据集训练人脸识别模型，可以选择支持向量机（SVM）、卷积神经网络（CNN）等算法。 5. 考勤系统：在员工打卡时，将摄像头捕获的人脸图像输入到训练好的模型中进行识别，匹配员工信息并记录考勤数据。 6. 结果反馈：根据识别结果，可以自动生成考勤报表或者实时显示员工打卡情况。 以上只是一个简单的步骤，实际开发过程中需根据具体需求和系统规模进行定制和优化。MATLAB提供了丰富的图像处理和机器学习工具，是开发人脸识别考勤系统的一个很好选择。

  • 基于Flutter的移动应用开发项目源码.zip

    基于Flutter的移动应用开发项目源码

  • 基于CNN-GRU-Attention混合神经网络的负荷预测方法 附Python代码.rar

    1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。

  • 基于LS-SVM对偶问题的分类、回归、时间序列预测和无监督学习研究 附Matlab代码.rar

    1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。

  • （程序、GUI、思路）MATLAB答题卡识别系统.zip

    基于Matlab语言实现的设计项目 2、适用人群：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业或毕业设计中的部分功能，作为“参考资料”使用。 3、解压说明：本资源需要电脑端使用WinRAR、7zip等解压工具进行解压，没有解压工具的自行百度下载即可。 4、免责声明：本资源作为“参考资料”而不是“定制需求”，代码只能作为参考，不能完全复制照搬。不一定能够满足所有人的需求，需要有一定的基础能够看懂代码，能够自行调试代码并解决报错，能够自行添加功能修改代码。由于作者大厂工作较忙，不提供答疑服务，如不存在资源缺失问题概不负责，谢谢理解。

  • sketch up 模型，可用于建模前端测试

    sketch up 模型，可用于建模前端测试

  • kettle的linux

    kettle的linux版本

Global site tag (gtag.js) - Google Analytics