2016年12月31日

如何使用 Google reCAPTCHA 防止網頁被留垃圾廣告訊息

A+
google-recaptcha-如何使用 Google reCAPTCHA 防止網頁被留垃圾廣告訊息前陣子「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-level-如何使用 Google reCAPTCHA 防止網頁被留垃圾廣告訊息

上圖是 Google reCAPTCHA 官網的設定畫面,紅框的區塊就是調整驗證碼難度的地方。

  • 選擇「Easiest for user」代表最簡單
  • 選擇「Most secure」代表最困難

通常選擇中等,就足以造成大量發垃圾留言的困難了,讀者可以視自己的狀況來機動調整。



更多資訊安全相關文章:

沒有留言:

↑TOP

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。