이메일 주소 숨기기
웹 페이지에 이메일 주소를 그대로 노출하면 스팸 봇이나 승인되지 않은 사용자에게 수집될 위험이 있습니다. JavaScript를 활용하면 이메일 주소의 일부를 가려서(masking) 개인 정보를 보호할 수 있습니다. 아래 단계를 따라 구현해 보세요.
- 모든 이메일 주소에는 공통적으로 '@' 기호가 포함되어 있습니다. 따라서 split() 메서드를 사용해 이메일 주소를 '@' 기준으로 분리합니다. 예를 들어 batman@gmail.com을 분할하면 'batman'과 'gmail.com'이라는 두 개의 결과를 얻게 됩니다.
- 분할된 결과를 두 부분(split1과 split2)으로 나눕니다.
- substring() 메서드를 사용해 split1(사용자 이름 부분)의 일부 문자를 잘라내고, 잘라낸 자리를 '...@'로 채워 split2(도메인 부분)와 연결합니다.
- 연결된 문자열을 최종 결과로 반환합니다. 예제의 경우 최종 출력은 "bat...@gmail.com"이 됩니다.
이 방식은 원래 이메일 주소를 완전히 숨기지는 못하지만, 화면에 표시되는 형태만 변형하여 일반적인 크롤링 기법으로는 실제 주소를 쉽게 수집하지 못하도록 만드는 간단한 클라이언트 측 마스킹 기법입니다.
예제 코드
<html>
<body>
<script type="text/javascript">
newEmail = function (email) {
var split = email.split("@");
var split1 = split[0];
var avg = split1.length / 2;
split1 = split1.substring(0, (split1.length - avg));
split2 = split[1];
return split1 + "...@" + split2;
};
document.write(newEmail("batman@gmail.com"));
</script>
</body>
</html>실행 결과
bat...@gmail.com
위 코드의 동작 과정을 살펴보면, 먼저 split()으로 이메일을 분리한 후 사용자 이름 'batman'의 길이(6)를 반으로 나누어 3을 계산합니다. 그다음 substring()으로 앞부분 'bat'만 남기고 나머지를 제거한 뒤, '...@gmail.com'과 연결하여 최종적으로 'bat...@gmail.com'을 출력합니다. 이처럼 몇 줄의 코드만으로 이메일 주소를 간단히 가릴 수 있습니다.