Bảo vệ địa chỉ email bằng SVG thay vì JavaScript

 (rouninmedia.github.io)
4 điểm bởi GN⁺ 2024-05-14 | 1 bình luận | Chia sẻ qua WhatsApp
  • Để vừa ẩn địa chỉ email công khai khỏi bot thu thập spam mà vẫn cho phép khách truy cập liên hệ ngay, phương pháp này đặt văn bản email và liên kết mailto: bên trong SVG
  • Cách bảo vệ dựa trên JavaScript có thể tinh vi hơn, nhưng việc chức năng liên hệ tự thân mang phụ thuộc vào JS là một điểm bất tiện
  • Cách tiếp cận này nhúng tài liệu SVG bên ngoài vào HTML bằng thẻ object, và đặt liên kết thực sự trong phần tử a bên trong SVG chứ không phải trong HTML
  • SVG vừa có tác dụng che giấu nội dung như một hình ảnh, vừa cho phép khách truy cập sao chép địa chỉ email nhờ dùng phần tử text
  • Đây không phải giải pháp ngăn chặn được cả những bot spam tinh vi, nhưng hữu ích để giảm rủi ro bị lộ cho các script thu thập email đơn giản

Cách ẩn địa chỉ email bằng SVG

  • Địa chỉ email công khai rất dễ bị bot spam thu thập email phát hiện, nên cần có biện pháp bảo vệ
  • Các kỹ thuật bảo vệ phổ biến thường kết hợp HTML, CSS và JavaScript, nhưng khi dùng JavaScript thì chức năng liên hệ sẽ bị ràng buộc với môi trường thực thi bắt buộc của trang
  • Cách dùng SVG xử lý cả việc hiển thị email lẫn hoạt động của liên kết mà không cần dùng JavaScript
  • Ngay cả khi JavaScript bị tắt, khách truy cập vẫn có thể dùng địa chỉ email hiển thị trên trang, đồng thời bot spam cũng khó tiếp cận trực tiếp hơn so với văn bản HTML thông thường
  • Giống như các kỹ thuật bảo vệ dựa trên frontend khác, cách này không thể bảo vệ hoàn toàn địa chỉ email công khai trước những bot spam dai dẳng và tinh vi
  • Demo trực tiếp: SVG-based Email Protection

Triển khai HTML và SVG

  • Tài liệu HTML nhúng tệp SVG bên ngoài bằng thẻ object
  • Cùng một tài liệu đồ họa SVG có thể được nhúng một hoặc nhiều lần trong HTML
  • Ví dụ HTML đặt các kiểu width: 180px, height: 24px, vertical-align: middle cho lớp .svg-email-protection, rồi tải tệp SVG bằng thẻ object trong nội dung chính
  • Tệp SVG là một tài liệu svg có viewBox="0 0 200 24", bên trong chứa văn bản email và liên kết mailto:myemail@mydomain.tld
    • Bên trong a có rect và text
    • text hiển thị myemail@mydomain.tld
    • Ở trạng thái rect:hover và a:focus, kiểu màu nền, màu chữ, độ đậm, gạch chân và đổ bóng sẽ thay đổi

Khả năng truy cập và tài liệu tham khảo

  • Toàn bộ tài liệu SVG dùng aria-labelledby trỏ tới title, còn a bên trong SVG có aria-label chứa cùng lời kêu gọi hành động
  • Khi tiêu điểm tab bằng bàn phím đến liên kết neo bên trong SVG, cả rect và text sẽ được làm nổi bật để thể hiện trạng thái focus
  • Tài liệu liên quan:

Bài viết liên quan

1 bình luận

 
GN⁺ 2024-05-14
Ý kiến trên Hacker News

  • Tôi không chắc có thật vậy không

    • Đúng vậy. Tôi nhớ là vào đầu những năm 2000, nếu đưa email lên web thì spam thực sự tăng, và các kỹ thuật làm rối email cũng khá hữu ích
      Nhưng cá nhân tôi thấy từ khoảng năm 2015 thì hoàn toàn không còn khác biệt, thậm chí lượng spam cần lọc cũng không tăng
      Giờ đây các công ty có thể bán danh sách người dùng, hoặc người ta có thể mua những danh sách email khổng lồ rò rỉ từ máy chủ bị hack, nên việc quét web để thu thập email gần như là cách gửi spam kém hiệu quả nhất
    • Tôi đã để nguyên địa chỉ email ở footer của hai website tạo năm ngoái, và cả hai đến giờ chưa nhận một email spam nào
      Cả hai site đều có vài nghìn lượt truy cập và là các site phổ biến được công cụ tìm kiếm lẫn bot AI thu thập dữ liệu
    • Tôi cũng nghĩ y hệt. Ngược lại, địa chỉ email tôi dùng trên Usenet khoảng năm 1999–2001 đến giờ vẫn đều đều bị spam đổ về
      Địa chỉ email đưa lên website thì thậm chí còn không có thư nào vào hộp spam
      Có vẻ một số danh sách thư được tạo bằng cách đoán địa chỉ Gmail theo kiểu FIRSTNAME.LASTNAME hoặc các tổ hợp 1–10 ký tự như tấn công từ điển
      Dù vậy spam gửi tới địa chỉ domain@domain.com cũng rất ít, khoảng một thư mỗi năm
      Nhìn chung lượng spam email cũng giảm mạnh, và spam hiện nay có vẻ là hỗn hợp giữa bọn lừa đảo 419 và những kẻ định lừa đảo nhưng bị lừa mua danh sách email 20 năm tuổi
    • Việc làm rối địa chỉ email cảm giác như di vật của quá khứ. Về phương pháp luận thì nó chưa từng thật sự vững chắc, nhưng vẫn lan rộng và tiếp tục tồn tại như một kiểu sùng bái hàng hóa
    • Cá nhân tôi, dù không thấy spam xuất hiện, nếu có thể thì vẫn thích email của mình không bị thu thập hơn
      Tôi không nói đó là vấn đề quyền riêng tư hay bảo mật nghiêm trọng, chỉ là vấn đề sở thích

  • Tên miền của tôi là một .com đã đăng ký 24 năm, và địa chỉ email được đặt nguyên văn trong thẻ H3 ngay đầu trang chủ
    Spam gửi tới địa chỉ này không phải vấn đề. Tính cả thư mục rác thì khoảng 15 thư mỗi ngày, và nhờ Purelymail nên vẫn ổn
    Vấn đề thật sự là email giao dịch không liên quan đến giao dịch, email quảng bá kiểu newsletter, và các mạng xã hội cứ gửi thông báo vì tôi không dùng chúng

    • 15 thư spam mỗi ngày nghe có vẻ khá nhiều. Nếu là tôi thì chắc đã chặn địa chỉ trước khi tới mức đó
    • “Các mạng xã hội than phiền vì tôi không dùng” là thứ lớn nhất. Email Facebook gửi để bảo tôi đăng nhập gần như nhiều hơn mọi spam khác
      Tôi đã không dùng tài khoản khoảng 7 năm rồi, lẽ ra giờ họ phải nhận ra rồi chứ
    • Tôi có vài tên miền cũ đăng ký từ cuối thập niên 90, một số nơi vẫn còn email của tôi dưới dạng mailto
      Có chỗ gần như không có spam, có chỗ nhận hàng chục thư mỗi ngày. SpamAssassin làm rất tốt việc bắt spam

  • Trái với câu “ngay cả khi khách truy cập tắt JavaScript, địa chỉ email hiển thị trên trang vẫn dùng được”, thiết lập mặc định của NoScript trên Firefox không render thẻ mà thay bằng placeholder, nên kỹ thuật này không hoạt động ở đó
    https://imgur.com/2tCAgAf

    • uBlock Origin cũng có thể chặn JavaScript. Trong menu tiện ích có nút rất tiện
    • Đó là chuyện khác, nên tôi không rõ vì sao lại đem điểm này ra
    • Trên Chromium cũng y như vậy

  • Bản thân kỹ thuật này không có lý do gì phải thiếu khả năng truy cập, nhưng ví dụ trong bài thì thật sự tệ
    Bài viết đặt nhãn của svg và phần tử a là “Email us!”, như vậy địa chỉ email thật bị ẩn khỏi trình đọc màn hình
    Dùng aria label kiểu này là một thực hành rất tệ. Trừ khi có lý do cực kỳ đặc biệt, người dùng trình đọc màn hình cũng nên có trải nghiệm giống người khác, và nếu bạn nghĩ lý do đó đủ chính đáng thì thường là bạn có thể đang sai
    Cách đúng là đưa địa chỉ email thật vào nhãn

    • Chẳng phải điểm cốt lõi của việc này là không đưa địa chỉ email vào tài liệu ở định dạng máy đọc được sao?
    • Nó cũng có thể ảnh hưởng tới phần mềm đọc chính tả bằng giọng nói như Dragon
      Nếu người dùng nói “Click myemail@mydomain.tld”, trình duyệt lại expose văn bản liên kết là “Email us”, nên liên kết có thể không được kích hoạt
      Tuy nhiên tôi không rõ Dragon có kích hoạt được liên kết bên trong SVG hay không

  • Tôi làm thế này: reanospaml@maisjsl.com
    Vẫn nhận “spam”, nhưng là các đề xuất B2B khớp chính xác với chủ đề website, nên có vẻ do người thu thập thủ công

    • Nếu scraper dùng trình duyệt headless thì có lẽ có thể vượt qua cách này
      Tuy nhiên chạy trình duyệt headless để thu thập email tương đối tốn kém, nên số spam đó có thể không đến từ site

  • Như nhiều người đã nói, việc “bảo vệ” email không chỉ vô nghĩa mà còn thực sự có hại
    Khi không có JavaScript, phần lớn nội dung vẫn đọc được, nhưng có khá nhiều site hiển thị các chuỗi như “1920x1080@60Hz” đúng nghĩa thành “[email protected]”

    • Có ví dụ nào xem được ngay không? Nghe quá vô lý mà tôi chưa từng thấy

  • Tôi tự hỏi mấy thứ này có thật sự có ý nghĩa không. Là một thử nghiệm thì thú vị, nhưng nếu mục đích là tránh spammer thì hoàn toàn phí thời gian
    Chẳng khác nào công khai thông tin cho toàn thế giới rồi somehow kỳ vọng chỉ “người tốt” mới truy cập được
    Trừ khi bạn đổi địa chỉ email ít nhất mỗi tháng, chỉ cần ai đó chuyển thông tin liên hệ của bạn cho người khác hoặc đưa vào cơ sở dữ liệu/CRM, hoặc một dịch vụ nào đó bị xâm nhập, địa chỉ đó sẽ lọt vào danh sách và cuối cùng lan tới spammer trên toàn thế giới
    Nếu bạn dùng email đó lâu dài, có thể coi xác suất chuyện này xảy ra trên thực tế gần như 100%
    Nếu việc giấu email khỏi scraper thật sự hiệu quả thì spam đã không tồn tại. Tôi chưa từng công khai liên hệ cá nhân ở đâu nhưng vẫn nhận hàng chục thư spam mỗi tuần, dù tất cả đều bị lọc thành spam nên không phải chuyện lớn

  • Bạn tôi thật sự là cao thủ, đang dùng SVG có JavaScript để tạo thứ về cơ bản là ảnh responsive
    Nó thích ứng bằng lập trình theo kích thước, khá thú vị
    Bản thân việc có thể nhúng JavaScript vào SVG vừa còn ít được khai thác, vừa khiến tôi thấy hơi nguy hiểm

    • SVG vốn không responsive sẵn rồi sao? Tôi không rõ JavaScript trong SVG giúp được gì
    • Cực kỳ thú vị. Nếu bạn đó có GitHub hoặc website trình bày công việc này thì có thể đăng link không
      Tôi là kỹ sư backend nên về mặt kỹ thuật nó khá xa lĩnh vực của tôi, nhưng trông thật sự rất hay
    • Trong cộng đồng bảo mật thì chuyện này đã được biết đến từ khá lâu rồi

  • Tôi đã bỏ các cách như vậy. Ngày nay bộ lọc spam đủ tốt, nên công khai địa chỉ email mà không làm rối cũng không có vẻ làm spam tăng lên
    Các nguồn spam khác, như những công ty tệ hại có email của tôi vì lý do hợp pháp rồi bán cho bên thứ ba, là chuyện riêng
    Thông thường spam lọt vào inbox của tôi dưới 1 thư mỗi ngày, mức đó chấp nhận được
    Tất nhiên tùy nhà cung cấp email và bộ lọc spam nên mỗi người có thể khác, nhưng với tôi thì không phải vấn đề

  • Email vẫn nằm dưới dạng văn bản thuần trong tài liệu XML được tham chiếu từ mã nguồn trang

    • Dù vậy nếu truy vấn bằng cách như document.querySelectorAll('a') thì khác. Nhiều kỹ thuật scraping dùng cách tiếp cận như vậy, nên làm tuyến phòng thủ đầu tiên cũng ổn
      Tuy nhiên nếu có trình duyệt headless để scraping, rồi trên trang fetch nguyên URL hiện tại, nhận văn bản thuần và dùng regex tìm email, thì vẫn lấy được địa chỉ. Phải thừa nhận đây là cách khá kỳ quặc
      [0]: fetch('./').then((res) => res.text()).then((text) => console.log(text))
    • Ý tưởng là bot spam sẽ không parse tới SVG để tìm địa chỉ email, mà chỉ xem HTML của trang
      Nhưng trong môi trường chống spam hiện đại, tôi không rõ điều này thực sự hiệu quả đến mức nào
    • Cảm giác như đang đóng gói thứ vô dụng thành một thứ có vẻ thông minh