tl; dr
스크립트를 사용하지 않고 봇으로부터 이메일 주소를 숨기고 mailto:기능을 유지 합니다. 메서드는 화면 판독기도 지원해야합니다.
요약
-
스크립트 또는 문의 양식 을 사용 하지 않고 이메일 난독 화
-
이메일 주소는 사람이 보는 사람 이 완전히 볼 수 있어야 하고
mailto:기능을 유지해야 합니다. -
이메일 주소 는 이미지 형식이 아니어야합니다 .
-
이메일 주소 는 스팸 크롤러, 스팸 봇 및 기타 수집기 유형 으로부터 “완전히”숨겨져 야 합니다.
원하는 효과 :
-
스크립트가 없습니다 . 프로젝트에 사용 된 스크립트가 없으며 그대로 유지하고 싶습니다 .
-
이메일 주소는 페이지에 표시 되거나 모달 열기와 같은 일종의 사용자 상호 작용 후에 쉽게 표시 될 수 있습니다.
-
사용자는 이메일 주소를 클릭 할 수있는 차례대로 실행할 것입니다
mailto:기능을. -
이메일을 클릭하면 사용자의 이메일 애플리케이션이 열립니다.
즉,
mailto:기능이 작동해야합니다. -
표시되지 않거나 봇에 대한 이메일 주소로 식별되지 않는 이메일 주소 (페이지 소스 포함)
-
스팸으로 가득 찬받은 편지함이 없습니다.
작동 하지 않는 것
-
이메일 주소 대신 문의 양식 또는 이와 유사한 내용 추가
문의 양식이 싫습니다 . 문의 양식을 거의 작성하지 않습니다. 이메일 주소가 없으면 전화 번호를 찾고없는 경우 대체 서비스를 찾기 시작합니다. 꼭 필요한 경우에만 문의 양식을 작성하겠습니다.
-
주소 이미지로 주소 바꾸기
이것은 스크린 리더를 사용하는 사람 에게 큰 불이익을 줍니다 (향후 프로젝트에서 시각 장애인을 기억하십시오 )
또한 이미지를 클릭 할 수 있도록 설정 한 다음 링크에 대한 기능 을 추가하지 않는 한 기능 을 제거 하지만이
mailto:기능 은 목적 을 무효화 하고 이제 이메일이 봇에게 표시됩니다.mailto:href
효과가있는 것 :
-
의 영리한 사용
pseudo-elements에CSS -
base64인코딩 을 사용하는 솔루션 -
헤어지는 사용자가 버튼을 (이것은 아마도 다수 포함 할 것이다 클릭하면 이메일 주소와 문서에서 부품을 확산 다음 모달 함께 다시 퍼팅
CSS클래스와의 사용을anchor tags) -
다음을
html통해 속성 변경CSS@MortezaAsadi는 아래 댓글에서 우아하게 가능성을 제시했습니다. 이것은 전체에 대한 링크입니다-이 기사는 2012 년입니다 :
-
내 지식 범위를 벗어난 다른 창의적인 솔루션.
유사한 질문 / 수정
(이것은 Joe Maller가 제안한 훌륭한 수정 입니다 . 잘 작동하지만 스크립트 기반 입니다. 다음과 같이 보입니다.
<SCRIPT TYPE="text/javascript">
emailE = 'emailserver.com'
emailE = ('yourname' + '@' + emailE)
document.write('<A href="mailto:' + emailE + '">' + emailE + '</a>')
</script>
<NOSCRIPT>
Email address protected by JavaScript
</NOSCRIPT>-
(A 영리한 솔루션은 모두 사용
PHP하고CSS처음에 반대 를 사용하여 이메일을 PHP는 다음 그것을 역 CSS와 다시) 좋은 작품을 매우 유망한 솔루션! 그러나 해결하기 가 너무 쉽습니다 . -
(자바 스크립트 수정)
-
웹 사이트에서 전자 메일 주소를 난독 화하는 가장 좋은 방법은 무엇입니까?
선택한 답변이 작동합니다 . 실제로 정말 잘 작동합니다. 이메일을
html entities. 개선 할 수 있습니까?다음은 그 모습입니다.
<A HREF="mailto: yourname@domain.com"> yourname@domain.com </A> -
(이 수퍼 유저 질문에 대한 선택된 답변은 훌륭하며 다양한 난독 화 방법을 사용하여 수신 된 스팸의 양에 대한 연구를 제공합니다.
과 이메일 주소를 조작하는 것 같다
CSS그것을 만들기 위해rtl작업을 수행합니다. 이것은이 섹션에서 링크 한 첫 번째 질문에서 사용한 것과 동일한 방법입니다.mailto:수정에 기능을 추가하는 것이 결과에 어떤 영향을 미칠지 확실하지 않습니다. -
비슷한 대답을 가진 SO에 대한 다른 많은 질문도 있습니다 . 원하는 효과에 맞는 것을 찾지 못했습니다.
질문:
두 개 이상의 수정 사항 을 결합 (또는 새 수정 사항 추가)하여 위의 이메일 난독 화 방법 의 효율성 (즉, 가능한 한 적은 스팸) 을 높일 수 있습니까 ?
A- mailto:기능 유지 ; 과
B- 지원 화면 판독기
편집하다:
아래 의 많은 답변과 의견 은 매우 좋은 질문을 던지면서 일종의js
묻거나 암시 하는 질문 은 다음과 같습니다.
왜 사용하지
js않습니까?
대답은 내가 알레르기가 있다는 것입니다. js
하지만 농담은 제쳐두고
이 질문을 한 세 가지 주요 이유는 다음과 같습니다.
-
연락 양식은 이메일 주소를 제공하는 대신에 점점 더 많이 받아 들여지고 있습니다.
-
스크립팅없이 수행 할 수있는 경우 스크립팅 없이 수행해야합니다 .
-
호기심 : (실제로
js현재 수정 사항 중 하나를 사용하고 있기 때문에 ) 문제를 논의하는 것이 더 나은 방법으로 이어질 수 있는지 확인 하고 싶었 습니다.
답변
귀하의 요청에 대한 문제는 구체적으로 “화면 판독기 지원”입니다. 정의에 따라 화면 판독기는 일종의 “봇”입니다. 스크린 리더가 이메일 주소를 해석 할 수 있어야하는 경우 페이지 크롤러도이를 해석 할 수 있습니다.
또한 mailto속성 의 요점은 웹에서 이메일 주소를 수행하는 방법의 표준이되는 것입니다. 두 번째 방법이 있는지 묻는 것은 두 번째 표준이 있는지 묻는 것과 같습니다.
스크립트를 통해 수행하면 페이지가로드되면 스크립트가 실행되고 DOM에서 렌더링 된 이메일 주소와 동일한 문제가 발생합니다 (이메일 주소 등을 채우지 않는 한 on click). 어느 쪽이든 스크린 리더는 아직로드되지 않았기 때문에이 문제가 계속 발생합니다.
솔직히, 스팸 필터가 반쯤있는 이메일 서비스를 받고받은 편지함에서 쉽게 정렬 할 수있는 기본 제목을 지정하세요.
<a href="mailto:no-one@no-where.com?subject=Something to filter on">Email me</a>
당신이 요구하는 것은 표준에 두 가지 방법이 있는지, 하나는 봇용이고 다른 하나는 비 봇용입니다. 대답은 그렇지 않다는 것이며 가능한 한 최선을 다해 봇과 싸워야합니다.
답변
이메일 봇을 물리 치는 것은 어려운 일입니다. Wikipedia 의 Email Address Harvesting 대책 섹션 을 확인하는 것이 좋습니다.
제 배경 이야기는 검색 봇을 작성했다는 것입니다. 수년 전에 처음 실행되는 동안 105,000 개 이상의 URL을 크롤링했습니다. 내가 배운 것은 웹 크롤링 봇이 말 그대로 웹 페이지에 나타나는 텍스트 인 모든 것을 본다는 것입니다. 봇은 이미지를 제외한 모든 것을 읽습니다.
스팸은 다음과 같은 이유로 코드를 통해 쉽게 차단할 수 없습니다.
-
mailto : 태그를 사용할 때 CSS와 JS는 관련이 없습니다. 봇은 특히 해당 “mailto :”키워드에 대한 HTML 페이지를 확인합니다. 콜론에서 다음 작은 따옴표 나 큰 따옴표 (둘 중 먼저 오는 것)까지 모든 것이 이메일 주소로 표시됩니다. 위의 예와 같이 HTML 엔티티 이메일 주소는 역 ASCII 방법 / 기능을 사용하여 빠르게 번역 할 수 있습니다. 위의 자바 스크립트 코드 스 니펫을 실행하면 & # 121; & # 111; & # 117; & # 114; …로 시작하는 문자열이 ‘yourname@domain.com’으로 빠르게 바뀝니다. (내 검색 봇은 이메일 주소가 아닌 웹 페이지의 URL을 원했기 때문에 mailto : email 주소로 hrefs를 버렸습니다.)
-
페이지가 봇과 충돌하는 경우 봇 작성자는 해당 페이지를 염두에두고 충돌을 수정하도록 봇을 조정하여 봇이 나중에 해당 페이지에서 다시 충돌하지 않도록합니다. 따라서 봇을 더 똑똑하게 만듭니다.
-
봇 작성자는 페이지를 크롤링하지 않고 시작 이메일 주소를 사용하지 않고 알려진 모든 이메일 주소 변형을 생성하는 봇을 작성할 수 있습니다. 그렇게하는 것이 불가능할 수도 있지만, 오늘날의 높은 코어 수 CPU (하이퍼 스레드이며 4GHz 이상에서 실행 됨)와 분산 클라우드 기반 컴퓨팅 및 심지어 슈퍼 컴퓨터를 사용할 수 있다는 점은 상상할 수없는 일입니다. 이제 누군가의 이메일 주소를 몰라도 모든 사람에게 스팸을 보내는 봇 팜을 만들 수 있습니다. 20 년 전에는 이해할 수 없었을 것입니다.
-
무료 이메일 제공 업체는 무료 사용자 계정을 광고주에게 판매 한 적이 있습니다. 과거에는 무료 이메일 계정에 가입하기 만하면 자동으로 해당 이메일 주소로 스팸을 전달하기 시작하는 녹색 표시등이 보장되었습니다. 나는 유명한 회사 이름으로 여러 번 일어나는 것을 보았다. (이름은 언급하지 않겠습니다.)
-
mailto : 키워드는이 IETF RFC의 일부입니다 . 여기서 브라우저는 해당 키워드가있는 링크에서 기본 이메일 클라이언트를 자동으로 실행하도록 빌드됩니다. 응용 프로그램 시작 프로세스가 발생하면 JavaScript를 사용하여 해당 프로세스를 중단해야합니다.
이메일 서버에서 필터를 사용하지 않고 이미지를 사용하지 않고 기존 이메일 서버를 사용하면서 스팸을 100 % 차단할 수 없다고 생각합니다.
한 가지 대안이 있습니다. 웹 사이트에서 내부적으로 실행되는 채팅과 유사한 이메일 클라이언트를 구축 할 수도 있습니다. Facebook의 채팅 클라이언트와 같습니다. “일종의 이메일”이지만 실제로는 이메일이 아닙니다. 로그인시 자동로드되는 보관 기능이있는 일대일 인스턴트 메시징입니다. 문서 첨부 + 링크 기능이 있기 때문에 이메일처럼 작동하지만 스팸은 없습니다. 외부에서 액세스 할 수있는 API를 구축하지 않는 한, 사람들이 스팸을 보낼 수없는 폐쇄 형 시스템입니다.
엄격하게 전통적인 이메일을 고수 할 계획이라면 회사 이메일 서버에서 Apache의 SpamAssassin 과 같은 것을 실행하는 것이 가장 좋은 방법 일 수 있습니다 .
또한 위에 나열된 여러 전략을 결합하여 이메일 수집기가 웹 페이지에서 이메일 주소를 수집하기 어렵게 만들 수 있습니다. 그들은 100 % 스팸을 100 % 차단하지 않을 것이며, 스크린 리더의 100 %가 시각 장애인을 위해 작동하도록 허용합니다.
기존 이메일의 문제점에 대해 정말 좋은 출발점을 만들었습니다! 그것에 대한 당신의 명성!
좋은 스크린 리더는 Freedom Scientific의 JAWS 입니다 . 나는 시각 장애인이 내 웹 페이지를 읽는 방법을 듣기 위해 전에 그것을 사용했습니다. (링크 클릭 등)과 텍스트를 모두 읽는 남성 음성이 들리면 1 음성을 여성으로 변경하여 1 음성은 동작을 읽고 다른 음성은 텍스트를 읽습니다. 그러면 웹 페이지를 읽는 방법을 더 쉽게들을 수 있습니다. 시각 장애인.)
답변
다음은 JavaScript를 사용하는 접근 방식이지만 약간의 공간을 차지합니다. 또한 매우 “빈민가”이며 일반적으로 JS 사용을 극도로 꺼리는 경우를 제외하고는 HTML에서 인라인 JS로 접근하는 것을 권장하지 않습니다.
<a
href="#"
data-contact="bGUtZW1haWxAdGhlLWRvbWFpbi5jb20="
data-subj="QW4gQW1hemluZyBTdWJqZWN0"
onfocus="this.href = 'mailto:' + atob(this.dataset.contact) + '?subject=' + atob(this.dataset.subj || '')"
>
Send an email
</a>data-contactbase64로 인코딩 된 이메일 주소입니다. 그리고 data-subj선택적 base64 인코딩 주제입니다.
JS없이이 작업을 수행 할 때의 주요 과제는 CSS가 HTML 속성을 변경할 수 없다는 것입니다. ( 귀하가 링크 한 기사 는 “하늘 속의 파이”이며 현재 또는 가까운 장래에 가능한 일과는 아무런 관련이 없습니다.)
언급 한 HTML 엔티티 접근 방식 또는 일부 변형은 효과가있는 가장 간단한 옵션 일 수 있습니다. 또한 iframe접근 방식 은 영리하고 서버 리디렉션 접근 방식 은 매우 훌륭합니다. 그러나 세 가지 모두 봇에 취약합니다.
- HTML 엔티티는 변환 하기 만하면됩니다 (그리고 간단하게 감지).
- iframe에서 참조하는 문서 는 단순히 따라갈 수 있습니다.
- 단순히 서버 리디렉션을 따를 수도 있습니다.
위에서 설명한 접근 방식을 사용하면 data-contact속성 에서 base64로 인코딩 된 이메일 주소를 사용하는 것은 매우 “일회성”입니다. 스크래퍼가 사이트에 맞게 특별히 설계되지 않은 한 작동합니다.
답변
단순 + 많은 @ + 도구없이 편집 가능
<a href="mailto:user@domain@@com"
onmouseover="this.href=this.href.replace('@@','.')">
Send email
</a>답변
Google의 recaptcha mailhide 사용을 고려해 보셨습니까?
https://www.google.com/recaptcha/admin#mailhide
사용자가 확인란을 클릭하면 ( 아래의 nocaptcha 참조 ) 전체 전자 메일 주소가 표시됩니다.
recaptcha는 전통적으로 스크린 리더뿐만 아니라 인간에게도 어렵지만 접근성 테스트와 관련하여 여기 에서 읽을 수있는 Google의 nocaptcha recaptcha의 역할이 있습니다
. 화면 판독기의 관점에서 전통적인 확인란으로 렌더링하기 때문에 화면 판독기와 관련하여 유망한 것으로 보입니다.
예 # 1-안전하지는 않지만 아이디어를 쉽게 설명하기 위해
다음은 mailhide를 사용하지 않고 직접 recaptcha를 사용하여 구현하는 몇 가지 코드입니다. https://jsfiddle.net/43fad8pf/36/
<div class="container">
<div id="recaptcha"></div>
</div>
<div id="email">
Verify captcha to get e-mail
</div>
function createRecaptcha() {
grecaptcha.render("recaptcha", {sitekey: "6LcgSAMTAAAAACc2C7rc6HB9ZmEX4SyB0bbAJvTG", theme: "light", callback: showEmail});
}
createRecaptcha();
function showEmail() {
// ideally you would do server side verification of the captcha and then the server would return the e-mail
document.getElementById("email").innerHTML = "email@something.com";
}
참고 : 내 예에서는 javascript 함수에 전자 메일이 있습니다. 이상적으로는 서버 측에서 recaptcha의 유효성을 검사하고 전자 메일을 반환합니다. 그렇지 않으면 봇이 코드에서 간단히 가져올 수 있습니다.
예제 # 2-서버 측 유효성 검사 및 전자 메일 반환
이와 같은 예제를 더 사용하면 추가 보안이 제공됩니다. https://designracy.com/recaptcha-using-ajax-php-and-jquery/
function showEmail() {
/* Check if the captcha is complete */
if ($("#g-recaptcha-response").val()) {
$.ajax({
type: ‘POST’,
url: "verify.php", // The file we’re making the request to
dataType: ‘html’,
async: true,
data: {
captchaResponse: $("#g-recaptcha-response").val() // The generated response from the widget sent as a POST parameter
},
success: function (data) {
alert("everything looks ok. Here is where we would take 'data' which contains the e-mail and put it somewhere in the document");
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("You’re a bot");
}
});
} else {
alert("Please fill the captcha!");
}
});
verify.php는 다음과 같습니다.
$captcha = filter_input(INPUT_POST, ‘captchaResponse’); // get the captchaResponse parameter sent from our ajax
/* Check if captcha is filled */
if (!$captcha) {
http_response_code(401); // Return error code if there is no captcha
}
$response = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=YOUR-SECRET-KEY-HERE&amp;response=" . $captcha);
if ($response . success == false) {
echo ‘SPAM’;
http_response_code(401); // It’s SPAM! RETURN SOME KIND OF ERROR
} else {
// Everything is ok, should output this in json or something better, but this is an example
echo 'email@something.com';
}
답변
스크레이퍼를 작성하는 사람들은 스크레이퍼를 가능한 한 효율적으로 만들고 싶어합니다. 따라서 스타일, 스크립트 및 기타 외부 리소스를 다운로드하지 않습니다. mailtoCSS를 사용하여 링크 를 설정하는 방법은 없습니다 . 또한 Javascript를 사용하여 링크를 설정하고 싶지 않다고 구체적으로 말했습니다.
다른 유형의 리소스에 대해 생각한다면 외부 문서 (예 : iframe을 사용하는 HTML 문서)도 있습니다. 거의 모든 스크레이퍼가 iframe의 콘텐츠를 다운로드하는 것을 방해하지 않습니다. 따라서 다음을 수행 할 수 있습니다.
index.html :
<iframe src="frame.html" style="height: 1em; width: 100%; border: 0;"></iframe>
frame.html :
My email is <a href="mailto:me@example.com" target="_top">me@example.com</a>
인간 사용자에게 iframe은 일반 텍스트처럼 보입니다. Iframe은 기본적으로 인라인이며 투명하므로 테두리와 크기 만 설정하면됩니다. 자바 스크립트를 사용하지 않으면 iframe의 크기를 콘텐츠의 크기와 일치시킬 수 없으므로 우리가 할 수있는 최선은 미리 정의 된 크기를 제공하는 것입니다.
답변
첫째, CSS로 아무것도 할 수 없다고 생각합니다. 모든 봇 (Google 크롤러 제외)은 웹 사이트의 모든 스타일을 무시합니다. 모든 솔루션은 JS 또는 서버 측에서 작동해야합니다.
서버 측 솔루션은 <a>단순히 원하는 페이지로 리디렉션되는 새 탭으로 연결되는 링크를 만들 수 있습니다 mailto.
그게 지금 제 생각입니다. 도움이 되었기를 바랍니다.
