스패머는 요즘 엄청난 거래입니다. 스팸 이메일에 압도되지 않고 연락처 정보를 공유하려면 솔루션이 필요합니다. 몇 달 전에이 문제가 발생했습니다. 해결 방법을 연구하는 동안 다른 흥미로운 솔루션을 찾았습니다. 그 중 하나만이 내 필요에 완벽했습니다.
이 기사에서는 여러 솔루션을 사용하여 스팸 봇으로부터 이메일 주소를 쉽게 보호하는 방법을 보여 드리겠습니다. 귀하의 필요에 맞는 기술을 결정하는 것은 귀하에게 달려 있습니다.
차례
전통적인 경우
웹사이트가 있다고 가정해 보겠습니다. 연락처 세부 정보를 공유하고 소셜 링크만 공유하고 싶지는 않습니다. 이메일 주소가 있어야 합니다. 쉽죠? 다음과 같이 입력합니다.
<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 [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가 이메일 주소를 다시 읽을 수 있도록 합니다. 이런 식으로 사용자는 이메일 주소를 얻을 수 있습니다.
가장 쉬운 솔루션은 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를 활성화해야 합니다. 그렇지 않으면 링크가 비어 있습니다.
임베디드 양식 접근 방식
문의 양식은 어디에나 있습니다. 당신은 확실히 그들 중 하나를 적어도 한 번 사용했습니다. 사람들이 귀하에게 직접 연락할 수 있는 방법을 원할 경우 가능한 솔루션 중 하나는 귀하의 웹사이트에 문의 양식 서비스를 구현하는 것입니다.
폼스프레이 서버 측 코드에 대해 걱정하지 않고 문의 양식의 모든 이점을 제공하는 서비스의 한 예입니다. 우후 너무. 사실로, 여기 당신이 고려할 수있는 무리가 있습니다 연락처 양식 제출을 처리합니다.
양식 서비스를 사용하는 첫 번째 단계는 가입하고 계정을 만드는 것입니다. 물론 가격은 서비스 간에 제공되는 기능과 마찬가지로 다양합니다. 그러나 그들 대부분이 하는 한 가지는 웹사이트나 앱에 생성한 양식을 포함하기 위한 HTML 스니펫을 제공하는 것입니다. 다음은 내 Formspring 계정에서 만든 양식에서 직접 가져온 예입니다.
첫 번째 줄에서 사용자 정의해야 합니다. action 끝점을 기반으로 합니다. 이 양식은 매우 기본적이지만 원하는 만큼 필드를 추가할 수 있습니다.
9행의 숨겨진 입력 태그를 확인하세요. 이 입력 태그는 일반 사용자와 봇이 제출한 내용을 필터링하는 데 도움이 됩니다. 실제로 Formspree의 백엔드는 해당 입력이 채워진 제출물을 확인하면 이를 버립니다. 일반 사용자는 그렇게 하지 않으므로 봇이어야 합니다.
장점 :
- 귀하의 이메일 주소는 공개되지 않으므로 안전합니다.
- 자바스크립트가 비활성화된 상태에서 작동합니다.
단점 :
- 타사 서비스에 의존(필요에 따라 전문가일 수 있음)
이 솔루션에는 또 하나의 단점이 있지만 매우 주관적이고 사용 사례에 따라 다르기 때문에 목록에서 제외했습니다. 이 솔루션을 사용하면 이메일 주소를 공유하지 않습니다. 사람들에게 연락할 수 있는 방법을 제공하고 있습니다. 만약 사람들이 필요 이메일을 보내려면? 사람들이 귀하의 이메일 주소를 찾고 있는데 연락처 양식을 원하지 않는다면 어떻게 하시겠습니까? 이러한 상황에서 연락 양식은 강력한 해결책이 될 수 있습니다.
결론
우리는 끝에 도달했습니다! 이 튜토리얼에서는 온라인 이메일 공유 문제에 대한 다양한 솔루션에 대해 이야기했습니다. HTML 코드, JavaScript, 심지어 Formspree와 같은 일부 온라인 서비스와 관련된 다양한 아이디어를 통해 연락처 양식을 작성했습니다. 이 튜토리얼을 마치면 표시된 전략의 모든 장단점을 알고 있어야 합니다. 이제 특정 사용 사례에 가장 적합한 것을 선택하는 것은 귀하에게 달려 있습니다.
