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

 (rouninmedia.github.io)
4 คะแนน โดย GN⁺ 2024-05-14 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • เป็นวิธีใส่ข้อความอีเมลและลิงก์ mailto: ไว้ ภายใน SVG เพื่อซ่อนที่อยู่อีเมลสาธารณะจากการเก็บข้อมูลของสแปมบอต ขณะเดียวกันผู้เยี่ยมชมยังติดต่อได้ทันที
  • การป้องกันด้วย JavaScript อาจทำได้ซับซ้อนกว่า แต่มีข้อกังวลตรงที่ฟังก์ชันการติดต่อเองต้องมี dependency กับ JS
  • แนวทางนี้แทรก เอกสาร SVG ภายนอกเข้าใน HTML ด้วย และวางลิงก์จริงไว้ในองค์ประกอบ ภายใน SVG ไม่ใช่ใน HTML
  • SVG ให้ผลเหมือนซ่อนเนื้อหาไว้ในรูปภาพ แต่ยังใช้องค์ประกอบ `` ทำให้ผู้เยี่ยมชมสามารถ คัดลอก ที่อยู่อีเมลได้
  • ไม่ใช่วิธีที่ป้องกันสแปมบอตขั้นสูงได้ แต่มีประโยชน์ในการลดความเสี่ยงจากการถูกสคริปต์เก็บอีเมลแบบง่ายๆ พบเจอ

วิธีซ่อนที่อยู่อีเมลด้วย SVG

  • ที่อยู่อีเมลสาธารณะมักถูกเปิดเผยต่อสแปมบอตที่เก็บอีเมล จึงจำเป็นต้องมีมาตรการป้องกัน
  • เทคนิคป้องกันทั่วไปจะผสมผสาน HTML, CSS, JavaScript แต่หากใช้ JavaScript ฟังก์ชันการติดต่อจะถูกผูกกับสภาพแวดล้อมการรันที่จำเป็นของหน้าเว็บ
  • วิธี SVG จัดการทั้งการแสดงอีเมลและพฤติกรรมของลิงก์โดยไม่ใช้ JavaScript เลย
  • แม้ปิด JavaScript ผู้เยี่ยมชมก็ยังใช้ที่อยู่อีเมลที่แสดงบนหน้าได้ และสำหรับสแปมบอตจะถูกเปิดเผยแบบตรงๆ น้อยกว่าข้อความ HTML ทั่วไป
  • เช่นเดียวกับเทคนิคป้องกันบนฝั่งฟรอนต์เอนด์อื่นๆ วิธีนี้ไม่สามารถปกป้องที่อยู่อีเมลสาธารณะจากสแปมบอตที่พยายามจริงจังและมีความซับซ้อนได้อย่างสมบูรณ์
  • เดโมสด: SVG-based Email Protection

การใช้งานด้วย HTML และ SVG

  • เอกสาร HTML แทรกไฟล์ SVG ภายนอกด้วย ``
  • เอกสารกราฟิก SVG เดียวกันสามารถแทรกใน HTML ได้ครั้งเดียวหรือหลายครั้ง
  • ตัวอย่าง HTML กำหนดสไตล์ width: 180px, height: 24px, vertical-align: middle ให้คลาส .svg-email-protection และโหลดไฟล์ SVG ในเนื้อหาด้วย ``
  • ไฟล์ SVG เป็นเอกสาร `` ที่มี viewBox="0 0 200 24" และมีข้อความอีเมลกับลิงก์ mailto:myemail@mydomain.tld อยู่ภายใน
    • ภายใน มี และ ``
    • ใน `` แสดง myemail@mydomain.tld
    • ในสถานะ rect:hover และ a:focus สีพื้นหลัง สีข้อความ ความหนา เส้นใต้ และสไตล์เงาจะเปลี่ยนไป

การเข้าถึงและเอกสารอ้างอิง

  • เอกสาร SVG ทั้งหมดใช้ aria-labelledby ที่ชี้ไปยัง และ ภายใน SVG มี aria-label ที่ใส่ call to action เดียวกัน
  • เมื่อโฟกัสจากการกด Tab บนคีย์บอร์ดไปถึง anchor ภายใน SVG, และ จะถูกเน้นพร้อมกันเพื่อแสดง สถานะโฟกัส
  • เอกสารที่เกี่ยวข้อง:

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

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

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

  • อดคิดไม่ได้ว่าจริงเหรอ

    • จริงนะ ช่วงต้นยุค 2000 ถ้าเอาอีเมลขึ้นเว็บ สแปมเพิ่มขึ้นจริง ๆ และจำได้ว่าเทคนิคทำให้อีเมลอ่านยากก็ช่วยได้พอสมควร
      แต่สำหรับผมเอง ตั้งแต่ราวปี 2015 ก็ไม่ต่างกันเลย และสแปมที่ต้องกรองก็ไม่ได้เพิ่มขึ้นด้วย
      ตอนนี้บริษัทขายรายชื่อผู้ใช้ หรือซื้อรายชื่ออีเมลขนาดมหึมาที่หลุดมาจากเซิร์ฟเวอร์ที่ถูกเจาะได้ ดังนั้นการไล่กวาดเว็บเพื่อเก็บอีเมลจึงแทบเป็นวิธีส่งสแปมที่ประสิทธิภาพแย่ที่สุด
    • ปีที่แล้วทำเว็บไซต์ไว้สองแห่ง ใส่อีเมลไว้ใน footer แบบตรง ๆ ทั้งคู่ จนถึงตอนนี้ทั้งสองเว็บยังไม่ได้รับสแปมแม้แต่ฉบับเดียว
      ทั้งสองเว็บมีผู้เข้าชมหลายพันคน และเป็นเว็บยอดนิยมที่เสิร์ชเอนจินกับบอต AI มาเก็บข้อมูล
    • คิดเหมือนกันเป๊ะ ในทางกลับกัน อีเมลที่เคยใช้บน Usenet ราวปี 1999–2001 ตอนนี้ก็ยังมีสแปมไหลเข้ามาเรื่อย ๆ
      ส่วนอีเมลที่ลงไว้บนเว็บไซต์ แม้แต่จะไปอยู่ในโฟลเดอร์สแปมก็ยังไม่มี
      รายชื่อเมลบางชุดดูเหมือนจะเดาที่อยู่ Gmail แบบโจมตีด้วยพจนานุกรม โดยใช้รูปแบบ FIRSTNAME.LASTNAME หรือชุดตัวอักษรยาว 1–10 ตัว
      แต่สแปมที่ส่งมาที่ที่อยู่ domain@domain.com ยังน้อยมาก ประมาณปีละฉบับเดียว
      โดยรวมปริมาณสแปมอีเมลก็ลดลงมาก และสแปมที่ส่งกันตอนนี้ดูเหมือนจะปนกันระหว่างพวกมิจฉาชีพ 419 กับว่าที่มิจฉาชีพที่ถูกหลอกให้ซื้อรายชื่ออีเมลอายุ 20 ปี
    • การทำให้อีเมลอ่านยากให้ความรู้สึกเหมือนของตกยุค จริง ๆ แล้วในเชิงวิธีการมันก็ไม่เคยแข็งแรงอะไร แต่กลับแพร่หลาย และเหมือนยังอยู่รอดต่อมาแบบลัทธิบูชาสินค้า
    • ส่วนตัวแล้ว แม้จะไม่เห็นสแปมด้วยตา ผมก็ยังชอบให้พยายามไม่ให้อีเมลของผมถูกเก็บรวบรวมถ้าเป็นไปได้
      ไม่ได้จะบอกว่าเป็นปัญหาความเป็นส่วนตัวหรือความปลอดภัยร้ายแรงอะไร แต่เป็นเรื่องของความชอบ

  • โดเมนของผมเป็น .com ที่จดทะเบียนมา 24 ปีแล้ว และอีเมลก็แปะไว้ตรง ๆ ในแท็ก H3 ด้านบนสุดของหน้าแรก
    สแปมของที่อยู่นี้ไม่ใช่ปัญหา รวมโฟลเดอร์ junk แล้วประมาณวันละ 15 ฉบับ และเพราะ Purelymail ก็เลยยังโอเค
    ปัญหาจริง ๆ คือเมลธุรกรรมที่ไม่เกี่ยวกับธุรกรรม เมลโปรโมตแนว newsletter และโซเชียลเน็ตเวิร์กที่ส่งแจ้งเตือนมาเรื่อย ๆ ว่าไม่ได้ใช้งาน

    • สแปมวันละ 15 ฉบับดูค่อนข้างเยอะนะ ถ้าเป็นผมถึงจะน้อยกว่านั้นก็คงบล็อกที่อยู่นั้นไปแล้ว
    • “โซเชียลเน็ตเวิร์กที่บ่นว่าเราไม่ใช้งาน” นี่ใหญ่สุด Facebook ส่งเมลให้ล็อกอินแทบจะมากกว่าสแปมอื่น ๆ
      ผมไม่ได้ใช้บัญชีมาประมาณ 7 ปีแล้ว ตอนนี้น่าจะรู้ตัวได้แล้วนะ
    • มีโดเมนเก่าหลายโดเมนที่จดไว้ตั้งแต่ปลายยุค 90 และบางที่ยังเหลืออีเมลของผมแบบ mailto อยู่
      บางแห่งแทบไม่มีสแปม บางแห่งมาวันละหลายสิบฉบับ SpamAssassin ช่วยแคชสแปมได้ดีมาก

  • ตรงข้ามกับคำพูดที่ว่า “แม้ผู้เข้าชมจะปิด JavaScript อีเมลที่แสดงบนหน้าก็ยังใช้ได้อยู่” ค่าเริ่มต้นของ NoScript บน Firefox จะไม่ render แท็ก แต่แทนที่ด้วย placeholder ดังนั้นเทคนิคนี้ใช้ไม่ได้ในกรณีนี้
    https://imgur.com/2tCAgAf

    • uBlock Origin ก็สามารถบล็อก JavaScript ได้ มีปุ่มสะดวก ๆ อยู่ในเมนูส่วนขยาย
    • นั่นเป็นอีกเรื่องหนึ่ง เลยไม่ค่อยเข้าใจว่าทำไมถึงยกประเด็นนี้ขึ้นมา
    • บน Chromium ก็เหมือนกัน

  • ตัวเทคนิคเองไม่มีเหตุผลที่จะทำให้เข้าถึงไม่ได้ แต่ตัวอย่างในบทความแย่มากจริง ๆ
    บทความตั้ง label ของ svg และองค์ประกอบ a เป็น “Email us!” ซึ่งทำให้อีเมลจริงถูกซ่อนจากโปรแกรมอ่านหน้าจอ
    การใช้ aria label แบบนี้เป็นแนวปฏิบัติที่แย่มาก เว้นแต่จะมีเหตุผลพิเศษมาก ๆ ผู้ใช้โปรแกรมอ่านหน้าจอก็ควรได้รับประสบการณ์แบบเดียวกับคนอื่น และถ้าคิดว่าเหตุผลนั้นหนักแน่นพอ ส่วนใหญ่ก็มีโอกาสสูงที่จะคิดผิด
    วิธีที่ถูกต้องคือใส่อีเมลจริงไว้ใน label

    • ประเด็นหลักของงานนี้คือการไม่ใส่อีเมลไว้ในเอกสารในรูปแบบที่เครื่องอ่านได้ไม่ใช่เหรอ?
    • อาจกระทบกับซอฟต์แวร์แปลงเสียงเป็นข้อความอย่าง Dragon ด้วย
      ต่อให้ผู้ใช้พูดว่า “Click myemail@mydomain.tld” เบราว์เซอร์ก็เผยข้อความลิงก์เป็น “Email us” ดังนั้นลิงก์อาจไม่ถูกเปิดใช้งาน
      แต่ก็ไม่รู้ว่า Dragon เปิดใช้งานลิงก์ใน SVG ได้หรือเปล่า

  • ผมทำแบบนี้: reanospaml@maisjsl.com
    ถึงอย่างนั้นก็ยังได้รับ “สแปม” อยู่ แต่เป็นข้อเสนอ B2B ที่ตรงกับหัวข้อของเว็บไซต์มาก ๆ เลยดูเหมือนมีคนมาเก็บเองด้วยมือ

    • ถ้า scraper ใช้เบราว์เซอร์แบบ headless ก็น่าจะเลี่ยงวิธีนี้ได้
      แต่การรัน headless browser เพื่อเก็บอีเมลมีต้นทุนค่อนข้างสูง ดังนั้นสแปมนั้นอาจไม่ได้มาจากไซต์ก็ได้

  • อย่างที่หลายคนพูดไปแล้ว การ “ปกป้อง” อีเมลไม่เพียงไม่มีความหมาย แต่ยังเป็นโทษจริง ๆ ด้วย
    มีเว็บอยู่ไม่น้อยที่ส่วนใหญ่ของเนื้อหาอ่านได้ดีโดยไม่ต้องใช้ JavaScript แต่มีแค่สตริงอย่าง “1920x1080@60Hz” ที่ถูกแสดงตามตัวอักษรเป็น “[email protected]”

    • มีตัวอย่างที่ดูได้ทันทีไหม? ฟังดูเหลวไหลมาก แต่ไม่เคยเห็นเลย

  • สงสัยจริง ๆ ว่าเรื่องแบบนี้มีความหมายไหม เป็นการทดลองที่น่าสนุกก็จริง แต่ถ้าเป้าหมายคือหลบสแปมเมอร์ ก็เสียเวลาโดยสิ้นเชิง
    เหมือนเผยข้อมูลให้ทั้งโลกเห็น แต่ somehow คาดหวังว่าจะเข้าถึงได้เฉพาะ “คนดี” เท่านั้น
    ถ้าไม่เปลี่ยนอีเมลอย่างน้อยทุกเดือน แค่มีใครสักคนส่งต่อช่องทางติดต่อให้คนอื่น หรือใส่ลงฐานข้อมูล/CRM หรือบริการสักแห่งถูกเจาะ ที่อยู่นั้นก็จะขึ้นรายการ และสุดท้ายก็แพร่ไปถึงสแปมเมอร์ทั่วโลก
    ถ้าใช้อีเมลนั้นต่อเนื่อง โอกาสที่เรื่องนี้จะเกิดขึ้นแทบถือว่าใกล้ 100% ได้เลย
    ถ้าการซ่อนอีเมลจาก scraper ได้ผลจริง สแปมก็คงไม่มีอยู่แล้ว ผมไม่เคยเผยช่องทางติดต่อส่วนตัวไว้ที่ไหนเลย แต่ยังได้รับสแปมหลายสิบฉบับต่อสัปดาห์ ถึงอย่างนั้นทั้งหมดก็ถูกกรองเป็นสแปม จึงไม่ใช่เรื่องใหญ่

  • เพื่อนผมเป็นมือเทพจริง ๆ เขากำลังทำรูปภาพแบบ responsive ด้วย SVG ที่มี JavaScript อยู่ข้างใน
    มันปรับตัวตามขนาดด้วยโปรแกรม น่าสนใจมากทีเดียว
    การที่ใส่ JavaScript ใน SVG ได้เองยังรู้สึกว่าทั้งถูกใช้น้อยเกินไปและค่อนข้างอันตราย

    • โดยพื้นฐาน SVG ก็ responsive อยู่แล้วไม่ใช่เหรอ? ไม่ค่อยเข้าใจว่า JavaScript ใน SVG ช่วยอะไร
    • น่าสนใจสุด ๆ ถ้าเพื่อนคนนั้นมี GitHub หรือเว็บที่โชว์งานนี้ ช่วยแปะลิงก์ได้ไหม
      ผมเป็น backend engineer เลยค่อนข้างไกลจากสายผมในเชิงเทคนิค แต่มันดูเจ๋งมากจริง ๆ
    • เรื่องนี้ในชุมชนความปลอดภัยรู้กันมานานพอสมควรแล้ว

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

  • อีเมลยังอยู่ในเอกสาร XML ที่ถูกอ้างอิงจากซอร์สของหน้าเว็บในรูปแบบข้อความล้วน

    • แต่ถ้าลอง query แบบ document.querySelectorAll('a') ก็จะต่างออกไป เทคนิค scraping จำนวนมากใช้แนวทางแบบนี้ ดังนั้นถือว่าใช้เป็นด่านป้องกันชั้นแรกได้
      อย่างไรก็ดี ถ้ามี headless browser สำหรับ scraping แล้วบนหน้าก็ fetch URL ปัจจุบันโดยตรง จากนั้นรับข้อความล้วนมาใช้ regex หาอีเมล ก็จะได้ที่อยู่ ยอมรับว่าเป็นวิธีที่ค่อนข้างแปลก
      [0]: fetch('./').then((res) => res.text()).then((text) => console.log(text))
    • แนวคิดคือบอตสแปมจะไม่ parse ไปถึง SVG เพื่อหาอีเมล แต่ดูแค่ HTML ของหน้า
      แต่ในสภาพแวดล้อมการป้องกันสแปมสมัยใหม่ ก็ไม่ค่อยแน่ใจว่ามันได้ผลจริงแค่ไหน
    • ให้ความรู้สึกเหมือนห่อของไร้ประโยชน์ให้ดูฉลาด