在電商行業，線上的營銷活動特別多。在移動網際網路時代，一般為了活動的快速上線和內容的即時更新，大部分的業務場景仍然通過 Web 頁面來承載。但由於 Web 頁面天生“環境透明”，相較於移動客戶端頁面在安全性上存在更大的挑戰。本文主要以移動端 Web 頁面為基礎來講述如何提升頁面安全性。
活動 Web 頁面的安全挑戰
對於營銷活動類的 Web 頁面，領券、領紅包、抽獎等活動方式很常見。此類活動對於普通使用者來說大多數時候就是“拼手氣”，而對於非正常使用者來說，可以通過直接刷活動 API 介面的“作弊”方式來提升“手氣”。這樣的話，對普通使用者來說，就變得很不公平。
對於活動運營的主辦方來說，如果風控措施做的不好，這類刷介面的“拼手氣”方式可能會對企業造成較大的損失。如本來計劃按 7 天發放的紅包，在上線 1 天就被刷光了，活動的營銷成本就會被意外提升。主辦方想發放給使用者的滿減券、紅包，卻大部分被黃牛使用自動指令碼刷走，而真正想參與活動的用，卻無法享受活動優惠。
終端使用者到底是人還是機器，網路請求是否為真實使用者發起，是否存在安全漏洞並且已被“羊毛黨”惡意利用等等，這些都是運營主辦方要擔心的問題。
安全防範的基本流程
為了提升活動 Web 頁面的安全性，通常會引入專業的風控服務。引入風控服務後，安全防護的流程大致如圖所示。
-
Web 前端：使用者通過 Web 頁面來參與活動，同時 Web 前端也會收集用於人機識別驗證的使用者互動行為資料。由於不同終端（移動端 H5 頁面和 PC 端頁面）互動形式不同，收集使用者互動行為資料的側重點也會有所不同。
-
風控服務：一般大公司都會有專業的風控團隊來提供風控服務，在美團內部有智慧反爬系統來基於地理位置、IP地址等大資料來提供頻次限制、黑白名單限制等常規的基礎風控攔截服務。甚至還有依託於海量的全業務場景的使用者大資料，使用貝葉斯模型、神經網路等來構建專業度較深的服務。風控服務可以為 Web 前端提供通用的獨立驗證 SDK：驗證碼、滑塊驗證等區分人機的“圖靈驗證”，也可以為服務端提供 Web API 介面的驗證等。
-
後端業務服務：負責處理活動業務邏輯，如給使用者發券、發紅包，處理使用者抽獎等。請求需要經過風控服務的驗證，確保其安全性，然後再來處理實際業務邏輯，通常，在處理完實際業務邏輯時，還會有針對業務本身的風控防範。
對於活動 Web 頁面來說，加入的風控服務主要為了做人機識別驗證。在人機識別驗證的專業領域上，我們可以先看看業界巨頭 Google 是怎麼做的。
Google 如何處理人機驗證
Google 使用的人機驗證服務是著名的 reCAPTCHA（Completely Automated Public Turing Test To Tell Computers and Humans Apart，區分人機的全自動圖靈測試系統），也是應用最廣的驗證碼系統。早年的 reCAPTCHA 驗證碼是這樣的：
如今的 reCAPTCHA 已經不再需要人工輸入難以識別的字元，它會檢測使用者的終端環境，追蹤使用者的滑鼠軌跡，只需使用者點選“我不是機器人”就能進行人機驗證（reCAPTCHA騙使用者進行資料標註而進行AI訓練的驗證另說）。
reCAPTCHA 的驗證方式從早先的輸入字元到現在的輕點按鈕，在使用者體驗上，有了較大的提升。
而在活動場景中引入人機識別驗證，如果只是簡單粗暴地增加驗證碼，或者只是像 reCAPTCHA 那樣增加點選“我不是機器人”的驗證，都會犧牲使用者體驗，降低使用者參加活動的積極性。
Google 的普通 Web 頁面的瀏覽和有強互動的活動 Web 頁面雖是不同的業務場景，但對於活動 Web 頁面來說，強互動恰好為人機識別驗證提供了使用者互動行為資料收集的契機。
人機識別驗證的技術挑戰
理想的方案是在使用者無感知的情況下做人機識別驗證，這樣既確保了安全又對使用者體驗無損傷。
從實際的業務場景出發再結合 Web 本身的環境，如果想實現理想的方案，可能會面臨如下的技術挑戰：
- （1）需要根據使用者的使用場景來定製人機識別驗證的演算法：Web 前端負責收集、上報使用者互動行為資料，風控服務端校驗上報的資料是否符合正常的使用者行為邏輯。
- （2）確保 Web 前端和風控服務端之間通訊和資料傳輸的安全性。
- （3）確保上述兩大挑戰中提到的邏輯和演算法不會被程式碼反編譯來破解。
在上述的三個挑戰中，（1）已經實現了人機識別驗證的功能，而（2）和（3）都是為了確保人機識別驗證不被破解而做的安全防範。接下來，本文會分別針對這三個技術挑戰來說明如何設計技術方案。
挑戰一：根據使用者使用場景來定製人機識別驗證演算法
先來分析一下使用者的使用場景，正常使用者參與活動的步驟是使用者進入活動頁面後，會有短暫的停留，然後點選按鈕參與活動。這裡所說的“參與活動”，最終都會在活動頁面發起一個介面的請求。如果是非正常使用者，可以直接跳過以上的實際動作而去直接請求參與活動的介面。
那麼區別於正常使用者和非正常使用者就是那些被跳過的動作，對實際動作進一步歸納如下：
- 進入頁面。
- 短暫的停留。
- 滾動頁面。
- 點選按鈕。
以上的動作又可以分為必需的操作和可選的操作。對這一連串動作產生的日誌資料進行收集，在請求參與活動的介面時，將這些資料提交至後端，驗證其合法性。這就是一個簡單的人機識別驗證。
在驗證動作的合法性時，需要考慮到這些動作資料是不是能被輕易模擬。另外，動作的發生應該有一條時間線，可以給每個動作都增加一個時間戳，比如點選按鈕肯定是在進入頁面之後發生的。
一些特定的動作的日誌資料也會有合理的區間，進入頁面的動作如果以 JS 資源載入的時間為基準，那麼載入時間可能大於 100 毫秒，小於 5 秒。而對於移動端的按鈕點選，點選時記錄的座標值也會有對應的合理區間，這些合理的區間會根據實際的環境和情況來進行設定。
除此之外，裝置環境的資料也可以進行收集，包括使用者參與活動時使用的終端型別、瀏覽器的型別、瀏覽器是否為客戶端的容器等，如果使用了客戶端，客戶端是否會攜帶特殊的標識等。
最後，還可以收集一些“無效”的資料，這些資料用於障人耳目，驗證演算法會將其忽略。儘管收集資料的動作是透明的，但是驗證資料合法性不是透明的，攻擊者無法知道，驗證的演算法中怎麼區分哪些是有效、哪些是無效。這已經有點“蜜罐資料”的意思了。
挑戰二：確保通訊的安全性
收集的敏感資料要傳送給風控服務端，進而確保通訊過程的安全。
- Web API 介面不能被中途攔截和篡改，通訊協議使用 HTTPS 是最基本的要求；同時還要讓服務端生成唯一的 Token，在通訊過程中都要攜帶該 Token。
- 介面攜帶的敏感資料不能是明文的，敏感資料要進行加密，這樣攻擊者無法通過網路抓包來詳細瞭解敏感資料的內容。
Token 的設計
Token 是一個簡短的字串，主要為了確保通訊的安全。使用者進入活動 Web 頁面後，請求參與活動的介面之前，會從服務端獲取 Token。該 Token 的生成演算法要確保 Token 的唯一性，通過介面或 Cookie 傳遞給前端，然後，前端在真正請求參與活動的介面時需要帶上該 Token，風控服務端需要驗證 Token 的合法性。也就是說，Token 由服務端生成，傳給前端，前端再原封不動的回傳給服務端。一旦加入了 Token 的步驟，攻擊者就不能直接去請求參與活動的介面了。
Token 由風控服務端基於使用者的身份，根據一定的演算法來生成，無法偽造，為了提升安全等級，Token 需要具有時效性，比如 10 分鐘。可以使用 Redis 這類快取服務來儲存 Token，使用使用者身份標識和 Token 建立 KV 對映表，並設定過期時間為 10 分鐘。
雖然前端在 Cookie 中可以獲取到 Token，但是前端不能對 Token 做持久化的快取。一旦在 Cookie 中獲取到了 Token，那麼前端可以立即從 Cookie 中刪除該 Token，這樣能儘量確保 Token 的安全性和時效性。Token 儲存在 Redis 中，也不會因為使用者在參與活動時頻繁的切換頁面請求，而對服務造成太大的壓力。
另外，Token 還可以有更多的用處：
- 標識參與活動使用者的有效性。
- 敏感資料對稱加密時生成動態金鑰。
- API 介面的數字簽名。
敏感資料加密
通訊時，傳遞的敏感資料可以使用常見的對稱加密演算法進行加密。
為了提升加密的安全等級，加密時的金鑰可以動態生成，前端和風控服務端約定好動態金鑰的生成規則即可。加密的演算法和金鑰也要確保不被暴露。
通過對敏感資料加密，攻擊者在不瞭解敏感資料內容的前提下就更別提模擬構造請求內容了。
挑戰三：化解紙老虎的尷尬
有經驗的 Web 開發者看到這裡，可能已經開始質疑了：在透明的前端環境中折騰安全不是白折騰嗎？這就好比費了很大的勁卻只是造了一個“紙老虎”，質疑是有道理的，但是且慢，通過一些安全機制的加強是可以讓“紙老虎”儘可能的逼真。
本文一再提及的 Web 環境的透明性，是因為在實際的生產環境中的問題：前端的程式碼在壓縮後，通過使用瀏覽器自帶的格式化工具和斷點工具，仍然具備一定的可讀性，花點時間仍然可以理解程式碼的邏輯，這就給攻擊者提供了大好的程式碼反編譯機會。
如果要化解“紙老虎”的尷尬，就要對前端的程式碼進行混淆。
前端程式碼混淆
前端的 JS 程式碼壓縮工具基本都是對變數、函式名稱等進行縮短，壓縮對於混淆的作用是比較弱。除了對程式碼進行壓縮，還需要進行專門的混淆。
對程式碼進行混淆可以降低可讀性，混淆工具有條件的話最好自研，開源的工具要慎用。或者基於 Uglify.js 來自定義混淆的規則，混淆程度越高可讀性就越低。
程式碼混淆也需要把握一個度，太複雜的混淆可能會讓程式碼無法執行，也有可能會影響本身的執行效率。同時還需要兼顧混淆後的程式碼體積，混淆前後的體積不能有太大的差距，合理的混淆程度很重要。
斷點工具的防範會更麻煩些。在使用斷點工具時通常都會導致程式碼延遲執行，而正常的業務邏輯都會立即執行，這是一個可以利用的點，可以考慮在程式碼執行間隔上來防範斷點工具。
通過程式碼混淆和對程式碼進行特殊的處理，可以讓格式化工具和斷點工具變得沒有用武之地。唯一有些小遺憾，就是處理後的程式碼也不能正常使用 Source Map 的功能了。
有了程式碼混淆，反編譯的成本會非常高，這樣“紙老虎”已經變得很逼真了。
技術方案設計
在講解完如何解決關鍵的技術挑戰後，就可以把相應的方案串起來，然後設計成一套可以實施的技術方案了。相對理想的技術方案架構圖如下：
下面會按步驟來講解技術方案的處理流程：
Step 0 基礎風控攔截
基礎風控攔截是上面提到的頻次、名單等的攔截限制，在 Nginx 層就能直接實施攔截。如果發現是惡意請求，直接將請求過濾返回 403，這是初步的攔截，使用者在請求 Web 頁面的時候就開始起作用了。
Step 1 風控服務端生成 Token 後傳給前端
Step 0 可能還沒進入到活動 Web 頁面，進入活動 Web 頁面後才真正開始人機識別驗證的流程，前端會先開始獲取 Token。
Step 2 前端生成敏感資料
敏感資料應包含使用者互動行為資料、裝置環境資料、活動業務邏輯資料以及無效資料。
Step 3 使用 HTTPS 的簽名介面傳送資料
Token 可以作為 Authorization 的值新增到 Header 中，資料介面的簽名可以有效防止 CSRF 的攻擊。
Step 4 資料介面的校驗
風控服務端收到請求後，會先驗證資料介面簽名中的 Token 是否有效。驗證完 Token，才會對敏感資料進行解密。資料解密成功，再進一步對人機識別的資料合法性進行校驗。
Step 5 業務邏輯的處理
前面的步驟為了做人機識別驗證，這些驗證不涉及到業務邏輯。在所有這些驗證都通過後，後端業務服務才會開始處理實際的活動業務邏輯。處理完活動業務邏輯，最終才會返回使用者參與活動的結果。
總結
為了提升活動 Web 頁面的安全性，使用了各種各樣的技術方案，我們將這些技術方案組合起來才能發揮安全防範的作用，如果其中某個環節處理不當，都可能會被當作漏洞來利用，從而導致整個驗證方案被攻破。
為了驗證技術方案的有效性，可以持續觀察活動 API 介面的請求成功率。從請求成功率的資料中進一步分析“誤傷”和“攔截”的資料，以進一步確定是否要對方案進行調優。
通過上述的人機識別驗證的組合方案，可以大幅提升活動 Web 頁面的安全性。在活動 Web 頁面應作為一個標準化的安全防範流程，除了美團，像淘寶和天貓也有類似的流程。由於活動運營的環節和方法多且複雜，僅僅提升了 Web 頁面也不敢保證就是鐵板一塊，安全需要關注的環節還很多，安全攻防是一項長期的“拉鋸升級戰”，安全防範措施也需要持續地優化升級。
參考資料
作者簡介
益國，美團點評 Web 前端開發工程師。2015年加入美團，曾先後負責過風控前端SDK和活動運營平臺的研發，現負責大資料平臺的研發工作。