SVGによるメールアドレス保護方式、JavaScriptの代わりに使用

 (rouninmedia.github.io)
4 ポイント 投稿者 GN⁺ 2024-05-14 | 1件のコメント | WhatsAppで共有

  • SVGを利用したメールアドレス保護手法

    • 実際のデモは SVG-based Email Protection のリンクを参照
    • Webページで公開されたメールアドレスは、通常メール収集ボットからの保護が必要
    • 従来は HTML、CSS、JS の組み合わせを使った手法が用いられてきたが、それぞれに長所と短所がある
    • JS を使う方式は HTML/CSS ベースの代替案よりも高度だが、JS がそのページの必須要素になってしまう欠点がある
    • JS はページを改善できるが、理想的には JS が無効でもページのすべての必須機能が動作するのが望ましい
    • このページで紹介する手法は、CSS、JS、CSS+JS などの既存のメール保護手法とはまったく異なる、SVG ベースのアプローチを使う

  • SVGベースのメールアドレス保護手法の3つの利点

    1. JavaScriptが無効でも動作
      • SVG ベースのアプローチの主な利点は、JS がまったく不要なこと
      • 訪問者が JS を無効にしていても、ページに表示されたメールアドレスは利用可能でアクセス可能であり、保護されつつ安全にスパムボットから隠される
    2. 標準の mailto: リンクが使える
      • 他の JS 不要な方式（HTML コメントの挿入、要素の非表示など）とは異なり、SVG ベース方式では標準の mailto: リンクを使える
      • ただし、mailto: リンクは参照先の HTML 文書内ではなく、外部 SVG 文書内に存在する
    3. 画像のように内容を隠しつつ、テキストのようにコピー可能
      • 埋め込み SVG は画像に似ているが、画像そのものではない
      • ハイパーテキスト文書に埋め込まれた置換要素として、SVG は画像と同じくらい効果的にメールアドレスをスパムボットから隠せる
      • しかし SVG は厳密には実際の画像ではなく、グラフィック文書である
      • そのため画像とは異なり、埋め込み SVG の `` 要素を右クリックしてメールアドレスをコピーできる

  • コード実装

    • 例は 2 つのファイルで構成される
    • SVG グラフィック文書は HTML ハイパーテキスト文書に `` タグを使って埋め込まれる
    • 同じ SVG グラフィック文書をハイパーテキストに 1 回または複数回埋め込める
    • HTML ファイルと SVG ファイルのコード例を含む

  • アクセシビリティ上の考慮事項

    • この設定を可能な限りアクセシブルな状態に保つことが重要
    • そのため、SVG グラフィック文書では次の点に注意する:
      • SVG 文書全体は、SVG 文書の `` によって aria-labelledby が設定され、アクションの呼びかけを示す
      • SVG 内部のアンカー要素 `` には、同じアクションの呼びかけを行う aria-label がある
      • SVG は、アンカー要素 にタブフォーカスがあるとき、子要素の と `` の両方が強調表示されるようにスタイル設定されている

GN⁺の意見

  • HTML 文書に SVG を埋め込んで、JS 依存なしにスパムボットからメールアドレスを隠すユニークなアプローチ。アクセシビリティと使いやすさの両方を考慮した興味深い手法に見える。
  • ただし、どれほど高度なフロントエンド技術を使っても、最も高度なスパムボットを完全に防ぐことはできない点には注意が必要。これはあらゆるセキュリティソリューションに共通する限界だ。
  • この手法を実務導入するには、SEO への影響、さまざまなブラウザやデバイスとの互換性、パフォーマンスなど追加の検証が必要になりそうだ。
  • メール保護のバックエンドソリューションとしては、reCAPTCHA や Honeypot 手法などもあわせて検討する価値がある。
  • CSS と SVG の高度な機能を活用する興味深い方式だが、実務で適用するにはまだ制約がありそうだ。それでもフロントエンド開発者なら一度は試してみる価値のある面白いアイデアだ。

関連記事

1件のコメント

 
GN⁺ 2024-05-14
Hacker Newsの意見

要約すると、Webページで公開されたメールアドレスをスパムボットから保護する必要があるかについての意見は次のとおり。

  • 長年ウェブサイトにメールアドレスを公開しているが、スパムフィルタがよく機能しており、スパムの問題はそれほど大きくない
  • Gmailでもローカル企業がホスティングするウェブメールでも、スパムフィルタリングはうまく機能している
  • 1日に15通ほどのスパムメールは届くが、Purelymail のおかげで大きな問題にはなっていない
  • 実際の問題は、無関係なトランザクションメール、ニュースレターのジャンクスパム、使っていないソーシャルネットワークの通知などである
  • 最近はスパムフィルタが優秀なので、メールアドレスを公開してもスパムの増加は大きくない
  • 受信トレイに届くスパムが1日1通未満であれば、許容できるレベルである
  • メールプロバイダやスパムフィルタ次第ではあるが、個人的には問題になっていない
  • FirefoxのNoScriptでは <object> タグがレンダリングされないため、この技術は機能しない
  • 「メール保護」は無意味なだけでなく、むしろ有害ですらある
  • JSなしでも問題なく読めるサイトで、1920x1080@60Hz が [email protected] と表示される問題がある