วิธีแชร์อีเมลของคุณบนเว็บไซต์อย่างปลอดภัย

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

ในบทความนี้ ผมจะแสดงให้คุณเห็นถึงวิธีการปกป้องที่อยู่อีเมลของคุณอย่างง่ายดายจากสแปมบอทด้วยวิธีแก้ปัญหาที่หลากหลาย ขึ้นอยู่กับคุณว่าจะเลือกเทคนิคใดที่เหมาะกับความต้องการของคุณ

คดีดั้งเดิม

สมมติว่าคุณมีเว็บไซต์ คุณต้องการแบ่งปันรายละเอียดการติดต่อของคุณ และคุณไม่ต้องการแบ่งปันเฉพาะลิงก์ทางสังคมของคุณ ที่อยู่อีเมลต้องอยู่ที่นั่น ง่ายใช่มั้ย? คุณพิมพ์บางอย่างเช่นนี้:

<a href="mailto:[email protected]">Send me an Email

แล้วคุณก็จัดแต่งตามรสนิยมของคุณ

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

เรากำลังมองหาการประนีประนอม เราต้องการทำให้บอทรับที่อยู่อีเมลของเราได้ยาก แต่ให้ง่ายที่สุดสำหรับผู้ใช้ทั่วไป

การแก้ปัญหาคือการทำให้งงงวย

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

แนวทาง HTML

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

If you want to get in touch, please drop me an email at [email protected]address.com

ดูเหมือนยุ่ง แต่ผู้ใช้จะเห็นที่อยู่อีเมลดังนี้:

If you want to get in touch, please drop me an email at [email protected]

จุดเด่น:

• ตั้งค่าได้ง่าย
• ทำงานได้โดยปิดการใช้งาน JavaScript
• สามารถอ่านได้โดยเทคโนโลยีอำนวยความสะดวก

จุดด้อย:

• บอทสแปมสามารถข้ามลำดับที่รู้จักเช่นความคิดเห็น
• ใช้ไม่ได้กับ a mailto: ลิงค์

แนวทาง HTML & CSS

จะเกิดอะไรขึ้นถ้าเราใช้พลังการจัดสไตล์ของ CSS เพื่อลบเนื้อหาบางส่วนที่วางไว้เพื่อหลอกบอทสแปมเท่านั้น สมมุติว่าเรามีเนื้อหาเท่าเดิม แต่คราวนี้เราวาง a span องค์ประกอบภายใน:

If you want to get in touch, please drop me an email at PLEASE GO AWAY! [email protected]address.com
.

จากนั้น เราใช้กฎสไตล์ CSS ต่อไปนี้:

span.blockspam {
  display: none;
}

ผู้ใช้คนสุดท้ายจะเห็นสิ่งนี้เท่านั้น:

If you want to get in touch, please drop me an email at [email protected]

…ซึ่งเป็นเนื้อหาที่เราสนใจอย่างแท้จริง

จุดเด่น:

• ทำงานได้โดยปิดการใช้งาน JavaScript
• บอทรับอีเมลได้ยากขึ้น
• สามารถอ่านได้โดยเทคโนโลยีอำนวยความสะดวก

กับ:

• ใช้ไม่ได้กับ a mailto: ลิงค์

แนวทางจาวาสคริปต์

ในตัวอย่างนี้ เราใช้ JavaScript เพื่อทำให้ที่อยู่อีเมลของเราไม่สามารถอ่านได้ จากนั้น เมื่อโหลดหน้าแล้ว JavaScript จะทำให้ที่อยู่อีเมลสามารถอ่านได้อีกครั้ง ด้วยวิธีนี้ ผู้ใช้ของเราจะได้รับที่อยู่อีเมล

โซลูชันที่ง่ายที่สุดใช้อัลกอริทึมการเข้ารหัส Base64 เพื่อถอดรหัสที่อยู่อีเมล อันดับแรก เราต้องเข้ารหัสที่อยู่อีเมลใน Base64 เราสามารถใช้บางเว็บไซต์เช่น Base64Encode.org เพื่อทำสิ่งนี้. พิมพ์ที่อยู่อีเมลของคุณดังนี้:

จากนั้นคลิกปุ่มเพื่อเข้ารหัส ด้วย JavaScript สองสามบรรทัดเหล่านี้ เราถอดรหัสที่อยู่อีเมลและตั้งค่า href แอตทริบิวต์ในลิงก์ HTML:

var encEmail = "ZW1haWxAYWRkcmVzcy5jb20=";
const form = document.getElementById("contact");
form.setAttribute("href", "mailto:".concat(atob(encEmail)));

จากนั้นเราต้องตรวจสอบให้แน่ใจว่าลิงก์อีเมลนั้นรวมถึง id="contact" ในมาร์กอัปดังนี้:

Send me an Email

เรากำลังใช้ไฟล์ atob วิธีการถอดรหัสสตริงของข้อมูลที่เข้ารหัส Base64 อีกทางเลือกหนึ่งคือการใช้อัลกอริธึมการเข้ารหัสพื้นฐานบางอย่างเช่น ตัวเลขซีซาร์ซึ่งค่อนข้างตรงไปตรงมาในการใช้งานใน JavaScript

จุดเด่น:

• บอทรับที่อยู่อีเมลนั้นซับซ้อนกว่า โดยเฉพาะอย่างยิ่งถ้าคุณใช้อัลกอริธึมการเข้ารหัส
• ใช้งานได้กับไฟล์ mailto: ลิงค์
• สามารถอ่านได้โดยเทคโนโลยีอำนวยความสะดวก

กับ:

• ต้องเปิดใช้งาน JavaScript บนเบราว์เซอร์ มิฉะนั้น ลิงก์จะว่างเปล่า

แนวทางแบบฟอร์มฝังตัว

แบบฟอร์มการติดต่อมีอยู่ทุกที่ คุณได้ใช้อย่างน้อยหนึ่งครั้งอย่างแน่นอน หากคุณต้องการให้ผู้คนติดต่อคุณได้โดยตรง หนึ่งในวิธีแก้ไขที่เป็นไปได้คือการใช้บริการแบบฟอร์มการติดต่อบนเว็บไซต์ของคุณ

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

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

   Your email:
    
  
   Your message:
    
  
  
  
  Send

ในบรรทัดแรก คุณควรปรับแต่ง action ขึ้นอยู่กับปลายทางของคุณ แบบฟอร์มนี้ค่อนข้างพื้นฐาน แต่คุณสามารถเพิ่มฟิลด์ได้มากเท่าที่คุณต้องการ

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

จุดเด่น:

• ที่อยู่อีเมลของคุณปลอดภัยเนื่องจากไม่เป็นสาธารณะ
• ใช้งานได้เมื่อปิดการใช้งาน Javascript

กับ:

• อาศัยบริการของบุคคลที่สาม (ซึ่งอาจเป็นมือโปร ขึ้นอยู่กับความต้องการของคุณ)

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

สรุป

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