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

> Clean Markdown view of GeekNews topic #14811. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=14811](https://news.hada.io/topic?id=14811)
- GeekNews Markdown: [https://news.hada.io/topic/14811.md](https://news.hada.io/topic/14811.md)
- Type: GN+
- Author: [neo](https://news.hada.io/@neo)
- Published: 2024-05-14T10:05:57+09:00
- Updated: 2024-05-14T10:05:57+09:00
- Original source: [rouninmedia.github.io](https://rouninmedia.github.io/protecting-your-email-address-via-svg-instead-of-js/)
- Points: 4
- Comments: 1

## Topic Body

- SVG를 이용한 이메일 주소 보호 기법
  - 실제 데모는 [SVG-based Email Protection](https://robweir.com/blog/2023/01/protecting-emails-via-svg.html) 링크 참조
  - 웹 페이지에 공개된 이메일 주소는 보통 이메일 수집 봇으로부터 보호가 필요함
  - 기존에는 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의 고급 기능을 활용하는 흥미로운 방식이지만, 실무에서 적용하기에는 아직 제약사항이 있어 보임. 하지만 프론트엔드 개발자라면 한 번쯤 테스트해볼 만한 재미있는 아이디어임.

## Comments



### Comment 25217

- Author: neo
- Created: 2024-05-14T10:05:57+09:00
- Points: 1

###### [Hacker News 의견](https://news.ycombinator.com/item?id=40340642) 
요약하면, 웹 페이지에 공개된 이메일 주소를 스팸봇으로부터 보호할 필요가 있는지에 대한 의견들은 다음과 같음:

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