Bảo vệ địa chỉ email bằng SVG, dùng thay cho JavaScript

 (rouninmedia.github.io)
4 điểm bởi GN⁺ 2024-05-14 | 1 bình luận | Chia sẻ qua WhatsApp

  • Kỹ thuật bảo vệ địa chỉ email bằng SVG

    • Xem demo thực tế tại liên kết SVG-based Email Protection
    • Địa chỉ email được công khai trên trang web thường cần được bảo vệ khỏi các bot thu thập email
    • Trước đây, nhiều kỹ thuật kết hợp HTML, CSS và JS đã được sử dụng, nhưng mỗi cách đều có ưu và nhược điểm riêng
    • Cách dùng JS tinh vi hơn các phương án thay thế dựa trên HTML/CSS, nhưng nhược điểm là JS trở thành thành phần bắt buộc của trang đó
    • JS có thể cải thiện trang, nhưng lý tưởng nhất là mọi chức năng thiết yếu của trang vẫn hoạt động ngay cả khi JS bị tắt
    • Kỹ thuật được giới thiệu trong bài này sử dụng cách tiếp cận dựa trên SVG hoàn toàn khác với các kỹ thuật bảo vệ email hiện có như CSS, JS hoặc CSS+JS

  • 3 ưu điểm của kỹ thuật bảo vệ địa chỉ email dựa trên SVG

    1. Vẫn hoạt động khi JavaScript bị tắt
      • Ưu điểm chính của cách tiếp cận dựa trên SVG là hoàn toàn không cần JS
      • Ngay cả khi người truy cập tắt JS, địa chỉ email hiển thị trên trang vẫn có thể sử dụng, vẫn truy cập được, vẫn được bảo vệ an toàn và ẩn khỏi bot spam
    2. Có thể dùng liên kết mailto: chuẩn
      • Không giống các cách khác không cần JS (chèn chú thích HTML, ẩn phần tử, v.v.), cách dựa trên SVG vẫn cho phép dùng liên kết mailto: chuẩn
      • Tuy nhiên, liên kết mailto: không nằm trong tài liệu HTML tham chiếu mà nằm trong tài liệu SVG bên ngoài
    3. Ẩn nội dung như hình ảnh nhưng vẫn có thể sao chép như văn bản
      • SVG nhúng có nét tương tự hình ảnh, nhưng không phải là hình ảnh
      • Với vai trò là phần tử thay thế được nhúng trong tài liệu hypertext, SVG có thể che giấu địa chỉ email khỏi bot spam hiệu quả gần như hình ảnh
      • Nhưng nói chính xác thì SVG không phải là ảnh thực sự mà là một tài liệu đồ họa
      • Vì vậy, khác với hình ảnh, có thể nhấp chuột phải vào phần tử `` trong SVG nhúng để sao chép địa chỉ email

  • Triển khai mã

    • Ví dụ gồm 2 tệp
    • Tài liệu đồ họa SVG được nhúng vào tài liệu hypertext HTML bằng thẻ ``
    • Có thể nhúng cùng một tài liệu đồ họa SVG vào hypertext một hoặc nhiều lần
    • Có kèm ví dụ mã cho tệp HTML và tệp SVG

  • Các lưu ý về khả năng truy cập

    • Điều quan trọng là cấu hình này phải được duy trì ở trạng thái dễ tiếp cận nhất có thể
    • Để làm điều đó, trong tài liệu đồ họa SVG cần chú ý các điểm sau:
      • Toàn bộ tài liệu SVG được aria-labelledby bởi `` của tài liệu SVG để biểu thị lời kêu gọi hành động
      • Phần tử neo `` bên trong SVG có aria-label thực hiện cùng lời kêu gọi hành động
      • SVG được tạo kiểu để khi phần tử neo nhận focus bằng phím Tab, cả phần tử con và `` đều được làm nổi bật

Ý kiến của GN⁺

  • Đây là một cách tiếp cận độc đáo: nhúng SVG vào tài liệu HTML để ẩn địa chỉ email khỏi bot spam mà không phụ thuộc vào JS. Có vẻ là một kỹ thuật thú vị khi đồng thời cân nhắc cả khả năng truy cập lẫn tính tiện dụng.
  • Tuy nhiên, cần lưu ý rằng dù dùng kỹ thuật frontend tinh vi đến đâu cũng không thể chặn hoàn toàn những bot spam tinh vi nhất. Đây là giới hạn áp dụng cho mọi giải pháp bảo mật.
  • Để áp dụng kỹ thuật này trong thực tế, có lẽ vẫn cần thêm các bước kiểm chứng về tác động tới SEO, khả năng tương thích trên nhiều trình duyệt/thiết bị, hiệu năng, v.v.
  • Các giải pháp backend để bảo vệ email như reCAPTCHA, kỹ thuật Honeypot, v.v. cũng đáng được cân nhắc kết hợp.
  • Đây là một cách thú vị tận dụng các tính năng nâng cao của CSS và SVG, nhưng có vẻ vẫn còn một số ràng buộc để áp dụng trong môi trường thực tế. Dù vậy, với các lập trình viên frontend, đây là một ý tưởng thú vị đáng thử nghiệm ít nhất một lần.

Bài viết liên quan

1 bình luận

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

Tóm lại, các ý kiến về việc có cần bảo vệ địa chỉ email được công khai trên trang web khỏi bot gửi thư rác hay không như sau:

  • Đã công khai địa chỉ email trên website trong thời gian dài, nhưng bộ lọc thư rác hoạt động tốt nên vấn đề spam không lớn
  • Cả Gmail và webmail được lưu trữ bởi công ty địa phương đều lọc thư rác tốt
  • Mỗi ngày nhận khoảng 15 email spam, nhưng nhờ Purelymail nên không thành vấn đề lớn
  • Vấn đề thực sự lại là các email giao dịch không liên quan, thư rác kiểu bản tin, và thông báo từ các mạng xã hội không còn dùng đến
  • Dạo này bộ lọc thư rác hoạt động tốt nên việc công khai địa chỉ email không làm tăng spam đáng kể
  • Việc có dưới 1 email spam mỗi ngày lọt vào hộp thư đến là mức chấp nhận được
  • Có thể khác nhau tùy nhà cung cấp email và bộ lọc thư rác, nhưng cá nhân tôi thấy không thành vấn đề
  • Với NoScript của Firefox, thẻ <object> không được render nên kỹ thuật này không hoạt động
  • "Bảo vệ email" không chỉ vô nghĩa mà còn có thể gây hại
  • Trên các trang có thể đọc tốt ngay cả khi không có JS, vẫn có vấn đề 1920x1080@60Hz bị hiển thị thành [email protected]