Rumah >hujung hadapan web >tutorial css >Cara selamat berkongsi alamat e -mel anda di laman web

Cara selamat berkongsi alamat e -mel anda di laman web

Christopher Nolan
Christopher Nolanasal
2025-03-10 09:24:14724semak imbas

How to Safely Share Your Email Address on a Website

Sekarang, spam banjir. Jika anda ingin berkongsi maklumat hubungan anda dan tidak mahu dibanjiri oleh SPAM, anda memerlukan penyelesaian. Saya mempunyai masalah ini beberapa bulan yang lalu. Semasa meneliti cara menyelesaikan masalah ini, saya dapati beberapa penyelesaian yang menarik. Hanya satu daripada mereka yang sempurna memenuhi keperluan saya.

Artikel ini akan menunjukkan kepada anda bagaimana untuk melindungi alamat e -mel anda dari bot spam menggunakan pelbagai cara. Anda boleh memilih kaedah yang betul mengikut keperluan anda.

katalog

html {scroll -behavior: smooth;} - kaedah tradisional

    kaedah html
  • kaedah HTML dan CSS
  • kaedah javascript
  • kaedah bentuk dalam talian
  • Kesimpulan
Kaedah tradisional

Katakan anda mempunyai laman web. Anda ingin berkongsi maklumat hubungan anda, bukan hanya berkongsi pautan sosial anda. Alamat e -mel mesti wujud. Sangat mudah, bukan? Anda boleh memasukkan yang berikut:

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

OK, walaupun penyelesaian ini berfungsi, ia mempunyai masalah. Ia menjadikan alamat e -mel anda dapat dilihat oleh semua orang, termasuk crawler laman web dan pelbagai bot spam. Ini bermakna peti masuk anda boleh dibanjiri dengan banyak spam yang tidak diingini, seperti tawaran promosi dan juga beberapa aktiviti phishing.

Kami sedang mencari kompromi. Kami mahu membuat sukar bagi bot untuk mendapatkan alamat e -mel kami, tetapi ia semudah mungkin untuk pengguna purata.

Penyelesaiannya adalah kekeliruan.

Membingungkan

adalah amalan yang membuat sesuatu yang sukar difahami. Strategi ini digunakan untuk kod sumber untuk beberapa sebab. Salah satu sebabnya adalah untuk menyembunyikan tujuan kod sumber untuk membuat kejuruteraan atau kejuruteraan terbalik lebih sukar. Kami akan terlebih dahulu melihat penyelesaian yang berbeza berdasarkan idea kekeliruan. kaedah html

kita boleh memikirkan robot sebagai perisian yang melayari dan merangkak halaman web. Selepas bot memperoleh dokumen HTML, ia menafsirkan kandungan dan mengekstrak maklumat tersebut. Proses pengekstrakan ini dipanggil

Crawl Rangkaian

. Jika bot mencari corak yang sepadan dengan format e -mel, kami boleh cuba menyamar dengan menggunakan format yang berbeza. Sebagai contoh, kita boleh menggunakan komen HTML:

ia kelihatan kemas, tetapi pengguna akan melihat alamat e -mel seperti ini:
<code><p>如果您想联系我,请发送电子邮件至 email@address.com</p></code>

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

Mudah ditubuhkan.
  • Ia berfungsi dengan JavaScript dilumpuhkan.
  • Teknologi dibantu dapat membacanya.
Kekurangan:

Bot spam boleh melangkau urutan yang diketahui, seperti komen.
  • Ia tidak berfungsi dengan mailto: pautan.
  • kaedah HTML dan CSS

Bagaimana jika kita menggunakan ciri gaya CSS untuk menghapuskan sesuatu yang hanya digunakan untuk menipu bot spam? Katakan kita mempunyai kandungan yang sama seperti dahulu, tetapi kali ini kita meletakkan elemen span di dalamnya:

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

maka kami menggunakan peraturan gaya CSS berikut:

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

pengguna akhir hanya akan melihat:

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

... inilah yang kita benar -benar peduli.

Pro:

  • Ia berfungsi dengan JavaScript dilumpuhkan.
  • Robs lebih sukar untuk mendapatkan alamat e -mel.
  • Teknologi dibantu dapat membacanya.

Kekurangan:

  • Ia tidak berfungsi dengan mailto: pautan.

kaedah javascript

Dalam contoh ini, kami menggunakan JavaScript untuk membuat alamat e -mel kami tidak boleh dibaca. Kemudian, selepas beban halaman, JavaScript membuat alamat e -mel boleh dibaca lagi. Dengan cara ini pengguna kami boleh mendapatkan alamat e -mel.

Penyelesaian yang paling mudah menggunakan algoritma pengekodan Base64 untuk menyahkod alamat e -mel. Pertama, kita perlu menyandikan alamat e -mel sebagai Base64. Kita boleh melakukan ini menggunakan beberapa laman web seperti base64encode.org. Masukkan alamat e -mel anda seperti berikut:

Kemudian, klik butang untuk mengekod. Menggunakan baris JavaScript ini, kami menyahkod alamat e -mel dan menetapkan atribut HREF dalam pautan HTML:

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

maka kita perlu memastikan pautan e -mel dimasukkan ke dalam tag, seperti ini:

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

Kami menggunakan kaedah ATOB untuk menyahkodkan rentetan data yang dikodkan oleh Base64. Pendekatan lain ialah menggunakan beberapa algoritma penyulitan asas, seperti Caesar Cipher, yang mudah dilaksanakan dalam JavaScript.

Pro:

  • robot lebih sukar untuk mendapatkan alamat e -mel, terutamanya apabila menggunakan algoritma penyulitan.
  • Ia berfungsi untuk mailto: pautan.
  • Teknologi dibantu dapat membacanya.

Kekurangan:

  • JavaScript mesti diaktifkan pada penyemak imbas, jika tidak, pautan akan kosong.

kaedah bentuk dalam talian

Borang hubungan boleh didapati di mana -mana. Anda pasti menggunakan sekurang -kurangnya salah satu daripada mereka. Jika anda mahu orang menghubungi anda secara langsung, salah satu penyelesaian yang mungkin adalah untuk melaksanakan perkhidmatan borang hubungan di laman web anda.

FormSpree adalah contoh perkhidmatan yang menyediakan semua manfaat borang hubungan tanpa bimbang tentang kod sisi pelayan. Begitu juga untuk Wufoo. Malah, terdapat banyak perkhidmatan yang boleh anda pertimbangkan untuk memproses penyerahan borang hubungan anda.

Langkah pertama untuk menggunakan mana -mana Perkhidmatan Borang adalah untuk mendaftar dan membuat akaun. Sudah tentu, harga akan berbeza -beza, dan fungsi yang disediakan antara perkhidmatan yang berbeza juga akan berbeza -beza. Walau bagaimanapun, kebanyakan perkhidmatan memberikan anda coretan HTML untuk membenamkan borang yang anda buat ke dalam mana -mana laman web atau aplikasi. Berikut adalah contoh yang saya diekstrak terus dari bentuk yang saya buat dalam akaun Formspring saya

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

dihantar pada baris pertama, anda harus menyesuaikan tindakan berdasarkan titik akhir anda. Borang ini sangat asas, tetapi anda boleh menambah seberapa banyak bidang yang anda mahukan.

Perhatikan tanda input tersembunyi dalam baris 9. Tag input ini membantu anda menapis kandungan yang dikemukakan oleh pengguna dan bot biasa. Sebenarnya, jika backend Formspree melihat komitmen yang mengisi input itu, ia akan membuangnya. Pengguna purata tidak akan melakukan ini, jadi ia mesti menjadi robot.

Pro:

  • Alamat e -mel anda selamat kerana ia tidak awam.
  • Ia berfungsi dengan JavaScript dilumpuhkan.

Kekurangan:

  • bergantung pada perkhidmatan pihak ketiga (ini mungkin ditambah, bergantung kepada keperluan anda)

Penyelesaian ini mempunyai satu lagi kelemahan, tetapi saya mengeluarkannya dari senarai kerana ia sangat subjektif dan bergantung pada kes penggunaan anda. Dengan penyelesaian ini, anda tidak akan berkongsi alamat e -mel anda. Anda memberi orang cara untuk menghubungi anda. Bagaimana jika orang mahu menghantar e -mel kepada anda? Bagaimana jika orang mencari alamat e -mel anda dan mereka tidak memerlukan borang hubungan? Dalam kes ini, borang hubungan boleh menjadi penyelesaian yang terlalu sukar.

Kesimpulan

Kami telah sampai ke akhir! Dalam tutorial ini, kami membincangkan penyelesaian yang berbeza untuk masalah perkongsian e -mel dalam talian. Kami memperkenalkan idea yang berbeza, termasuk perkhidmatan dalam talian seperti kod HTML, JavaScript dan juga FormSpree untuk membina borang hubungan. Menjelang akhir tutorial ini, anda harus memahami semua kebaikan dan keburukan strategi yang dipaparkan. Sekarang anda boleh memilih strategi yang paling sesuai berdasarkan kes penggunaan khusus anda.

Atas ialah kandungan terperinci Cara selamat berkongsi alamat e -mel anda di laman web. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn