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

1顶
0踩

Web前端

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

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

  • 关于__Federico Milano 的电力系统分析工具箱.zip

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

  • mlab-upenn 研究小组的心脏模型模拟.zip

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

  • 混合图像创建大师matlab代码.zip

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

  • 中序遍历二叉树-java版本

    在Java中，实现二叉树的中序遍历同样可以通过递归来完成。中序遍历的顺序是：首先递归地中序遍历左子树，然后访问根节点，最后递归地中序遍历右子树。 在这段代码中，Node类定义了二叉树的节点，BinaryTree类包含一个指向根节点的指针和inOrder方法，用于递归地进行中序遍历。printInOrder方法调用inOrder方法并打印出遍历的结果。 在Main类中，我们创建了一个示例二叉树，并调用printInOrder方法来输出中序遍历的结果。输出应该是：4 2 5 1 3，这表示中序遍历的顺序是左子树（4），然后是根节点（2），接着是右子树的左子树（5），然后是右子树的根节点（1），最后是右子树的右子树（3）。

  • 无头单向非循环链表的实现（SList.c）

    无头单向非循环链表的实现（函数定义文件）

  • 两个有序链表的合并pta

    "PTA" 通常指的是一种在线编程平台，例如“Pata”或者某些特定学校或组织的编程练习与自动评测系统。在这种平台或系统中，学生或程序员会提交代码来解决各种问题，然后系统会自动运行并评测这些代码的正确性。 当提到“两个有序链表的合并PTA”时，这通常意味着在PTA平台上解决一个特定的问题，即合并两个有序链表。具体任务可能是给定两个已按升序排序的链表，要求编写代码来合并这两个链表，形成一个新的有序链表。

  • 在 Matlab 中创建的图形工具可改善航空航天数据的可视化.zip

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

  • 搜索引擎的设计与实现.zip

    搜索引擎的设计与实现

  • 年公司财务会计岗位工作总结（二）.docx

    工作总结，新年计划，岗位总结，工作汇报，个人总结，述职报告，范文下载，新年总结，新建计划。

  • 【基于Springboot+Vue的Java毕业设计】无人超市管理系统项目实战(源码+录像演示+说明).rar

    【基于Springboot+Vue的Java毕业设计】无人超市管理系统项目实战(源码+录像演示+说明).rar 【项目技术】 开发语言：Java 框架：Spingboot+vue 架构：B/S 数据库：mysql 【演示视频-编号：314】 https://pan.quark.cn/s/8dea014f4d36 【实现功能】 无人超市管理系统有管理员，用户两个角色。管理员功能有个人中心，用户管理，商品类型管理，支付类型管理，公告类型管理，商品信息管理，出入库管理，出入库详情管理，购买管理，购买详情管理，公告信息管理。用户可以注册登录，自助购买，点击购买管理里面收银就可以选择支付类型和商品然后提交，还可以查看购买详情和公告信息。

  • 电视的半盲图像去模糊问题，.zip

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

Global site tag (gtag.js) - Google Analytics