ホームページ > ウェブフロントエンド > CSSチュートリアル > ウェブサイトでメールアドレスを安全に共有する方法

ウェブサイトでメールアドレスを安全に共有する方法

Christopher Nolan
リリース: 2025-03-10 09:24:14
オリジナル
724 人が閲覧しました

How to Safely Share Your Email Address on a Website

さて、スパムは洪水です。連絡先情報を共有したい場合、スパムに圧倒されたくない場合は、解決策が必要です。私は数ヶ月前にこの問題を抱えていました。この問題を解決する方法を研究している間、私はいくつかの興味深い解決策を見つけました。そのうちの1人だけが私のニーズを完全に満たしています。

この記事では、さまざまな方法を使用して、スパムボットからメールアドレスを簡単に保護する方法を示します。ニーズに応じて適切な方法を選択できます。

カタログ

html {scroll -behavior:smooth;

    HTMLメソッド
  • htmlおよびcssメソッド
  • javaScriptメソッド
  • インライン形式の方法
  • 結論
従来の方法

あなたがウェブサイトを持っていると仮定します。ソーシャルリンクを共有するだけでなく、連絡先情報を共有する必要があります。メールアドレスが存在する必要があります。とてもシンプルですよね?以下を入力できます

それからあなたの好みに応じてそれをスタイリングします。
<code><a href="https://www.php.cn/link/7c3b08f1b6142bceb956851f1a45442b">发送电子邮件给我</a></code>
ログイン後にコピー
ログイン後にコピー

わかりました、このソリューションが機能していても、問題があります。ウェブサイトのクローラーやさまざまなスパムボットなど、すべての人にメールアドレスを表示できます。これは、プロモーションオファーやフィッシング活動など、多くの不要なスパムで圧倒される可能性があることを意味します。

妥協を探しています。ボットがメールアドレスを取得することを難しくしたいと考えていますが、平均的なユーザーにとってはできるだけ簡単です。

解決策は混乱です。

混乱を招く

は、理解が困難なものを作る実践です。この戦略は、いくつかの理由でソースコードに使用されます。理由の1つは、ソースコードの目的を非表示にして、改ざんまたはリバースエンジニアリングをより困難にすることです。まず、混乱のアイデアに基づいたさまざまなソリューションを見ていきます。 HTMLメソッド

ロボットは、Webページを閲覧してクロールするソフトウェアと考えることができます。 BOTがHTMLドキュメントを取得した後、内容を解釈し、情報を抽出します。この抽出プロセスは、

ネットワーククロール

と呼ばれます。ボットが電子メール形式に一致するパターンを探している場合、別の形式を使用して偽装してみることができます。たとえば、HTMLコメントを使用できます:

乱雑に見えますが、ユーザーは次のようなメールアドレスが表示されます:
<code><p>如果您想联系我,请发送电子邮件至 email@address.com</p></code>
ログイン後にコピー
ログイン後にコピー

<code>如果您想联系我,请发送电子邮件至 [email protected]</code>
ログイン後にコピー
ログイン後にコピー
長所:

セットアップが簡単です。
  • JavaScript Disabledで動作します。
  • 支援テクノロジーはそれを読むことができます。
短所:

スパムボットは、コメントなどの既知のシーケンスをスキップできます。
  • mailto:linkで動作しません。
  • htmlおよびcssメソッド

CSSのスタイル機能を使用して、スパムボットをだますためだけに使用されるものを削除した場合はどうなりますか?以前と同じコンテンツを持っていると仮定しますが、今回はスパン要素を入れました:

<code><a href="https://www.php.cn/link/7c3b08f1b6142bceb956851f1a45442b">发送电子邮件给我</a></code>
ログイン後にコピー
ログイン後にコピー

次のCSSスタイルのルールを使用します。

<code><p>如果您想联系我,请发送电子邮件至 email@address.com</p></code>
ログイン後にコピー
ログイン後にコピー
エンドユーザーは次のように表示されます

…これは私たちが本当に気にかけていることです。
<code>如果您想联系我,请发送电子邮件至 [email protected]</code>
ログイン後にコピー
ログイン後にコピー

長所:

JavaScript Disabledで動作します。
  • ロブは、メールアドレスを取得するのがより困難です。
  • 支援テクノロジーはそれを読むことができます。
短所:

mailto:linkで動作しません。
  • javaScriptメソッド
この例では、JavaScriptを使用して、メールアドレスを読み取れないようにします。次に、ページが読み込まれた後、JavaScriptはメールアドレスを再度読み取り可能にします。これにより、ユーザーはメールアドレスを取得できます。

最も簡単なソリューションでは、base64エンコードアルゴリズムを使用してメールアドレスをデコードします。まず、メールアドレスをbase64としてエンコードする必要があります。 Base64Encode.orgなどのいくつかのWebサイトを使用してこれを行うことができます。次のようにメールアドレスを入力してください:

次に、ボタンをクリックしてエンコードします。これらのJavaScriptの行を使用して、メールアドレスをデコードし、HTMLリンクにHREF属性を設定します:

次に、このようなメールリンクがタグに含まれていることを確認する必要があります。

<code><p>如果您想联系我,请发送电子邮件至 PLEASE GO AWAY! email@address.com</p>。</code>
ログイン後にコピー
ATOBメソッドを使用して、Base64エンコードされたデータの文字列をデコードします。別のアプローチは、JavaScriptで簡単に実装できるCaesar Cipherなど、いくつかの基本的な暗号化アルゴリズムを使用することです。

<code>span.blockspam {
  display: none;
}</code>
ログイン後にコピー
長所:

特に暗号化アルゴリズムを使用する場合、ロボットはメールアドレスを取得するのがより困難です。 mailto:linkで動作します。

    支援テクノロジーはそれを読むことができます。
  • 短所:

JavaScriptをブラウザで有効にする必要があります。そうしないと、リンクが空になります。

インライン形式の方法
  • 連絡先フォームはどこでも利用できます。あなたは間違いなくそれらの少なくとも1つを使用しました。人々に直接連絡してもらいたい場合は、可能な解決策の1つは、ウェブサイトに連絡先フォームサービスを実装することです。
formspreeは、サーバー側のコードを心配することなく、連絡先フォームのすべての利点を提供するサービスの例です。 Wufooにも同じことが言えます。実際、連絡先フォームの送信を処理するために使用することを検討できる多くのサービスがあります。

フォームサービスを使用する最初のステップは、アカウントを登録および作成することです。もちろん、価格設定は異なり、異なるサービス間で提供される機能も異なります。ただし、ほとんどのサービスは、作成したフォームを任意のWebサイトまたはアプリケーションに埋め込むためのHTMLスニペットを提供します。これは、フォームスプリングアカウントで作成したフォームから直接抽出した例です

あなたのメール:

あなたのメッセージ:
<code>如果您想联系我,请发送电子邮件至 [email protected]。</code>
ログイン後にコピー
最初の行で送信された場合、エンドポイントに基づいてアクションをカスタマイズする必要があります。このフォームは非常に基本的ですが、必要な数のフィールドを追加できます。

9行目の隠された入力マークに注意してください。この入力タグは、通常のユーザーとボットが送信したコンテンツをフィルタリングするのに役立ちます。実際、formspreeのバックエンドがその入力に記入するコミットを見た場合、それはそれを破棄します。平均的なユーザーはこれを行わないため、ロボットである必要があります。

長所:

  • メールアドレスは公開されていないため安全です。
  • JavaScript Disabledで動作します。

短所:

  • サードパーティのサービスに頼っています(これは、ニーズに応じてプラスになる場合があります)

このソリューションにはもう1つの欠点がありますが、リストから削除しました。これは非常に主観的で、ユースケースに依存するためです。このソリューションでは、メールアドレスを共有しません。あなたは人々にあなたに連絡する手段を与えています。人々があなたに電子メールを送りたいとしたらどうしますか?人々があなたのメールアドレスを探していて、連絡フォームが必要ない場合はどうなりますか?この場合、接触フォームは過度に困難な解決策になる可能性があります。 結論

終わりに達しました!このチュートリアルでは、オンライン電子メール共有の問題に対するさまざまなソリューションについて説明します。 HTMLコード、JavaScript、さらにはFormspreeなどのオンラインサービスを含むさまざまなアイデアを紹介し、連絡先フォームを構築しました。このチュートリアルの終わりまでに、表示された戦略のすべての長所と短所を理解する必要があります。これで、特定のユースケースに基づいて最も適切な戦略を選択できます。

以上がウェブサイトでメールアドレスを安全に共有する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート