支付寶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，例如以前的《天貓雙十一狂搶優惠券？機智的程序猿這麼玩》，開動腦筋想想辦法常常會出來（這也是爲什麼大公司作活動，都會謹慎地加上防刷措施的緣由）。共勉~

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。