Я хочу защитить свой адрес электронной почты на веб-страницах.
Но я не знаю JavaScript и PHP. Я знаю только HTML и CSS.
Итак, пожалуйста, помогите мне защитить мой адрес электронной почты только с помощью CSS.
Защитить адрес электронной почты только с помощью CSS
Ответ 1
Это очень просто. Вы можете защитить свой адрес электронной почты только HTML и CSS. Вам не нужно знать о PHP или Java script. Попробуйте ввести код.
Простой код HTML и CSS:
<!doctype html>
<html>
<head>
<title>Protect e-mail with only css</title>
<style type="text/css">
.e-mail:before {
content: attr(data-website) "\0040" attr(data-user);
unicode-bidi: bidi-override;
direction: rtl;
}
</style>
</head>
<body>
<span class="e-mail" data-user="nohj" data-website="moc.liamg"></span>
</body>
</html>
Вывод кода выше:
[email protected]
Обратите внимание:
Здесь я просто использовал два дополнительных атрибута.
1) data-user напишите свое имя пользователя электронной почты в обратном порядке.
2) data-website напишите свой веб-сайт электронной почты в обратном порядке.
Ответ 2
Попробуйте этот код:
.e-mail:before {
content: "\006a\0068\006f\006e\0040\0067\006d\0061\0069\006c\002e\0063\006f\006d";
}<span class="e-mail"></span>Ответ 3
Как вы, вероятно, знаете: методы обфускации не могут быть надежными, а бои-комбайны будут продолжать улучшаться. Существует несколько аргументов против обфускации.
Это, как говорится, вот некоторые дополнительные методы для довольно интересных, о которых вы уже говорили.
Методы HTML:
-
Использование html комментариев или замена html-сущностей уже несколько лет назад показало, что это довольно слабый подход.
-
Использование изображения вместо текста - это боль для большинства пользователей, в том числе для людей с недостатками зрения, поскольку они не могут вырезать и вставлять. Это хорошо работает.
-
Один интересный чистый HTML-подход, который позволяет использовать гиперссылку, предложил какое-то время назад.
<a href="mailto:[email protected]?subject=EMAIL ADDRESS NEEDS EDITING&body=Please remove the text 'notspam' from the address before sending your email.">Email me.</a>
Методы CSS: Это, конечно же, не доказательство дурака. Помимо того, что вы уже упоминали:
-
Использование отображения CSS: none также полезно. Боты, которые просто вычеркивают теги стиля, будут включать скрытый текст в собранном адресе.
jhon<span style="display:none">-anti-bot-bit</span>@gmail.com. -
Шрифт веб-значка можно использовать для создания значка @ , и это возможно сделать так, чтобы не отключать считыватели экрана. Я не видел шрифт веб-значка с иконкой @по очевидным причинам, но это сработает.
Обновление: Шрифт Awesome теперь имеет значок @. Возможно, кто-то предложил это после просмотра этого сообщения; -).
Ответ 4
Один из простых и эффективных способов встраивания электронных писем в html - использование шестнадцатеричных значений! например hex значение для [email protected]:
%6A%6F%68%6E%40%73%6D%69%74%68%2E%6D%65
и вы можете использовать следующий тег в своем HTML-коде
<a href="mailto:%6A%6F%68%6E%40%73%6D%69%74%68%2E%6D%65">email me</a>
Это действительно простой и эффективный способ встраивания электронной почты на веб-страницу.
вы скрыли "maito:" и электронное письмо таким образом.
вы можете использовать этот инструмент для генерации шестнадцатеричного кода% 64
вы также можете использовать этот инструмент для генерации шестнадцатеричного кода
Ответ 5
Вы можете комбинировать два ответа выше (Ans1 и Ans2), чтобы сделать работу mailto с CSS для удобства использования.
<style type="text/css">
.e-mail:before {
content: attr(data-website) "\0040" attr(data-user);
unicode-bidi: bidi-override;
direction: rtl;
}
</style>
<a href="mailto:%6A%6F%68%6E%40%67%6D%61%69%6C%2E%63%6F%6D">
<span class="e-mail" data-user="nhoj" data-website="moc.liamg"></span>
</a>Ответ 6
Вы можете использовать Font Awesome:
В <head>:
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
В <body>:
<p>john<i class="fa fa-at"></i>hotmail.com</p>
Ответ 7
Я бы рекомендовал использовать JavaScript, если это возможно, над CSS и JavaScript, поскольку он может манипулировать dom. Легко вы можете сделать это с помощью кода, например
<div onclick="document.write('[email protected]' + 'joemaller.com')">Email Me</div>
Это простое, но не идеальное решение.
JFiddle; http://jsfiddle.net/yFKUD/
Ответ 8
Чтобы отключить людей для копирования, попробуйте:
span.email {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
И HTML:
<span class="email">[email protected]</span>
И для защиты от ботов используйте CSS Codedirection:
<span style="unicode-bidi:bidi-override; direction: rtl;">
[email protected]
</span>
Ответ 9
-
Используйте API-интерфейс reCAPTCHA Mailhide
Использовать кодировщик
Кодировать URL-адрес сайта для преобразования электронной почты данных
Hide email using CSS trick (direction property)
Scramble the email - While coding HTML, jumble and write the email address in reverse direction. ([email protected] should be written as [email protected]). We can then use CSS stylesheet to reverse the email address againwhen rendering. Here the sample HTML code with CSS.
<style type="text/css">
.backwards {
unicode-bidi:bidi-override;
direction: rtl;
}
</style>
<span class="backwards">[email protected]</span>
If someone copies your email address, it will available in the reverse direction. Would not work on older browsers.
Как скрыть свой адрес электронной почты от спамеров с помощью JavaScript
Let look at more advanced methods that use javascipt to hide the email ([email protected]). Remember to use noscript tags since some users prefer to disable javascript in browsers:
- Основная электронная почта Script
<script language=JavaScript>
<!--
document.write("name" + "@" + "domain.com");
//--> </script>
2. Basic Mailto: Email Script with Link Text
<script language=JavaScript>
<!--
var user = "name";
var host = "domain.com";
var link = user + "@" + host;
document.write("<a hre" + "f=ma" + "ilto:" + user + "@" + host + ">" + link + "</a>");
//--> </script>
3. Inline JavaScript
<a href="#" onclick="JavaScript:window.location='mailto:'+'name'+'@'+'domain'+'.com'" >Send me an email</a>
- Внешний файл JavaScript
<script language="JavaScript" src="email-encoding.js"></script>
The external javascript contains the code mentioned in 2 above.
Ответ 10
В течение некоторого времени я использовал аналогичный метод JavaScript, который позволял использовать функцию mailto при сохранении HTML-кода:
HTML:
<a href="http://www.domain.com" class="js-contact">user</a>
JavaScript (небольшой плагин jQuery)
// mailto anti-spam
;(function($) {
$.fn.mailTo = function() {
this.each(function() {
var user = $(this).html() || false,
domain = $(this).attr('href')
.replace('http://www.', '')
.replace('www.', '')
.replace('http://', '')
.replace('/', '') || false;
if (user && domain) {
$(this).html(user + '@' + domain).attr('href', 'mailto:' + user + '@' + domain);
}
});
return this;
};
})(jQuery);
Использование
// protect inline e-mails
$('.js-contact').mailTo();
http://codepen.io/ced-anamorphik/pen/QwVrKZ
Однако в последнее время на веб-сайте Google Chrome появилось предупреждение о фишинге. Поскольку это не совсем неправильно (технически ссылка действительно подделана), есть ли еще одно простое решение?
Ответ 11
Flexbox позволяет вам изменять порядок элементов внутри содержащего элемента, мы можем использовать это для разделения и изменения порядка частей нашего адреса электронной почты в html, но представить их пользователю как разборчивое целое.
div {
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
}<div>
<span>example.com</span>
<span>@</span>
<span>george</span>
<span>Email me at the following address: </span>
</div>Ответ 12
Может быть, бесплатный онлайн-сервис, который вы реализуете самостоятельно? Вот ссылка: https://mailhide.io/