SVGによるメールアドレス保護方式、JavaScriptの代わりに使用
(rouninmedia.github.io)- 公開メールアドレスをスパムボットの収集から隠しつつ、訪問者がすぐに連絡できるよう、SVG内にメールアドレスのテキストと
mailto:リンクを入れる方式 - JavaScriptベースの保護はより高度にできるが、連絡機能自体がJS依存になる点が負担になる
- このアプローチは外部のSVG文書をHTMLの
で挿入し、実際のリンクはHTMLではなくSVG内の要素に置く - SVGは画像のように内容を隠す効果がありつつ、``要素を使うため、訪問者はメールアドレスをコピーできる
- 高度なスパムボットまで防ぐ解決策ではないが、単純なメール収集スクリプトにさらされるリスクを減らすのに有用
SVGでメールアドレスを隠す方式
- 公開メールアドレスはメール収集スパムボットにさらされやすいため、保護策が必要
- 一般的な保護手法はHTML、CSS、JavaScriptを組み合わせるが、JavaScriptを使うと連絡機能がページの必須実行環境に縛られる
- SVG方式はJavaScriptを一切使わずに、メールアドレスの表示とリンク動作を処理する
- JavaScriptがオフでも訪問者はページに表示されたメールアドレスを利用でき、スパムボットには通常のHTMLテキストより直接的には露出しにくい
- 他のフロントエンドベースの保護手法と同様、執拗で高度なスパムボットから公開メールアドレスを完全に守ることはできない
- ライブデモ: SVG-based Email Protection
HTMLとSVGの実装
- HTML文書は外部SVGファイルを``で挿入する
- 同じSVGグラフィック文書は、HTML内に1回または複数回挿入できる
- サンプルHTMLでは、
.svg-email-protectionクラスにwidth: 180px、height: 24px、vertical-align: middleのスタイルを指定し、本文でSVGファイルを``として読み込む - SVGファイルは
viewBox="0 0 200 24"を持つ``文書で、内部にメールアドレスのテキストとmailto:myemail@mydomain.tldリンクを置くの中にと``が入る- ``には
myemail@mydomain.tldが表示される rect:hoverとa:focusの状態で、背景色、テキスト色、太さ、下線、影のスタイルが変わる
アクセシビリティと参考資料
- SVG文書全体は
を指す`aria-labelledby`を使用し、SVG内部のには同じコールトゥアクションを含む**aria-label**を置く - キーボードのTabフォーカスがSVG内部のアンカーに到達すると、
とが同時に強調され、フォーカス状態が示される - 関連資料:
1件のコメント
Hacker News のコメント
本当にそうなのかなと思う
ただ個人的には、2015年ごろからはまったく差がなくなり、フィルタすべきスパムすら増えなかった
今では企業がユーザーリストを売ったり、侵害されたサーバーから流出した巨大なメールアドレス一覧を買えたりするので、Webを巡回してメールアドレスを集めるのは、スパム送信の手法としてほぼ最悪の効率だと思う
どちらのサイトも訪問者は数千人いて、検索エンジンやAIボットにクロールされる人気サイトだ
Webサイトに載せたメールアドレスは、迷惑メールフォルダに行くことすらない
一部のメーリングリストは、FIRSTNAME.LASTNAME形式や1〜10文字の組み合わせでGmailアドレスを辞書攻撃のように推測して作っているように見える
それでも domain@domain.com 宛てに来るスパムは年に1通程度で、とても少ない
全体としてメールスパムの量も大きく減っており、今出回っているスパムは419詐欺師や、20年前のメールアドレス一覧を買ってだまされた詐欺師予備軍が混じっているように思う
深刻なプライバシーやセキュリティ問題だとまでは言わないが、好みの問題だ
自分のドメインは24年前から登録している .comで、メールアドレスはトップ画面の一番上のH3タグにそのまま載せている
このアドレス宛てのスパムは問題になっていない。ジャンクフォルダまで含めて1日15件ほどで、Purelymailのおかげで大丈夫だ
本当の問題は、取引と無関係なトランザクションメール、ニュースレター的な宣伝メール、使っていないからと通知を送り続けてくるソーシャルネットワークだ
アカウントを使わなくなって7年くらい経つのだから、そろそろ気づいてもよさそうなものだ
ほとんどスパムが来ないところもあれば、1日に数十通来るところもある。SpamAssassinがスパムのキャッチを非常にうまくやってくれる
「訪問者がJavaScriptをオフにしていても、ページに表示されたメールアドレスは引き続き使える」という説明とは違って、FirefoxのNoScriptのデフォルト設定ではタグをレンダリングせずプレースホルダーに置き換えるため、この手法はここでは動作しない
https://imgur.com/2tCAgAf
この手法自体がアクセシブルであり得ない理由はないが、記事の例は本当にひどい
記事では svg と a 要素のラベルを「Email us!」にしているが、そうすると実際のメールアドレスがスクリーンリーダーから隠れてしまう
このような aria ラベルの使い方は非常に悪い慣行だ。よほど特別な理由がない限り、スクリーンリーダーのユーザーも他の人と同じ体験をすべきで、その理由が十分だと思っているなら、たいていは間違っている可能性が高い
正しい方法は、ラベルに実際のメールアドレスを入れることだ
ユーザーが「Click myemail@mydomain.tld」と言っても、ブラウザがリンクテキストを「Email us」として公開するため、リンクが有効化されないかもしれない
ただし、DragonがSVG内のリンクを有効化できるのかは分からない
自分はこうしている: reanospaml@maisjsl.com
それでも「スパム」は受け取るが、Webサイトのテーマにぴったり合ったB2B提案なので、人が手作業で収集したのだと思う
ただし、メールアドレス収集にヘッドレスブラウザを動かすのは比較的コストが高いので、そのスパムがサイト由来ではない可能性もある
他の人たちがすでに言っているように、メールアドレスを「保護」するのは無意味なだけでなく、実際には有害でもある
JavaScriptなしでも大半の内容は問題なく読めるのに、「1920x1080@60Hz」のような文字列だけが文字どおり「[email protected]」と表示されるサイトがかなりある
こういうものに本当に意味があるのかと思う。面白い実験ではあるが、スパマーを避ける目的なら完全な時間の無駄だ
情報を世界中に公開しておきながら、どういうわけか「善良な人たち」だけがアクセスできることを期待しているようなものだ
メールアドレスを少なくとも毎月変えない限り、誰かが連絡先を他人に渡したり、データベースやCRMに入れたり、あるサービスが侵害されたりするだけで、そのアドレスはリストに載り、最終的には世界中のスパマーに広まる
そのメールアドレスを継続的に使っているなら、こうしたことが起きる確率は実質的に**100%**に近いと見てよい
スクレイパーからメールアドレスを隠すことが本当に効果的だったなら、スパムは存在しなかったはずだ。個人の連絡先をどこにも公開したことがないのに、週に数十通のスパムを受け取っているが、すべてスパムとしてフィルタされるので大ごとではない
友人が本当に腕利きで、JavaScript入りのSVGで実質的にレスポンシブ画像を作っている
サイズに合わせてプログラム的に適応していて、かなり興味深い
SVGの中にJavaScriptを入れられるという事実自体が、まだ十分活用されていない一方で、少し危険にも感じる
バックエンドエンジニアなので技術的には自分の領域からかなり遠いが、本当に格好よく見える
こういう方式は諦めた。最近のスパムフィルタは十分に優秀なので、メールアドレスを難読化せず公開してもスパムが増えるようには思えない
合法的な理由で自分のメールアドレスを持っている出来の悪い会社が第三者に売っているような、別のスパム発生源は別だ
一般に受信トレイに入ってくるスパムは1日1通未満で、その程度なら問題ない
もちろんメールプロバイダやスパムフィルタによって変わるだろうから人それぞれだが、自分にとっては問題ではなかった
メールアドレスは依然として、ページソースから参照されるXML文書の中に平文で入っている
document.querySelectorAll('a')のような方法で取得してみると違う。多くのスクレイピング手法はこうしたアプローチを使うので、第一防衛線としては悪くないただしスクレイピング用のヘッドレスブラウザがあり、ページ上で現在のURLをそのまま
fetchして平文を受け取り、正規表現でメールアドレスを探せば取得できる。認めるが、かなり妙なアプローチではある[0]: fetch('./').then((res) => res.text()).then((text) => console.log(text))
ただ、現代的なスパム対策環境でこれが実際どれほど効果的なのかはよく分からない