كيفية مشاركة عنوان بريدك الإلكتروني بأمان على موقع ويب

مرسلي البريد العشوائي يمثلون صفقة ضخمة في الوقت الحاضر. إذا كنت ترغب في مشاركة معلومات الاتصال الخاصة بك دون إغراق البريد الإلكتروني العشوائي ، فأنت بحاجة إلى حل. واجهت هذه المشكلة قبل بضعة أشهر. بينما كنت أبحث عن كيفية حلها ، وجدت حلولًا مختلفة مثيرة للاهتمام. واحد منهم فقط كان مثاليًا لاحتياجاتي.

في هذه المقالة ، سأوضح لك كيفية حماية عنوان بريدك الإلكتروني بسهولة من روبوتات البريد العشوائي باستخدام حلول متعددة. الأمر متروك لك لتقرر الأسلوب الذي يناسب احتياجاتك.

الحالة التقليدية

لنفترض أن لديك موقع ويب. تريد مشاركة تفاصيل الاتصال الخاصة بك ، ولا تريد مشاركة روابطك الاجتماعية فقط. يجب أن يكون عنوان البريد الإلكتروني هناك. قراءة سهلة؟ تكتب شيئًا مثل هذا:

<a href="mailto:[email protected]">Send me an Email

ثم تصممها حسب ذوقك.

حسنًا ، حتى لو نجح هذا الحل ، فهناك مشكلة. يجعل عنوان بريدك الإلكتروني متاحًا للجميع حرفيًا ، بما في ذلك برامج زحف مواقع الويب وجميع أنواع روبوتات البريد العشوائي. هذا يعني أنه يمكن إغراق صندوق الوارد الخاص بك بأطنان من القمامة غير المرغوب فيها مثل العروض الترويجية أو حتى بعض حملات التصيد الاحتيالي.

نحن نبحث عن حل وسط. نريد أن نجعل من الصعب على الروبوتات الحصول على عناوين بريدنا الإلكتروني ، ولكن بأبسط طريقة ممكنة للمستخدمين العاديين.

الحل هو التشويش.

التشويش هي ممارسة جعل شيء يصعب فهمه. يتم استخدام هذه الاستراتيجية مع شفرة المصدر لأسباب متعددة. أحدها هو إخفاء الغرض من الكود المصدري لجعل التلاعب أو الهندسة العكسية أكثر صعوبة. سننظر أولاً في الحلول المختلفة التي تستند جميعها إلى فكرة التشويش.

نهج HTML

يمكننا التفكير في الروبوتات على أنها برامج تتصفح الويب وتزحف عبر صفحات الويب. بمجرد حصول الروبوت على مستند HTML ، فإنه يفسر المحتوى الموجود فيه ويستخرج المعلومات. تسمى عملية الاستخراج هذه تجريف على شبكة الإنترنت. إذا كان الروبوت يبحث عن نمط يطابق تنسيق البريد الإلكتروني ، فيمكننا محاولة إخفاءه باستخدام تنسيق مختلف. على سبيل المثال ، يمكننا استخدام تعليقات HTML:

If you want to get in touch, please drop me an email at [email protected]address.com

يبدو الأمر فوضويًا ، ولكن سيرى المستخدم عنوان البريد الإلكتروني مثل هذا:

If you want to get in touch, please drop me an email at [email protected]

الايجابيات:

• من السهل اقامة.
• يعمل مع JavaScript معطل.
• يمكن قراءتها عن طريق التكنولوجيا المساعدة.

سلبيات:

• يمكن لروبوتات البريد العشوائي تخطي التسلسلات المعروفة مثل التعليقات.
• لا يعمل مع ملف mailto: الرابط.

نهج HTML & CSS

ماذا لو استخدمنا قوة التصميم الخاصة بـ CSS لإزالة بعض المحتويات الموضوعة فقط لخداع روبوتات البريد العشوائي؟ لنفترض أن لدينا نفس المحتوى كما كان من قبل ، ولكن هذه المرة نضع ملف span عنصر بالداخل:

If you want to get in touch, please drop me an email at PLEASE GO AWAY! [email protected]address.com
.

بعد ذلك ، نستخدم قاعدة نمط CSS التالية:

span.blockspam {
  display: none;
}

سيشاهد المستخدم النهائي هذا فقط:

If you want to get in touch, please drop me an email at [email protected]

... وهو المحتوى الذي نهتم به حقًا.

الايجابيات:

• يعمل مع JavaScript معطل.
• يصعب على برامج الروبوت الحصول على عنوان البريد الإلكتروني.
• يمكن قراءتها عن طريق التكنولوجيا المساعدة.

مع:

• لا يعمل مع ملف mailto: الرابط.

نهج JavaScript

في هذا المثال ، نستخدم JavaScript لجعل عنوان بريدنا الإلكتروني غير قابل للقراءة. بعد ذلك ، عندما يتم تحميل الصفحة ، تجعل JavaScript عنوان البريد الإلكتروني قابلاً للقراءة مرة أخرى. بهذه الطريقة ، يمكن لمستخدمينا الحصول على عنوان البريد الإلكتروني.

يستخدم الحل الأسهل خوارزمية تشفير Base64 لفك تشفير عنوان البريد الإلكتروني. أولاً ، نحتاج إلى تشفير عنوان البريد الإلكتروني في Base64. يمكننا استخدام بعض المواقع مثل Base64Encode.org لفعل هذا. اكتب عنوان بريدك الإلكتروني مثل هذا:

ثم انقر فوق الزر للترميز. باستخدام هذه الأسطر القليلة من JavaScript ، نقوم بفك تشفير عنوان البريد الإلكتروني وتعيين ملف href السمة في ارتباط HTML:

var encEmail = "ZW1haWxAYWRkcmVzcy5jb20=";
const form = document.getElementById("contact");
form.setAttribute("href", "mailto:".concat(atob(encEmail)));

ثم علينا التأكد من أن رابط البريد الإلكتروني يتضمن id="contact" في الترميز ، مثل هذا:

Send me an Email

نحن نستخدم atob طريقة لفك تشفير سلسلة من البيانات المشفرة باستخدام Base64. البديل هو استخدام بعض خوارزمية التشفير الأساسية مثل قيصر الشفرات، وهو أمر سهل التنفيذ إلى حد ما في JavaScript.

الايجابيات:

• يعتبر حصول الروبوتات على عنوان البريد الإلكتروني أكثر تعقيدًا ، خاصة إذا كنت تستخدم خوارزمية تشفير.
• إنه يعمل مع ملف mailto: الرابط.
• يمكن قراءتها عن طريق التكنولوجيا المساعدة.

مع:

• يجب تمكين JavaScript في المتصفح ، وإلا فسيكون الرابط فارغًا.

نهج النموذج المضمن

نماذج الاتصال في كل مكان. لقد استخدمت بالتأكيد واحدًا منهم مرة واحدة على الأقل. إذا كنت تريد طريقة يتواصل بها الأشخاص معك مباشرةً ، فإن أحد الحلول الممكنة هو تنفيذ خدمة نموذج الاتصال على موقع الويب الخاص بك.

فورمسبري هو أحد الأمثلة على الخدمة التي توفر لك جميع مزايا نموذج الاتصال دون القلق بشأن الكود من جانب الخادم. موثقة wufoo انه كثير. في الواقع، هنا مجموعة يمكنك النظر فيها للتعامل مع عمليات إرسال نماذج الاتصال نيابة عنك.

الخطوة الأولى لاستخدام أي خدمة نموذج هي التسجيل وإنشاء حساب. تختلف الأسعار ، بالطبع ، كما تختلف الميزات المقدمة بين الخدمات. ولكن هناك شيء واحد يفعله معظمهم وهو تزويدك بمقتطف HTML لتضمين نموذج تقوم بإنشائه في أي موقع ويب أو تطبيق. فيما يلي مثال قمت بسحبه مباشرة من نموذج قمت بإنشائه في حساب Formspring الخاص بي

   Your email:
    
  
   Your message:
    
  
  
  
  Send

في السطر الأول ، يجب عليك التخصيص action بناءً على نقطة النهاية الخاصة بك. هذا النموذج أساسي تمامًا ، ولكن يمكنك إضافة أي عدد تريده من الحقول.

لاحظ علامة الإدخال المخفية في السطر 9. تساعدك علامة الإدخال هذه على تصفية عمليات الإرسال التي يتم إجراؤها بواسطة المستخدمين العاديين والروبوتات. في الواقع ، إذا رأت نهاية Formspree الخلفية إرسالًا ممتلئًا بهذا الإدخال ، فسوف تتجاهله. لن يفعل المستخدم العادي ذلك ، لذلك يجب أن يكون روبوتًا.

الايجابيات:

• عنوان بريدك الإلكتروني آمن لأنه ليس عامًا.
• يعمل مع Javascript المعوقين.

مع:

• يعتمد على خدمة جهة خارجية (والتي قد تكون محترفة ، حسب احتياجاتك)

هناك عيب آخر لهذا الحل لكنني تركته خارج القائمة لأنه شخصي تمامًا ويعتمد على حالة الاستخدام الخاصة بك. باستخدام هذا الحل ، أنت لا تشارك عنوان بريدك الإلكتروني. أنت تعطي الناس طريقة للاتصال بك. ماذا لو الناس تريد لمراسلتك ماذا لو كان الناس يبحثون عن عنوان بريدك الإلكتروني ، ولا يريدون نموذج اتصال؟ قد يكون نموذج الاتصال حلاً ثقيلًا في هذا النوع من المواقف.

وفي الختام

وصلنا إلى النهاية! في هذا البرنامج التعليمي ، تحدثنا عن حلول مختلفة لمشكلة مشاركة البريد الإلكتروني عبر الإنترنت. لقد مررنا بأفكار مختلفة ، بما في ذلك كود HTML وجافا سكريبت وحتى بعض الخدمات عبر الإنترنت مثل Formspree لبناء نماذج اتصال. في نهاية هذا البرنامج التعليمي ، يجب أن تكون على دراية بجميع إيجابيات وسلبيات الاستراتيجيات الموضحة. الآن ، الأمر متروك لك لاختيار الأنسب لحالة الاستخدام الخاصة بك.