หยุดบอทด้วย Google recaptcha

Sep 12, 2025
วิธีการ
Stop the bots with Google reCAPTCHA
(เครดิตรูปภาพ: ในอนาคต)

การทำให้บอทออกมาเป็นเกมตัวเลขเสมอ - น่าเศร้าที่ความพร้อมใช้งานของห้องสมุดการเรียนรู้ของเครื่องที่ใช้งานง่ายทำให้การแตกประเภท CAPTCHA แบบคลาสสิคที่เรียบง่าย Google ตั้งอยู่ในระดับแนวหน้าของพายุบอทบอท - หลังจากทั้งหมดมีบางสิ่งบางอย่างที่มีอยู่หากพบได้ (เด่นชัด) ในดัชนีของ G Big G

ด้วยเหตุนี้วิศวกรของ Google จึงอุทิศความพยายามอย่างมากในการออกแบบระบบป้องกันบอทและการแก้ปัญหา พวกเขามีให้สำหรับบุคคลที่สามผ่านผลิตภัณฑ์ที่เรียกว่า reCAPTCHA ซึ่งเราจะเข้าร่วมกันในขั้นตอนต่อไปนี้ สำหรับเครื่องมือเพิ่มเติมที่ไม่เกี่ยวข้องกับบอทดูของเรา เครื่องมือออกแบบเว็บ โพสต์.

อย่างไรก็ตามก่อนเริ่มต้นอย่างไรก็ตามสิ่งพื้นฐานบางอย่างจะต้องถูกล้างออก ก่อนอื่น: การป้องกันบอทเป็นเกมฝั่งเซิร์ฟเวอร์เสมอ การตรวจสอบค่าส่งคืนของการวัดการต่อต้านบอตของคุณบนไคลเอ็นต์นั้นงี่เง่า ผู้โจมตีสามารถวิเคราะห์ซอร์สโค้ดหรือทำงานรอบ ๆ ได้โดยการแก้ไขการตรวจสอบผลตอบแทน

ประการที่สองโปรดทราบว่าบอททั้งหมดไม่ได้ถูกสร้างขึ้นเท่ากัน ตัวอย่างเช่นการล็อค Googlebot นำไปสู่เว็บไซต์ของคุณไม่ได้รับการจัดทำดัชนีอีกต่อไป ปัญหาที่คล้ายกันสามารถเกิดขึ้นได้กับบอทเฉพาะอุตสาหกรรมอื่น ๆ ซึ่งมักจะดีกว่าอันตรายมากขึ้น ในที่สุดบอทอาจเป็นความชั่วร้ายที่น้อยลงในบางกรณี - เมื่อปริมาณการใช้งานเป็นสิ่งที่คุณต้องการการคลิกบอทกลายเป็นเพียงคลิกเดียว

  • 8 Google Apis ที่น่าทึ่ง (และวิธีการใช้งาน)

01. ลงชื่อเข้าใช้ Go-Go!

Stop the bots with Google reCAPTCHA: Sign-up a go-go!

ใช้บัญชี Google ของคุณเพื่อลงชื่อเข้าใช้ recaptcha (เครดิตรูปภาพ: Tam Hanna)

Google คอยจับตาดูผู้ใช้ reCAPTCHA หัวที่นี่ และใช้บัญชี Google ของคุณเพื่อลงชื่อเข้าใช้เพิ่ม "localhost" นอกเหนือจากโดเมนที่คุณชื่นชอบภายใต้โดเมน เลือกประเภท "ฉันไม่ใช่หุ่นยนต์หุ่นยนต์" เนื่องจากเป็นมาตรการต่อต้านบอตที่รู้จักกันดีที่สุด

02. ร้านค้าไซต์และคีย์เซิร์ฟเวอร์

Google Rewards คงอยู่ในการทำงานผ่านกระบวนการตั้งค่าโดยการแสดงเซิร์ฟเวอร์และคีย์ไซต์ ในขณะที่หลังสามารถแชร์กับบุคคลที่สามมั่นใจได้ว่าคีย์ลับจะไม่ทิ้งขอบเขตของสภาพแวดล้อมเซิร์ฟเวอร์ของคุณ

03. ทำความเข้าใจกับการตรวจสอบเว็บไซต์

Google ใช้การเปลี่ยนแปลงของกระบวนการตอบสนองความท้าทายเพื่อให้แน่ใจว่าผลลัพธ์ที่สมบูรณ์ อินสแตนซ์ CAPTCHA ส่งคืนค่าการเข้ารหัสที่เซิร์ฟเวอร์คือ "เปิด" เป็นระบบการตรวจสอบที่โฮสต์โดย Big G - หากผลลัพธ์กลายเป็นที่ถูกต้องการตอบสนอง HTTP ที่ถูกต้องจะถูกส่งกลับไปยังตรรกะด้านหลังของคุณ

04. ตั้งค่า Express.js

สิ่งสำคัญคือต้องแสดงให้เห็นถึงโซลูชันเทิร์นคีย์ที่แสดงการไหลของการรับรองความถูกต้องทั้งหมด เนื่องจากสิ่งนี้เราต้องเริ่มต้นด้วย "เซิร์ฟเวอร์" ของการเรียงลำดับ - Express JS เป็นหัวข้อที่พบบ่อยเมื่อเร็ว ๆ นี้ดังนั้นการปรับใช้กับโครงกระดูกโครงการที่สร้างขึ้นใหม่ 

 Tamhan @ tamhan-thinkpad: ~ / nodespace / node depify $
npm init --y
เขียนถึง /home/tamhan/nodespace/nodeverify/package.json:
  . . .
Tamhan @ tamhan-thinkpad: ~ / nodespace / node deverify $
NPM ติดตั้งคำขอด่วน Body-Parser - ประหยัด
. . .
+ [email protected]
+ [email protected]
+ [email protected]

05. เตรียมที่จะให้บริการ

การโหลดช่องทำเครื่องหมาย "ฉันไม่ใช่หุ่นยนต์" ที่รู้จักกันดีต้องใช้ไฟล์ HTML ระบุว่านี่เป็นตัวอย่างที่แสดงให้เห็นถึงการไหลของปฏิสัมพันธ์เริ่มต้นด้วยเอกสารแบบคงที่ที่มีเครื่องหมายแสดงขึ้นมาพร้อมกับขั้นตอนนี้ 

 & lt; html & gt;
& lt; หัว & gt;
& lt; ชื่อ & gt; recaptcha demo: หน้าง่าย
& lt; / ชื่อ & gt;
& lt; สคริปต์ SRC = "https://www.google.com/recaptcha/api.js" async defer & gt; & lt; / script & gt;
& lt; / head & gt;
& lt; ร่างกาย & gt;
& lt; ฟอร์มการกระทำ = "?" วิธี = "โพสต์" & gt;
& lt; div class = "g-recaptcha" data-sitekey = "your_site_key" & gt; & lt; / div & gt;
& lt; br / & gt;
& lt; input type = "ส่ง" value = "ส่ง" & gt;
& lt; / แบบฟอร์ม & gt;
& lt; / body & gt;
& lt; / html & gt;

06. เข้าใจและทดสอบ

Stop the bots with Google reCAPTCHA: Understand and test

เรียกใช้รหัสเพื่อดูผลลัพธ์เหล่านี้ (เครดิตรูปภาพ: Tam Hanna)

Google มีไฟล์ API ที่มีตรรกะ CAPTCHA เมื่อโหลด api.js รหัสที่มีอยู่ในการวิเคราะห์ DOM และแทนที่ใด ๆ & lt; div & gt; แท็กที่มีแท็กคลาสที่ถูกต้อง & lt; submit & gt; แท็กถูกทิ้งให้อยู่ตามลำพังเช่นเดียวกับการเขียนนี้ ทั้งสองวิธีให้เรียกใช้รหัสในเบราว์เซอร์ที่มีให้เลือกเพื่อดูผลลัพธ์ที่แสดงด้านบน

07. โหลดองค์ประกอบบางอย่าง

การสร้างห่วงโซ่การจัดส่งใน Express.js ต้องใช้สติปัญญาเล็กน้อย หนึ่งผู้ช่วยที่มีประโยชน์จริงๆคือ Bodyparser เมื่อฝังอยู่ในเวิร์กโฟลว์การเรนเดอร์แต่ละฟิลด์ที่ส่งคืนจากเซิร์ฟเวอร์สามารถเข้าถึงได้โดยใช้รูปแบบการออกแบบเชิงวัตถุซึ่งทำให้การจัดการง่ายขึ้นอย่างมาก 

 Var Express = ต้องการ ("ด่วน");
Var Bodyparser = ต้องการ ("ตัวแยกวิเคราะห์");
Var Request = ต้องการ ("คำขอ");

var myapp = express ();

myapp.use (bodyparser.json ());
myapp.use (bodyparser.urlencoded ({Extended: True});

08. เตรียมที่จะตรวจสอบ ...

ช่องทำเครื่องหมายของ Google ทำเวทย์มนตร์ในพื้นหลัง - เมื่อเสร็จสิ้นฟิลด์ใหม่ที่เรียกว่า G-recaptcha ตอบสนอง ถูกเพิ่มไปยังแอตทริบิวต์แบบฟอร์ม ข้อมูลนี้จะต้องส่งไปยังเซิร์ฟเวอร์ของ Google เพื่อตรวจสอบ สตริงที่ยาวในโค้ดที่มาพร้อมกับขั้นตอนนี้จะถูกแทนที่ด้วย Google ที่ได้รับมอบหมายให้คุณ 

 myapp.post ("/ tamstest", ฟังก์ชั่น (คำขอ, การตอบกลับ) {
var recaptcha_url = "https://www.google.com/recaptcha/api/site?";
recaptcha_url + = "Secret = 6lewmzguaaaaairsbairsb2gv5akkx2cwyfulkzrmd7ws & amp;";
reCAPTCHA_URL + = "การตอบสนอง =" + คำขอ DEQUY.BODY ["G-recaptcha-Response"] + "& amp;";
recaptcha_url + = "remallip =" + + request.connection.remoteaddress;

09. ... และสอบถามที่เซิร์ฟเวอร์ของ Google

การกระทำต่อไปนั้นเกี่ยวข้องกับการยิง URL ไปยังเซิร์ฟเวอร์ สิ่งนี้สามารถทำได้ผ่านการร้องขอ JSON แบบดั้งเดิมตามที่อยู่ที่สร้างขึ้นในขั้นตอนก่อนหน้า จากนั้นผลลัพธ์จะถูกวิเคราะห์ - หากมีข้อผิดพลาดเกิดขึ้นความล้มเหลวจะถูกส่งกลับไปยังแอปพลิเคชันฝั่งไคลเอ็นต์ 

 คำขอ (recaptcha_url, ฟังก์ชั่น (ข้อผิดพลาด,
resp, body) {
ร่างกาย = json.parse (ร่างกาย);
ถ้า (body.success! == undefined & amp; & amp; ร่างกาย.
ความสำเร็จ) {
ส่งคืน Response.Send ({"ข้อความ":
"การตรวจสอบ CAPTCHA ล้มเหลว"});
}
Response.header ("ประเภทเนื้อหา",
"แอปพลิเคชัน / JSON") ส่ง (ร่างกาย);
});
});

10. ตั้งให้หลวม

เซิร์ฟเวอร์ HTTP ของ Express.js จำเป็นต้องปลดปล่อย นี่คือความสำเร็จที่ดีที่สุดโดยใช้โครงสร้าง app.listen โปรดทราบว่าพอร์ตที่มีจำนวนที่เล็กกว่า 1024 ถูก จำกัด ให้ผู้ใช้รูทบนระบบปฏิบัติการ Unixoid - 3000 ดังนั้นจึงเป็นการเดิมพันที่ปลอดภัย 

 เซิร์ฟเวอร์ var = myapp.listen (3000, ฟังก์ชั่น () {
console.log ("ฟังบน" + เซิร์ฟเวอร์
ที่อยู่ (). พอร์ต);
});

11. ปรับแบบฟอร์ม

ในที่สุดแบบฟอร์มของเราจะต้องได้รับการติดต่อกับเซิร์ฟเวอร์ภายในที่ทำงานภายในของ node.js. นี่คือความสำเร็จที่ดีที่สุดโดยการปรับสตริงการดำเนินการ - อย่าลืมชี้เป้าหมายไปยังโดเมนที่ถูกต้องโดยเฉพาะหากคุณไม่ได้ใช้เซิร์ฟเวอร์ Express.js ในเครื่อง 

 & lt; ร่างกาย & gt;
& lt; การกระทำแบบฟอร์ม = "http: // localhost: 3000 / tamstest" วิธี = "โพสต์" & gt;
& lt; div class = "g-recaptcha" data-sitekey = "6lewmzguaaaaaaepswpvp6hlulnjxa_scwtwhyhge" & gt; & lt; / div & gt;
& lt; br / & gt;

12. นำมันขึ้นมา!

Stop the bots with Google reCAPTCHA: Bring it up!

ใช้เซิร์ฟเวอร์ HTTP Quick ของ Python เพื่อทดสอบระบบไคลเอนต์เซิร์ฟเวอร์ (เครดิตรูปภาพ: Tam Hanna)

การทดสอบระบบไคลเอนต์เซิร์ฟเวอร์ของเราต้องใช้เซิร์ฟเวอร์สองเครื่องเนื่องจากการตรวจสอบต้นทางของ Google โชคดีที่ Python ให้บริการเซิร์ฟเวอร์ HTTP ที่รวดเร็ว - ใช้เพื่อให้ index.htm ในขณะที่ Express.js ได้รับการเกณฑ์ที่จะทำการตรวจสอบการตอบกลับที่ส่งคืน 

 Tamhan @ tamhan-thinkpad: ~ / nodespace / node depify $
โหนด index.js
ฟัง 3000
Tamhan @ tamhan-thinkpad: ~ / nodespace / node deverify $
Python3 -m http.server
ให้บริการ http on 0.0.0.0 พอร์ต 8000 ...

13. ดำเนินการแห้ง

Stop the bots with Google reCAPTCHA: Perform a dry run

ให้การทดสอบ CAPTCHA ของคุณ (เครดิตรูปภาพ: Tam Hanna)

เมื่อเรียกใช้ให้ตรวจสอบช่องทำเครื่องหมายและเติมเต็มความท้าทายใด ๆ ที่ยิ่งใหญ่ของ G อาจโยนคุณ เซิร์ฟเวอร์มักจะไม่ต้องการมากในแง่ของการตรวจสอบและดำเนินการเพื่อแสดงเนื้อหาที่แสดงด้านบน

14. ปิดการใช้งานปุ่มส่ง

Stop the bots with Google reCAPTCHA: Disable the submit button

การปิดใช้งานปุ่มส่งเมื่อเริ่มต้นเป็นสิ่งที่ดีสำหรับการใช้งาน (เครดิตรูปภาพ: Tam Hanna)

ตัวอย่างของ Google ไม่สนใจปุ่มส่งฝั่งไคลเอ็นต์เนื่องจากผู้โจมตีสามารถทำให้มันปรากฏขึ้นอีกครั้งด้วยจาวาสคริปต์บางอย่าง ในขณะที่ปิดใช้งานลูกบิดส่งที่เกี่ยวข้องกับ CAPTCHA ไม่ได้ปรับปรุงความปลอดภัย แต่ก็มีผลในเชิงบวกต่อการใช้งาน ให้เราเริ่มต้นด้วยการปิดการใช้งานปุ่มหลังจากเริ่มต้นขึ้น 

& lt; การกระทำแบบฟอร์ม = "http: // localhost: 3000 / tamstest" วิธี = "โพสต์" & gt;
& lt; div class = "g-recaptcha" data-sitekey = "6lewmzguaaaaaaepswpvp6hlulnjxa_scwtwhyhge" & gt; & lt; / div & gt;
& lt; br / & gt;
& lt; input type = "ส่ง" value = "ส่ง" ปิดใช้งาน & gt;
& lt; / form & gt;

15. จัดการกิจกรรม CAPTCHA

Stop the bots with Google reCAPTCHA: Handle CAPTCHA events

ตอนนี้เพิ่มตัวจัดการเหตุการณ์ (เครดิตรูปภาพ: Tam Hanna)

ถัดไปต้องเพิ่มตัวจัดการเหตุการณ์ CAPTCHA API ของ Google จะเรียกใช้เมื่อใดก็ตามที่ผู้ใช้ส่งความพยายามในการตรวจสอบจากมุมมองฝั่งไคลเอ็นต์ 

 & lt; html & gt;
& lt; หัว & gt; . . .
& lt; สคริปต์ & gt;
ฟังก์ชั่น ondcfired (ค่า) {
console.log (ค่า);
}
& lt; / สคริปต์ & gt;
& lt; / head & gt;
& lt; ร่างกาย & gt;
& lt; การกระทำแบบฟอร์ม = "http: // localhost: 3000 /
Tamstest "วิธี =" โพสต์ "& GT;
& lt; div class = "g-recaptcha" data-sitekey = "6lewmzguaaaaaapswpvp6hlulnjxa_scwtwhyhge" data-callback =
"ondcfired" & gt; & lt; / div & gt;

16. การทัศนศึกษา: การแสดงผล CAPTCHA แบบไดนามิก

Google ไม่ จำกัด นักพัฒนาเพื่อวางไข่องค์ประกอบ recaptcha ในระหว่างการโหลดหน้า ที่ แสดงผล () วิธีการที่พบใน Recaptcha API ช่วยให้คุณกำหนดหนึ่งรายการขึ้นไป & lt; div & gt; แท็กบนเว็บไซต์ที่จะเปลี่ยนเป็นวิดเจ็ต reCAPTCHA 

 var mycallback = function (val) {คอนโซล
บันทึก (val); };
grecaptcha.render (
document.getElementsbyid ('my-id'),
{
โทรกลับ: mycallback,
Sitekey: Mysitekey
});

17. เปิดใช้งานปุ่มหากจำเป็น ...

ด้วยที่มีปัญหาหลักหนึ่งยังคงอยู่ ปุ่มส่งจะต้องเปิดใช้งานอีกครั้งเมื่อเหตุการณ์การคลิกที่จัดทำโดย reCAPTCHA มาถึงในรหัสแอปพลิเคชันของเรา การโหลด JQuery เป็นตัวอย่างง่ายๆนั้นไม่จำเป็นดังนั้นตกลงไปที่ JavaScript ธรรมดาแทน 

 & lt; สคริปต์ & gt;
ฟังก์ชั่น ondcfired (ค่า) {
เอกสาร.getElementbyID
("ปุ่ม") ปิดใช้งาน = false;
}
& lt; / สคริปต์ & gt; 
 & lt; input type = "ส่ง" id = "ปุ่ม"
value = "ส่ง" ปิดใช้งาน & gt;

18. ... และทำความสะอาดหลังเรา

Google ไม่สามารถจัดเก็บข้อมูลการตอบสนองความท้าทายตลอดไป เนื่องจากการตรวจสอบหมดเวลาค่อนข้างเร็ว - โดยค่าเริ่มต้นโปรแกรมของเราจะไม่พบข้อมูลเกี่ยวกับเรื่องนั้น โชคดีที่ API มีฟิลด์เพิ่มเติมซึ่งสามารถใช้เพื่อแจ้งเตือน 

 ฟังก์ชั่น ondcexpired (ค่า) {
document.getElementbyid ("ปุ่ม")
ปิดใช้งาน = true;
} 
 & lt; div class = "g-recaptcha" data-sitekey = "6lewmzguaaaaaaepswpvp6hlulnjxa_scwtwhyhge"
data-callback = "ondcfired" data-expired-callback = "ondcexpired" & gt; & lt; / div & gt;

19. ใช้แอตทริบิวต์เพิ่มเติม

Stop the bots with Google reCAPTCHA: Handle CAPTCHA events

มีคุณสมบัติที่มีประโยชน์มากมายในการเล่นด้วย (เครดิตรูปภาพ: Tam Hanna)

หัวที่นี่ ในการค้นหารายการคุณสมบัติที่รวมอยู่ใน JavaScript API พวกเขาให้คุณปรับพฤติกรรมต่าง ๆ - ตัวอย่างเช่นวิดเจ็ต reCAPTCHA สามารถแสดงผลได้ในรูปแบบสีที่เป็นมิตรกับชีวิต!

20. ทำงานได้อย่างโปร่งใส ...

Google เพิ่งเปิดตัวรุ่นที่สามของ Recaptcha API ซึ่งไม่ต้องการการโต้ตอบกับผู้ใช้ที่ชัดเจน แต่คุณเพียงแค่โหลดในระหว่างการเริ่มต้นหน้า - รหัสจะตรวจสอบพฤติกรรมของผู้ใช้โดยอัตโนมัติในเว็บไซต์ 

 & lt; สคริปต์ SRC = "https://www.google.com/recaptcha/api.js?render=recaptcha_site_key" & gt; & lt; / script & gt;
& lt; สคริปต์ & gt;
gracaptcha.ready (ฟังก์ชั่น () {
gracaptcha.execute ('recaptcha_site_key'
{การกระทำ: 'โฮมเพจ'})
จากนั้น (ฟังก์ชั่น (โทเค็น) {
...
});
});
& lt; / สคริปต์ & gt;

21. ... และให้ข้อมูลเพิ่มเติม

กำไรปลั๊กอินจากข้อมูลเพิ่มเติมเกี่ยวกับการดำเนินการที่กำลังดำเนินการบนเว็บไซต์ ตัวอย่างที่มาพร้อมกับขั้นตอนนี้จะประกาศว่าผู้ใช้กำลังเยี่ยมชมโฮมเพจของคุณ ข้อมูลเพิ่มเติมเกี่ยวกับ API สามารถพบได้ในเอกสารประกอบ 

 & lt; สคริปต์ & gt;
gracaptcha.ready (ฟังก์ชั่น () {
gracaptcha.execute ('recaptcha_site_key'
{การกระทำ: 'โฮมเพจ'});
});
& lt; / สคริปต์ & gt;

Generate CSS – the conference for web designers: 26 September, Rich Mix, Shoreditch, London

(เครดิตรูปภาพ: ในอนาคต)

เข้าร่วมกับเราที่ Rich Mix, Shoreditch ในวันที่ 26 กันยายนสำหรับการสร้าง CSS การประชุม Bespoke สำหรับนักออกแบบเว็บไซต์มาถึงคุณโดย Creative Bloq, Net และ Web Designer จองตั๋วนกต้นก่อน 15 สิงหาคมที่ www.generateconf.com .

บทความนี้ได้รับการตีพิมพ์ครั้งแรกในฉบับที่ 287 ของนิตยสารออกแบบเว็บสร้างสรรค์ นักออกแบบเว็บไซต์ . ซื้อปัญหา 287 ที่นี่ หรือ สมัครสมาชิกกับนักออกแบบเว็บไซต์ที่นี่ .

บทความที่เกี่ยวข้อง:

  • 8 ความลับการรักษาความปลอดภัย WordPress ที่สำคัญ
  • codepen ทำให้ตัวเองปลอดภัยอย่างไร
  • 9 เคล็ดลับความปลอดภัยเพื่อปกป้องเว็บไซต์ของคุณจากแฮกเกอร์

วิธีการ - บทความยอดนิยม

วิธีการวาดช้าง

วิธีการ Sep 12, 2025

ในฐานะที่เป็นสัตว์เลี้ยงลูกด้วยนมที่มีชีวิตที่ใหญ่ท�..

วิธีการทาสีคลื่นที่สมจริงใน Photoshop

วิธีการ Sep 12, 2025

เมื่อวาดฉากมหาสมุทรใน Photoshop CC เช่นเดียวกับโครงการทาสีส่วนใหญ่ขอ..

วาดตัวเลขภายในห้านาที

วิธีการ Sep 12, 2025

การวาดภาพท่าทางห้านาทีเป็นเรื่องสนุกมากเพราะมีเวลาเพียงพอที่จะจ�..

เคล็ดลับการออกแบบแนวคิดสำหรับศิลปิน

วิธีการ Sep 12, 2025

หน้า 1 จาก 2: หน้า 1 หน้า 1 หน้า 2 ..

ทาสีเกม Sci-Fi ใน Photoshop

วิธีการ Sep 12, 2025

ฉันมักจะคิดว่าความคิดริเริ่มนั้นพบที่ไหนสัก..

วิธีการออกแบบประสบการณ์ Chatbot

วิธีการ Sep 12, 2025

ไม่ว่าเราจะยอมรับหรือไม่หรือไม่แพลตฟอร์มการ..

สร้างเกมฟิสิกส์ WebGL ของคุณเอง

วิธีการ Sep 12, 2025

โครงการนี้จะถูกแบ่งออกเป็นส่วนต่าง ๆ เราจะให�..

สร้าง UI ที่ใช้การ์ดกับมูลนิธิ

วิธีการ Sep 12, 2025

ตามบัตร เค้าโครงเว็บไซต์ ได้ยึดครองเว็บ ..

หมวดหมู่