Maison >interface Web >tutoriel CSS >Comment partager en toute sécurité votre adresse e-mail sur un site Web

Comment partager en toute sécurité votre adresse e-mail sur un site Web

Christopher Nolan
Christopher Nolanoriginal
2025-03-10 09:24:14721parcourir

How to Safely Share Your Email Address on a Website

Maintenant, le spam inonde. Si vous souhaitez partager vos coordonnées et que vous ne souhaitez pas être submergé par le spam, vous avez besoin d'une solution. J'ai eu ce problème il y a quelques mois. En recherchant comment résoudre ce problème, j'ai trouvé des solutions intéressantes. Un seul d'entre eux satisfait parfaitement mes besoins.

Cet article vous montrera comment protéger facilement votre adresse e-mail des bots de spam à l'aide de diverses façons. Vous pouvez choisir la bonne méthode en fonction de vos besoins.

Catalogue

html {Scroll-Behavior: Smooth;} - Méthode traditionnelle

  • Méthode HTML
  • Méthodes HTML et CSS
  • Méthode JavaScript
  • Méthode de forme en ligne
  • Conclusion

Méthode traditionnelle

Supposons que vous ayez un site Web. Vous souhaitez partager vos coordonnées, pas seulement partager vos liens sociaux. L'adresse e-mail doit exister. Très simple, non? Vous pouvez entrer les éléments suivants:

<code><a href="https://www.php.cn/link/7c3b08f1b6142bceb956851f1a45442b">发送电子邮件给我</a></code>

Ensuite, stylisez-le en fonction de vos préférences.

ok, même si cette solution fonctionne, elle a un problème. Il rend votre adresse e-mail visible pour tout le monde, y compris les robots de site Web et divers robots de spam. Cela signifie que votre boîte de réception peut être submergée par beaucoup de spam indésirables, comme les offres promotionnelles et même certaines activités de phishing.

Nous recherchons un compromis. Nous voulons rendre difficile pour les bots d'obtenir notre adresse e-mail, mais c'est aussi simple que possible pour l'utilisateur moyen.

La solution est la confusion.

déroutant est une pratique qui rend quelque chose de difficile à comprendre. Cette stratégie est utilisée pour le code source pour un certain nombre de raisons. L'une des raisons est de masquer l'objectif du code source de rendre la falsification ou l'ingénierie inversée plus difficile. Nous allons d'abord examiner différentes solutions basées sur des idées de confusion.

Méthode HTML

Nous pouvons considérer les robots comme un logiciel qui navigue et explore les pages Web. Une fois que le bot a obtenu le document HTML, il interprète le contenu et extrait les informations. Ce processus d'extraction est appelé Crawl du réseau . Si le bot recherche un modèle qui correspond au format de messagerie, nous pouvons essayer de le déguiser en utilisant un format différent. Par exemple, nous pouvons utiliser les commentaires HTML:

<code><p>如果您想联系我,请发送电子邮件至 email@address.com</p></code>

Cela semble désordonné, mais les utilisateurs verront une adresse e-mail comme celle-ci:

<code>如果您想联系我,请发送电子邮件至 [email protected]</code>

PROS:

  • Facile à configurer.
  • Cela fonctionne avec JavaScript Disabled.
  • La technologie assistée peut la lire.

Inconvénients:

  • Les bots de spam peuvent sauter des séquences connues, telles que les commentaires.
  • Cela ne fonctionne pas avec MailTo: Link.

Méthodes HTML et CSS

Et si nous utilisons la fonction de style de CSS pour supprimer quelque chose qui n'est utilisé que pour tromper les robots de spam? Supposons que nous ayons le même contenu qu'auparavant, mais cette fois, nous y mettons un élément de portée:

<code><a href="https://www.php.cn/link/7c3b08f1b6142bceb956851f1a45442b">发送电子邮件给我</a></code>

Ensuite, nous utilisons les règles de style CSS suivantes:

<code><p>如果您想联系我,请发送电子邮件至 email@address.com</p></code>

Les utilisateurs finaux ne verront que:

<code>如果您想联系我,请发送电子邮件至 [email protected]</code>

… c'est ce qui nous tient vraiment à cœur.

PROS:

  • Cela fonctionne avec JavaScript Disabled.
  • Les robs sont plus difficiles à obtenir des adresses e-mail.
  • La technologie assistée peut la lire.

Inconvénients:

  • Cela ne fonctionne pas avec MailTo: Link.

Méthode JavaScript

Dans cet exemple, nous utilisons JavaScript pour rendre notre adresse e-mail illisible. Ensuite, après le chargement de la page, JavaScript rend à nouveau l'adresse e-mail lisible. De cette façon, nos utilisateurs peuvent recevoir une adresse e-mail.

La solution la plus simple utilise l'algorithme de codage Base64 pour décoder les adresses e-mail. Tout d'abord, nous devons coder l'adresse e-mail en tant que base64. Nous pouvons le faire en utilisant certains sites Web comme Base64Encode.org. Entrez votre adresse e-mail comme suit:

Ensuite, cliquez sur le bouton pour coder. En utilisant ces lignes de JavaScript, nous décodons l'adresse e-mail et définissons l'attribut HREF dans le lien html:

<code><p>如果您想联系我,请发送电子邮件至 PLEASE GO AWAY! email@address.com</p>。</code>

Ensuite, nous devons nous assurer que le lien électronique est inclus dans la balise, comme ceci:

<code>span.blockspam {
  display: none;
}</code>

Nous utilisons la méthode ATOB pour décoder une chaîne de données codées Base64. Une autre approche consiste à utiliser certains algorithmes de cryptage de base, tels que Caesar Cipher, qui est facile à mettre en œuvre en JavaScript.

PROS:

  • Les robots sont plus difficiles à obtenir des adresses e-mail, en particulier lors de l'utilisation d'algorithmes de chiffrement.
  • Cela fonctionne pour Mailto: lien.
  • La technologie assistée peut la lire.

Inconvénients:

  • JavaScript doit être activé sur le navigateur, sinon le lien sera vide.

Méthode de forme en ligne

Les formulaires de contact sont disponibles partout. Vous avez définitivement utilisé au moins l'un d'entre eux. Si vous souhaitez que les gens vous contactent directement, l'une des solutions possibles est de mettre en œuvre le service de formulaire de contact sur votre site Web.

Formspree est un exemple de service qui offre tous les avantages du formulaire de contact sans se soucier du code côté serveur. Il en va de même pour Wufoo. En fait, il existe de nombreux services que vous pouvez envisager d'utiliser pour traiter vos soumissions de formulaire de contact.

La première étape pour utiliser n'importe quel service de formulaire consiste à s'inscrire et à créer un compte. Bien sûr, les prix varieront et les fonctions fournies entre les différents services varieront également. Cependant, la plupart des services vous fournissent un extrait HTML pour intégrer les formulaires que vous créez dans n'importe quel site Web ou application. Voici un exemple que j'ai extrait directement du formulaire que j'ai créé dans mon compte Formspring

<code>如果您想联系我,请发送电子邮件至 [email protected]。</code>

Envoyé sur la première ligne, vous devez personnaliser l'action en fonction de votre point final. Ce formulaire est très basique, mais vous pouvez ajouter autant de champs que vous le souhaitez.

Notez les marques d'entrée cachées à la ligne 9. Cette balise d'entrée vous aide à filtrer le contenu soumis par des utilisateurs et des bots réguliers. En fait, si le backend de Formspree voit un engagement qui remplit cette entrée, il le rejette. L'utilisateur moyen ne le fera pas, il doit donc être un robot.

PROS:

  • Votre adresse e-mail est sécurisée car elle n'est pas publique.
  • Cela fonctionne avec JavaScript Disabled.

Inconvénients:

  • s'appuyer sur des services tiers (cela peut être un plus, selon vos besoins)

Cette solution présente un inconvénient de plus, mais je l'ai retirée de la liste car elle est très subjective et dépend de votre cas d'utilisation. Avec cette solution, vous ne partagerez pas votre adresse e-mail. Vous donnez aux gens les moyens de vous contacter. Et si les gens Vous voulez vous envoyer un e-mail? Et si les gens recherchent votre adresse e-mail et qu'ils n'ont pas besoin d'un formulaire de contact? Dans ce cas, le formulaire de contact peut être une solution trop difficile.

Conclusion

Nous avons atteint la fin! Dans ce tutoriel, nous discutons différentes solutions au problème de partage des e-mails en ligne. Nous avons introduit différentes idées, y compris des services en ligne tels que le code HTML, JavaScript et même Formspree pour créer des formulaires de contact. À la fin de ce tutoriel, vous devez comprendre tous les avantages et les inconvénients de la stratégie affichée. Vous pouvez maintenant choisir la stratégie la plus appropriée en fonction de votre cas d'utilisation spécifique.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn