前陣子「Blogger 中文論壇」遭到垃圾訊息洗版，被機器人大量貼文，一次發了幾十篇，甚至有一次達到上百篇。雖說也不會造成太大困擾，因為 Blogger 後台一次能勾選 50 篇文章刪除，不用幾秒就全部消滅了，不過能夠事先預防總是比較省事。於是想到 Google 的這個好工具「reCAPTCHA」，有了它，網頁的表單、留言等工具，就有辦法防堵廣告、垃圾訊息。
只不過，reCAPTCHA 不是設計給前端使用的工具，一般部落格想用的話，需要一點巧思及不錯的 JS 功力，本篇適合前端工程師參考。
(圖片出處: googleblog.com)
一、reCAPTCHA 運作原理
1. 前後端配合
這個工具主要給能夠控制後端的平台使用，因此「官網」目前只有提供 PHP 語言的範例而已。不過原理不難，理解後其他語言也不難套用。
它運作的方式為，如果有人用機器人留垃圾訊息，前端有個驗證碼介面，通過後會將使用者訊息送到 Google 伺服器。
若沒有通過驗證碼而逕自提交標單，後端會將留言者 IP 送到 Google 伺服器檢查，那麼就會發現沒有吻合的前端驗證資訊，那麼後端就可以中止表單的提交與執行。
2. 前端 + JS
從前面的原理可知道，前後端配合檢驗是最保險的機制。但是如果是 Blogger 這類只有前端的部落格平台，基本上無法建立前、後端配合的表單，只能使用官方提供、或第三方的表單，那就很容易遭到垃圾留言。
在沒有後端的情況下，其實 reCAPTCHA 也可以不依靠後端，純粹靠前端來執行。在這種情況下，其運作的原理為：
- 首先你要將表單的提交改用 JS 控制
- 提交之前必須讓程式執行 reCAPTCHA，跑出驗證碼的介面
- 等留言者通過驗證後，reCAPTCHA 允許執行成功驗證完的 callback 函數
- 最後將提交表單的 JS 程式，包在 callback 函數之中，送出表單
以上流程為純粹前端使用 reCAPTCHA 的方式，比起後端，它的風險就是厲害一點的使用者，如果有辦法看到 callback 函數的內容，那麼就被破解了，因為沒有後端作為把關。
雖然前端使用 reCAPTCHA 並不保險，但 JS 功力強一點的話，其實也沒那麼好破解，需要花不少時間。因此除非遇到針對性的駭客，不然我認為前端的方式已經夠形成嚇阻作用了。
二、申請 reCAPTCHA
那麼本篇就以我的使用經驗，提供前端執行 reCAPTCHA 的作法。
首先需要到官網申請 reCAPTCHA，而且需要註冊個人網域，這部分的流程請參考這篇「教你如何使用Google的reCAPTCHA驗證碼keys申請」，圖文說明得很清楚。
申請完之後，最重要的是記下你的 Site key，類似以下的字串：
6LfMbA4UAAAAAMCNO2YQ7AfRho8hoUxxxxxxxxxx三、範例程式碼
首先你需要知道如何用 JS 控制你的表單提交，接著以下是範例程式碼：
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async></script>
<div id="recaptcha_box"></div>
<script>
var onloadCallback = function() {
grecaptcha.render("recaptcha_box", {
"sitekey": "6LfMbA4UAAAAAMCNO2YQ7AfRho8hoUxxxxxxxxxx",
"callback": callback
});
};
function callback() {
/* 這裡可執行提交表單的動作
alert("恭喜你驗證成功");
*/
}
</script>- 兩處紅色字串必須一致，這是 reCAPTCHA 載入後會執行的函數
- 兩處藍色字串必須一致，這是 reCAPTCHA 驗證碼介面會顯示的地方
- 綠色字串請改為你的 Site key 字串
- 最後 callback 函數內改為你的提交表單 JS 程式碼
下面提供一個驗證碼的效果，通過驗證後，瀏覽器會彈出 "恭喜你驗證成功"的小視窗，證明 callback 在驗證成功後才會執行。
四、JS 加密
為了不讓 callback 函數的內容被輕易看到，有幾個方法，但這裡不做太深入的說明，把關鍵字問 Google 大神就會有更詳細的教學：
- 把 callback 放在匿名函數之中，就不會被輕易看到。
- 把全部的 JS 進行加密、混淆，變成一堆亂碼，可增加被破解的難度。
五、調整驗證碼難易度
雖說驗證碼可以阻擋垃圾訊息，但是驗證碼如果太困難，讓正常留言的讀者造成困擾的話，反而得不償失。
WFU 建議可以一開始的時候，將驗證碼難度設為最低，方便讀者留言；當發生大量垃圾留言的時候，再視情況逐步調高難度；等到垃圾留言一陣子都沒出現了，再把難度調回最低。這樣的操作原理，就如同「對抗 Blogger 垃圾留言全紀錄」一樣。
上圖是 Google reCAPTCHA 官網的設定畫面，紅框的區塊就是調整驗證碼難度的地方。
- 選擇「Easiest for user」代表最簡單
- 選擇「Most secure」代表最困難
通常選擇中等，就足以造成大量發垃圾留言的困難了，讀者可以視自己的狀況來機動調整。
更多資訊安全相關文章：