▲

GN⁺: SVG를 통한 이메일 주소 보호 방식, JavaScript 대신 사용

 (rouninmedia.github.io)
4P by neo 6달전 | favorite | 댓글 1개

  • SVG를 이용한 이메일 주소 보호 기법

    • 실제 데모는 SVG-based Email Protection 링크 참조
    • 웹 페이지에 공개된 이메일 주소는 보통 이메일 수집 봇으로부터 보호가 필요함
    • 기존에는 HTML, CSS, JS의 조합을 이용한 기법들이 사용되었으나 각각 장단점이 있음
    • JS를 이용한 방식이 HTML/CSS 기반 대안들보다 더 정교하지만, JS가 해당 페이지의 필수 요소가 되는 단점이 있음
    • JS는 페이지를 개선할 수 있지만, 이상적으로는 JS가 꺼져 있어도 페이지의 모든 필수 기능이 동작하는 것이 좋음
    • 이 페이지에서 소개하는 기법은 CSS, JS, CSS+JS 등의 기존 이메일 보호 기법과는 전혀 다른 SVG 기반 접근 방식을 사용함

  • SVG 기반 이메일 주소 보호 기법의 3가지 장점

    1. JavaScript가 꺼져 있어도 동작
      • SVG 기반 접근 방식의 주요 장점은 JS가 전혀 필요 없다는 것
      • 방문자가 JS를 끄더라도 페이지에 표시된 이메일 주소는 사용 가능하고 접근 가능하며 보호되면서도 안전하고 스팸봇으로부터 숨겨짐
    2. 표준 mailto: 링크 사용 가능
      • 다른 JS가 필요없는 방식들(HTML 주석 삽입, 요소 숨김 등)과 달리 SVG 기반 방식은 표준 mailto: 링크 사용이 가능함
      • 단, mailto: 링크는 참조하는 HTML 문서 내부가 아니라 외부 SVG 문서 내부에 존재함
    3. 이미지처럼 내용을 감추면서도 텍스트처럼 복사 가능
      • 임베디드 SVG는 이미지와 비슷하지만 이미지는 아님
      • 하이퍼텍스트 문서에 임베디드된 대체 요소로서 SVG는 이미지만큼 효과적으로 이메일 주소를 스팸봇으로부터 감출 수 있음
      • 하지만 SVG는 엄밀히 말해 실제 이미지가 아니라 그래픽 문서임
      • 따라서 이미지와 달리 임베디드 SVG의 <text> 요소를 우클릭하여 이메일 주소를 복사할 수 있음

  • 코드 구현

    • 예제는 2개 파일로 구성됨
    • SVG 그래픽 문서는 HTML 하이퍼텍스트 문서에 <object> 태그를 이용해 임베디드됨
    • 동일한 SVG 그래픽 문서를 하이퍼텍스트에 한 번 또는 여러 번 임베드할 수 있음
    • HTML 파일과 SVG 파일 코드 예제 포함

  • 접근성 고려사항

    • 이 설정이 가능한 한 접근 가능한 상태로 유지되도록 하는 것이 중요함
    • 이를 위해 SVG 그래픽 문서에서 다음 사항 주의:
      • 전체 SVG 문서는 SVG 문서 <title>에 의해 aria-labelledby 되어 액션 호출을 나타냄
      • SVG 내부 앵커 요소 <a>에는 동일한 액션 호출을 하는 aria-label이 있음
      • SVG는 앵커 요소 <a>에 탭 포커스가 있을 때 자식 요소인 <rect>와 <text>가 모두 강조 표시되도록 스타일링됨

GN⁺의 의견

  • HTML 문서에서 SVG를 임베드하여 JS 의존성 없이 스팸봇으로부터 이메일 주소를 숨기는 독특한 접근 방식임. 접근성과 사용성을 함께 고려한 흥미로운 기법으로 보임.
  • 하지만 아무리 정교한 프론트엔드 기술을 사용해도 가장 정교한 스팸봇을 완벽히 막을 수는 없다는 점은 유의해야 함. 이는 어떤 보안 솔루션에나 적용되는 한계점.
  • 이 기법의 실무 도입을 위해서는 SEO에 미치는 영향, 다양한 브라우저/디바이스 호환성, 퍼포먼스 등 추가적인 검증이 필요할 것으로 보임.
  • 이메일 보호를 위한 백엔드 솔루션으로는 reCAPTCHA, Honeypot 기법 등도 함께 고려해볼 만함.
  • CSS와 SVG의 고급 기능을 활용하는 흥미로운 방식이지만, 실무에서 적용하기에는 아직 제약사항이 있어 보임. 하지만 프론트엔드 개발자라면 한 번쯤 테스트해볼 만한 재미있는 아이디어임.
▲
neo 6달전  [-]
Hacker News 의견

요약하면, 웹 페이지에 공개된 이메일 주소를 스팸봇으로부터 보호할 필요가 있는지에 대한 의견들은 다음과 같음:

  • 오랫동안 웹사이트에 이메일 주소를 공개했지만, 스팸 필터가 잘 작동하여 스팸 문제가 크지 않음
  • Gmail과 로컬 회사에서 호스팅하는 웹메일 모두 스팸 필터링이 잘 되고 있음
  • 하루에 15개 정도의 스팸 메일이 도착하지만, Purelymail 덕분에 큰 문제가 되지는 않음
  • 정작 문제는 관련 없는 트랜잭션 이메일, 뉴스레터 정크 스팸, 사용되지 않는 소셜 네트워크 알림 등임
  • 요즘 스팸 필터가 잘 되어서 이메일 주소를 공개해도 스팸 증가는 크지 않음
  • 하루에 1개 미만의 스팸 메일이 받은편지함에 도착하는 것은 괜찮은 수준임
  • 이메일 제공업체와 스팸 필터에 따라 다를 수 있지만, 개인적으로는 문제되지 않음
  • Firefox의 NoScript로는 <object> 태그가 렌더링되지 않아 이 기술이 작동하지 않음
  • "이메일 보호"는 무의미할 뿐 아니라 오히려 해롭기까지 함
  • JS 없이도 잘 읽히는 사이트에서 1920x1080@60Hz가 [email protected]로 표시되는 문제가 있음
답변달기