การปกป้องที่อยู่อีเมลผ่าน SVG ใช้แทน JavaScript

 (rouninmedia.github.io)
4 คะแนน โดย GN⁺ 2024-05-14 | 1 ความคิดเห็น | แชร์ทาง WhatsApp

  • เทคนิคปกป้องที่อยู่อีเมลโดยใช้ SVG

    • ดูเดโมจริงได้ที่ลิงก์ SVG-based Email Protection
    • ที่อยู่อีเมลที่เปิดเผยบนหน้าเว็บมักจำเป็นต้องได้รับการปกป้องจากบอตเก็บรวบรวมอีเมล
    • เดิมทีมีการใช้เทคนิคที่อาศัยการผสมผสานของ HTML, CSS และ JS ซึ่งแต่ละแบบก็มีข้อดีข้อเสียต่างกันไป
    • วิธีที่ใช้ JS มีความซับซ้อนกว่าทางเลือกที่อิง HTML/CSS แต่ก็มีข้อเสียคือทำให้ JS กลายเป็นองค์ประกอบจำเป็นของหน้านั้น
    • JS อาจช่วยเสริมหน้าเว็บได้ แต่โดยอุดมคติแล้ว ฟังก์ชันสำคัญทั้งหมดของหน้าควรทำงานได้แม้ปิด JS ไว้
    • เทคนิคที่แนะนำในหน้านี้ใช้แนวทางแบบ SVG ซึ่งแตกต่างจากวิธีปกป้องอีเมลแบบเดิมอย่าง CSS, JS หรือ CSS+JS โดยสิ้นเชิง

  • ข้อดี 3 ประการของเทคนิคปกป้องที่อยู่อีเมลด้วย SVG

    1. ทำงานได้แม้ปิด JavaScript
      • ข้อดีหลักของแนวทางแบบ SVG คือไม่ต้องพึ่งพา JS เลย
      • แม้ผู้เข้าชมจะปิด JS ที่อยู่อีเมลที่แสดงบนหน้าก็ยังใช้งานได้ เข้าถึงได้ และยังคงได้รับการปกป้องอย่างปลอดภัยพร้อมซ่อนจากสแปมบอต
    2. ใช้ลิงก์ mailto: แบบมาตรฐานได้
      • แตกต่างจากวิธีอื่นที่ไม่ต้องใช้ JS เช่น การแทรกคอมเมนต์ HTML หรือการซ่อนองค์ประกอบ แนวทางแบบ SVG สามารถใช้ลิงก์ mailto: มาตรฐานได้
      • อย่างไรก็ตาม ลิงก์ mailto: จะอยู่ภายในเอกสาร SVG ภายนอก ไม่ได้อยู่ในเอกสาร HTML ที่อ้างถึง
    3. ซ่อนเนื้อหาได้เหมือนภาพ แต่คัดลอกได้เหมือนข้อความ
      • SVG ที่ฝังไว้มีลักษณะคล้ายภาพ แต่ไม่ใช่ภาพจริง
      • ในฐานะองค์ประกอบทดแทนที่ฝังอยู่ในเอกสารไฮเปอร์เท็กซ์ SVG สามารถซ่อนที่อยู่อีเมลจากสแปมบอตได้มีประสิทธิภาพพอ ๆ กับภาพ
      • แต่พูดอย่างเคร่งครัดแล้ว SVG ไม่ใช่ภาพจริง หากเป็นเอกสารกราฟิก
      • ดังนั้น ต่างจากภาพ ผู้ใช้สามารถคลิกขวาที่องค์ประกอบ `` ของ SVG ที่ฝังไว้เพื่อคัดลอกที่อยู่อีเมลได้

  • การเขียนโค้ด

    • ตัวอย่างประกอบด้วย 2 ไฟล์
    • เอกสารกราฟิก SVG ถูกฝังในเอกสารไฮเปอร์เท็กซ์ HTML ด้วยแท็ก ``
    • เอกสารกราฟิก SVG เดียวกันสามารถฝังในไฮเปอร์เท็กซ์ได้หนึ่งครั้งหรือหลายครั้ง
    • มีตัวอย่างโค้ดของไฟล์ HTML และไฟล์ SVG รวมอยู่ด้วย

  • ข้อพิจารณาด้านการเข้าถึง

    • สิ่งสำคัญคือต้องรักษาการตั้งค่านี้ให้เข้าถึงได้มากที่สุดเท่าที่เป็นไปได้
    • เพื่อให้เป็นเช่นนั้น ในเอกสารกราฟิก SVG ต้องใส่ใจกับประเด็นต่อไปนี้:
      • เอกสาร SVG ทั้งหมดถูก aria-labelledby โดย `` ของเอกสาร SVG เพื่อสื่อถึงข้อความเรียกให้ดำเนินการ
      • องค์ประกอบแองเคอร์ `` ภายใน SVG มี aria-label ที่สื่อข้อความเรียกให้ดำเนินการแบบเดียวกัน
      • SVG ถูกกำหนดสไตล์ให้เมื่อองค์ประกอบแองเคอร์ ได้รับแท็บโฟกัส องค์ประกอบลูกอย่าง และ `` จะถูกเน้นทั้งคู่

ความเห็นของ GN⁺

  • นี่เป็นแนวทางที่มีเอกลักษณ์ในการซ่อนที่อยู่อีเมลจากสแปมบอตด้วยการฝัง SVG ในเอกสาร HTML โดยไม่ต้องพึ่งพา JS ดูเป็นเทคนิคที่น่าสนใจซึ่งคำนึงถึงทั้งการเข้าถึงและการใช้งาน
  • อย่างไรก็ตาม ควรตระหนักว่าไม่ว่าเทคนิคฝั่งฟรอนต์เอนด์จะซับซ้อนเพียงใด ก็ไม่อาจป้องกันสแปมบอตที่ซับซ้อนที่สุดได้อย่างสมบูรณ์ ข้อนี้เป็นข้อจำกัดที่ใช้ได้กับโซลูชันด้านความปลอดภัยทุกประเภท
  • หากจะนำเทคนิคนี้ไปใช้จริงในการทำงาน น่าจะต้องมีการตรวจสอบเพิ่มเติมในด้านผลกระทบต่อ SEO ความเข้ากันได้กับเบราว์เซอร์/อุปกรณ์ต่าง ๆ และประสิทธิภาพ
  • สำหรับโซลูชันฝั่งแบ็กเอนด์เพื่อปกป้องอีเมล ก็อาจพิจารณา reCAPTCHA หรือเทคนิค Honeypot ควบคู่กันไปได้เช่นกัน
  • แม้จะเป็นวิธีที่น่าสนใจซึ่งใช้ความสามารถขั้นสูงของ CSS และ SVG แต่ก็ดูเหมือนว่ายังมีข้อจำกัดหากจะนำไปใช้จริงในงานโปรดักชัน อย่างไรก็ดี สำหรับนักพัฒนาฟรอนต์เอนด์ นี่เป็นไอเดียสนุก ๆ ที่ควรลองทดสอบสักครั้ง

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

1 ความคิดเห็น

 
GN⁺ 2024-05-14
ความคิดเห็นจาก Hacker News

สรุปแล้ว ความคิดเห็นเกี่ยวกับความจำเป็นในการปกป้องที่อยู่อีเมลที่เผยแพร่บนหน้าเว็บจากบอตสแปมมีดังนี้:

  • เปิดเผยที่อยู่อีเมลบนเว็บไซต์มานานแล้ว แต่ตัวกรองสแปมทำงานได้ดี จึงแทบไม่มีปัญหาสแปมมากนัก
  • ทั้ง Gmail และเว็บเมลที่โฮสต์โดยบริษัทท้องถิ่นต่างก็กรองสแปมได้ดี
  • มีอีเมลสแปมเข้ามาประมาณวันละ 15 ฉบับ แต่ด้วย Purelymail จึงไม่ได้เป็นปัญหาใหญ่
  • ปัญหาที่แท้จริงกลับเป็นอีเมลธุรกรรมที่ไม่เกี่ยวข้อง จดหมายข่าวขยะ และการแจ้งเตือนจากโซเชียลเน็ตเวิร์กที่ไม่ได้ใช้งาน
  • ทุกวันนี้ตัวกรองสแปมทำงานได้ดีมาก ดังนั้นแม้จะเปิดเผยที่อยู่อีเมลก็ไม่ได้ทำให้สแปมเพิ่มขึ้นมากนัก
  • มีอีเมลสแปมเข้ามาในกล่องจดหมายหลักน้อยกว่าวันละ 1 ฉบับถือว่าอยู่ในระดับที่ยอมรับได้
  • อาจแตกต่างกันไปตามผู้ให้บริการอีเมลและตัวกรองสแปม แต่โดยส่วนตัวแล้วไม่ถือว่าเป็นปัญหา
  • ใน Firefox ที่ใช้ NoScript แท็ก <object> จะไม่ถูกเรนเดอร์ ทำให้เทคนิคนี้ใช้ไม่ได้
  • “การปกป้องอีเมล” ไม่เพียงไร้ความหมาย แต่ยังอาจก่อผลเสียอีกด้วย
  • บนเว็บไซต์ที่อ่านได้ดีแม้ไม่มี JS มีปัญหาที่ 1920x1080@60Hz ถูกแสดงเป็น [email protected]