Dừng các bot với Google Recaptcha

Giữ Bots Out Luôn là một trò chơi số - Đáng buồn thay, sự sẵn có của các thư viện học máy dễ sử dụng đã khiến việc bẻ khóa nhiều loại CAPTCHA cổ điển đơn giản. Google đứng trước hàng đầu của cơn bão đóng chai - sau tất cả, một cái gì đó chỉ tồn tại nếu nó có thể được tìm thấy (nổi bật) trong các chỉ số của Big G.

Do đó, các kỹ sư của Google dành số lượng đáng kể nỗ lực để thiết kế các hệ thống và giải pháp chống bot. Chúng được cung cấp cho các bên thứ ba thông qua một sản phẩm gọi là reCAPTCHA, mà chúng tôi sẽ kết hợp với nhau trong các bước sau. Để biết thêm các công cụ không liên quan đến bot, hãy xem Công cụ thiết kế web bài đăng.

Trước khi bắt đầu, tuy nhiên, một vài điều cơ bản phải được xóa. Trước hết: Giữ Bots Out luôn là một trò chơi phía máy chủ. Kiểm tra các giá trị trả về của biện pháp chống bot của bạn trên máy khách là ngu ngốc. Kẻ tấn công có thể phân tích mã nguồn hoặc đơn giản là làm việc xung quanh nó bằng cách vá xác thực trả về.

Thứ hai, hãy nhớ rằng không phải tất cả các bot được tạo ra bằng nhau. Ví dụ, khóa Googlebot, dẫn đến trang web của bạn không được lập chỉ mục nữa. Các vấn đề tương tự có thể xảy ra với các bot dành riêng cho ngành khác thường đến nhiều tốt hơn so với gây hại. Cuối cùng, các bot có thể là một tội ác nhỏ hơn trong một số trường hợp - khi lưu lượng truy cập là tất cả những gì bạn cần, một bot nhấp ra chỉ là một cú nhấp chuột.

• 8 API Google tuyệt vời (và cách sử dụng chúng)

01. Đăng ký Go-Go!

Google giữ một mắt nhắm vào người dùng reCAPTCHA. Đầu tại đây Và sử dụng tài khoản Google của bạn để đăng nhập. Thêm "localhost" ngoài tên miền yêu thích của bạn dưới tên miền. Chọn loại hộp kiểm "Tôi không phải là một loại robot" vì đây là biện pháp chống bot nổi tiếng nhất.

02. Cửa hàng trang web và phím máy chủ

Google Phần thưởng kiên trì hoạt động thông qua quy trình thiết lập bằng cách hiển thị máy chủ và khóa trang web. Mặc dù sau này có thể được chia sẻ với các bên thứ ba, hãy đảm bảo rằng khóa bí mật không bao giờ rời khỏi giới hạn của môi trường máy chủ của bạn.

03. Hiểu xác minh trang web

Google sử dụng một biến thể của quy trình phản hồi thử thách để đảm bảo tính toàn vẹn kết quả. Các phiên bản CAPTCHA trả về một giá trị mã hóa mà máy chủ sẽ "bật" vào hệ thống xác minh được lưu trữ bởi Big G - nếu kết quả hóa ra hợp lệ, một phản hồi HTTP chính xác được trả về logic back-end của bạn.

04. Thiết lập Express.js

Điều quan trọng là phải trình diễn một giải pháp chìa khóa trao tay hiển thị toàn bộ luồng xác thực. Do đó, chúng ta cần bắt đầu với "máy chủ" của các loại - Express JS là một chủ đề thường xuyên gần đây, do đó triển khai nó cho một bộ xương dự án mới được tạo.

 Tamnhan @ Tamhan-ThinkPad: ~ / Nodespace / Nodeverify $
npm init --y.
Đã viết thư đến /home/tamhan/nodespace/nodeverify/package.json:
  . . .
TAMHAN @ TAMHAN-THEMENPAD: ~ / NODESPACE / NODEVERIFY $
NPM Cài đặt Yêu cầu Trình tự phân tích cú pháp Body-Parser --Save
. . .
+ [email protected].
+ Yêu cầ[email protected].
+ [email protected] 

05. Chuẩn bị phục vụ

Đang tải hộp kiểm "Tôi không phải là một robot" nổi tiếng yêu cầu một tệp HTML. Cho rằng đây là một mẫu thể hiện luồng tương tác, bắt đầu bằng một tài liệu tĩnh có chứa dấu ấn được hiển thị kèm theo bước này.

 & lt; html & gt;
& lt; Head & GT;
& lt; Tiêu đề & GT; Recaptcha Demo: Trang đơn giản
& lt; / Tiêu đề & GT;
& lt; script src = "https://www.google.com/recaptcha/api.js" async trì hoãn & gt; & lt; / script & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; hình thức hành động = "?" Phương thức = "Đăng" & GT;
& lt; div class = "g-recaptcha" dữ liệu-sitekey = "your_site_key" & gt; & lt; / div & gt;
& lt; br / & gt;
& lt; nhập loại = "Gửi" giá trị = "Gửi" & gt;
& lt; / form & gt;
& lt; / body & gt;
& lt; / html & gt; 

06. Hiểu và kiểm tra

Google cung cấp một tệp API chứa logic CAPTCHA. Khi api.js được tải, mã chứa trong nó phân tích DOM và thay thế bất kỳ & lt; div & gt; Thẻ chứa thẻ lớp chính xác. & lt; nộp & gt; Thẻ bị bỏ lại một mình kể từ khi viết này. Dù bằng cách nào, hãy chạy mã trong trình duyệt được lựa chọn để xem kết quả được hiển thị ở trên.

07. Tải một số yếu tố

Tạo chuỗi giao hàng trong Express.js yêu cầu một chút thông minh. Một người trợ giúp thực sự hữu ích là Bodyparser. Khi được nhúng vào quy trình làm việc kết xuất, các trường riêng lẻ được trả về từ máy chủ có thể được truy cập bằng các mẫu thiết kế hướng đối tượng đơn giản hóa rất nhiều việc xử lý chúng.

 var express = yêu cầu ("express");
var bodyparser = yêu cầu ("trình phân tích cú pháp cơ thể");
var yêu cầu = yêu cầu (Yêu cầu yêu cầu);

var myapp = express ();

myapp.use (BodyParser.json ());
myapp.use (BodyParser.urlencoded ({mở rộng: TRUE}); 

08. Chuẩn bị để xác minh ...

Hộp kiểm của Google thực hiện phép thuật của nó trong nền - khi hoàn tất, một trường mới gọi là phản ứng g-recaptcha được thêm vào các thuộc tính biểu mẫu. Dữ liệu này phải được gửi đến các máy chủ của Google để xác minh. Chuỗi dài trong mã kèm theo bước này sẽ được thay thế bằng Google được gán cho bạn.

 myapp.post ("/ tamstest", chức năng (yêu cầu, phản hồi) {
var recaptcha_url = "https://www.google.com.vn/recaptcha/api/siteverify?";
recaptcha_url + = "Secret = 6lewmzguaaaairsb2gv5akkx2cwyfulkzrmd7ws & amp;";
reCAPTCHA_URL + = "Phản hồi =" + Yêu cầu .Body ["G-reCaptcha-Phản hồi"] + "& amp;";
reCAPTCHA_URL + = "RemoteIP =" + Request.connection.remoteaddress; 

09. ... và hỏi về máy chủ của Google

Đạo luật tiếp theo liên quan đến việc bắn URL đến máy chủ. Điều này được thực hiện thông qua một yêu cầu JSON truyền thống dựa trên địa chỉ được tạo ở bước trước. Kết quả của nó sau đó được phân tích - nếu bị lỗi, một lỗi sẽ được trả về ứng dụng phía máy khách.

 Yêu cầu (reCAPTCHA_URL, chức năng (lỗi,
resp, body) {
body = json.parse (cơ thể);
if (body.success! == không xác định & amp; & amp;! cơ thể.
sự thành công) {
Trả về phản hồi.Send ({"Tin nhắn":
"Xác thực CAPTCHA không thành công"});
Không thể
Trả lời. Người đứng đầu ("Loại nội dung",
"Ứng dụng / JSON"). Gửi (cơ thể);
});
}); 

10. Đặt nó lỏng

Máy chủ HTTP của Express.js cần phải được giải phóng. Điều này được thực hiện tốt nhất bằng cách sử dụng cấu trúc ứng dụng.Listen. Hãy nhớ rằng các cổng có một số nhỏ hơn 1024 được giới hạn cho người dùng gốc trên hệ điều hành Unixoid - do đó 3000 là đặt cược an toàn.

 var server = myapp.listen (3000, hàm () {
Console.log ("nghe" + máy chủ.
Địa chỉ (). Cảng);
}); 

11. Điều chỉnh mẫu

Cuối cùng, biểu mẫu của chúng tôi cần được liên lạc với máy chủ cục bộ đang chạy bên trong Node.js. Điều này được thực hiện tốt nhất bằng cách điều chỉnh chuỗi hành động - Đảm bảo trỏ đích đến một miền hợp lệ, đặc biệt nếu bạn không sử dụng máy chủ Express.js cục bộ.

 & lt; body & gt;
& lt; biểu mẫu hành động = "http: // localhost: 3000 / tamstest" Phương thức = "POST" & GT;
& lt; div class = "g-recaptcha" dữ liệu-sitekey = "6lewmzguaaaaaepswpvp6hlulnjxa_scwtwhyhge" & gt; & lt; / div & gt;
& lt; br / & gt; 

12. Đưa nó lên!

Kiểm tra hệ thống máy chủ máy khách của chúng tôi yêu cầu hai máy chủ do xác minh nguồn gốc của Google. May mắn thay, Python cung cấp một máy chủ HTTP nhanh - sử dụng nó để cung cấp index.htm, trong khi Express.js được nhập ngũ để thực hiện xác minh phản hồi được trả về.

 Tamnhan @ Tamhan-ThinkPad: ~ / Nodespace / Nodeverify $
node index.js.
Lắng nghe trên 3000.
TAMHAN @ TAMHAN-THEMENPAD: ~ / NODESPACE / NODEVERIFY $
python3 -m http.server.
Phục vụ HTTP trên cổng 0,0.0.0 8000 ... 

13. Thực hiện một lần chạy khô

Khi chạy, hãy kiểm tra hộp kiểm và đáp ứng bất kỳ thách thức nào Big G có thể ném vào bạn. Máy chủ thường không yêu cầu nhiều về xác minh và tiến hành hiển thị các nội dung được hiển thị ở trên.

14. Vô hiệu hóa nút gửi

Các ví dụ của Google bỏ qua nút Gửi phía máy khách như kẻ tấn công luôn có thể khiến nó xuất hiện lại với một số JavaScript. Trong khi vô hiệu hóa núm đệ trình liên quan đến CAPTCHA không cải thiện bảo mật, nhưng nó có tác động tích cực đến khả năng sử dụng. Hãy để chúng tôi bắt đầu bằng cách vô hiệu hóa nút sau khi khởi động.

& lt; biểu mẫu hành động = "http: // localhost: 3000 / tamstest" Phương thức = "POST" & GT;
& lt; div class = "g-recaptcha" dữ liệu-sitekey = "6lewmzguaaaaaepswpvp6hlulnjxa_scwtwhyhge" & gt; & lt; / div & gt;
& lt; br / & gt;
& lt; loại đầu vào = "gửi" giá trị = "Gửi" bị vô hiệu hóa & gt;
& lt; / form & gt; 

15. Xử lý các sự kiện CAPTCHA

Tiếp theo, một trình xử lý sự kiện phải được thêm vào. API CAPTCHA của Google sẽ gọi nó bất cứ khi nào người dùng đã thông qua một nỗ lực xác minh từ quan điểm phía máy khách của nó.

 & lt; html & gt;
& lt; Head & GT; . . .
& lt; script & gt;
Hàm ondcfired (giá trị) {
Console.log (giá trị);
Không thể
& lt; / script & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; hình thức hành động = "http: // localhost: 3000 /
tamstest "phương thức =" bài "& gt;
& lt; div class = "g-reCAPTCHA" Data-SiteKey = "6lewmzguaaaaAepswpvp6hlulnjxa_scwtwhyhge" Data-Callback =
"ondcfired" & gt; & lt; / div & gt; 

16. Chuyến tham quan: Kết xuất CAPTCHA động

Google không giới hạn các nhà phát triển để sinh sản các phần tử reCAPTCHA trong quá trình tải trang. Các render () Phương thức được tìm thấy trong API reCAPTCHA cho phép bạn chỉ định một hoặc nhiều & lt; div & gt; Tags trên trang web sẽ được chuyển đổi thành các tiện ích reCAPTCHA.

 var mycallback = hàm (Val) {bảng điều khiển.
Nhật ký (Val); };
grecaptcha.render (
Tài liệu.getelementsById ('My-id'),
Đồn là
gọi lại: mycallback,
SiteKey: MysitEkey.
}); 

17. Nút bật nếu cần ...

Với điều đó, một vấn đề chính vẫn còn. Nút gửi phải được bật lại khi sự kiện nhấp do reCAPTCHA cung cấp đến trong mã ứng dụng của chúng tôi. Đang tải jQuery vào một ví dụ đơn giản như vậy là không cần thiết, vì vậy thay vào đó hãy quay lại một số JavaScript đơn giản.

 & lt; script & gt;
Hàm ondcfired (giá trị) {
Tài liệu.GetEuityById.
("Nút"). Vô hiệu hóa = Sai;
Không thể
& lt; / script & gt; 

 & lt; Nhập loại = "Gửi" id = "nút"
giá trị = "Gửi" bị vô hiệu hóa & gt; 

18. ... và dọn dẹp sau chúng tôi

Google không thể lưu trữ dữ liệu phản hồi thử thách mãi mãi. Do đó, xác minh thời gian khá nhanh - theo mặc định, chương trình của chúng tôi không tìm hiểu về điều đó. May mắn thay, API chứa một trường bổ sung có thể được sử dụng để thông báo.

 Chức năng OnDcExpired (giá trị) {
tài liệu.getelementById ("nút").
bị vô hiệu hóa = TRUE;
} 

 & lt; div class = "g-recaptcha" dữ liệu-sitekey = "6lewmzguaaaaaepswpvp6hlulnjxa_scwtwhyhge"
Mã hóa dữ liệu = "ondcfired" Đã hết hạn dữ liệu = "ondcexpired" & gt; & lt; / div & gt; 

19. Sử dụng các thuộc tính bổ sung

Đầu tại đây Để tìm danh sách các thuộc tính có trong API JavaScript. Họ cho phép bạn điều chỉnh các hành vi khác nhau - ví dụ: tiện ích reCAPTCHA cũng có thể được hiển thị trong một bảng màu thân thiện với đêm!

20. Làm việc trong suốt ...

Google gần đây đã giới thiệu phiên bản thứ ba của API reCAPTCHA không yêu cầu tương tác người dùng rõ ràng. Thay vào đó, bạn chỉ cần tải nó trong quá trình khởi tạo trang - mã sẽ tự động theo dõi hành vi của người dùng chạy hoang dã trên trang web.

 & lt; srj src = "https://www.google.com/recaptcha/api.js?render=recaptcha_site_key" & gt; & lt; / script & gt;
& lt; script & gt;
grecaptcha. Đã (chức năng () {
grecaptcha.execute ('recaptcha_site_key',
{Hành động: 'Trang chủ'}).
sau đó (chức năng (mã thông báo) {
...
});
});
& lt; / script & gt; 

21. ... và cung cấp thêm thông tin

Lợi nhuận bổ sung từ dữ liệu khác về hành động đang được thực hiện trên trang web. Đoạn trích đi kèm với bước này sẽ thông báo rằng người dùng hiện sẽ truy cập trang chủ của bạn. Thông tin thêm về API có thể được tìm thấy trong tài liệu.

 & lt; script & gt;
grecaptcha. Đã (chức năng () {
grecaptcha.execute ('recaptcha_site_key',
{Hành động: 'Trang chủ'});
});
& lt; / script & gt; 

Tham gia với chúng tôi tại Rich Mix, Shoreditch vào ngày 26 tháng 9 để tạo CSS, một hội nghị bespoke cho các nhà thiết kế web mang đến cho bạn bởi Sáng tạo Bloq, Net và Web Designer. Đặt vé sớm của bạn trước ngày 15 tháng 8 tại www.generateconf.com. .

Bài viết này ban đầu được xuất bản trong số 287 của Tạp chí Thiết kế web sáng tạo Nhà thiết kế web . MUA VẤN ĐỀ 287 TẠI ĐÂY hoặc là Đăng ký nhà thiết kế web ở đây .

Những bài viết liên quan:

• 8 bí mật bảo mật WordPress thiết yếu
• Codepen tự làm thế nào
• 9 mẹo bảo mật để bảo vệ trang web của bạn khỏi tin tặc