Cloudflare가 이메일 난독화 스크립트를 수정했습니다 (제가 원인일 수도 있습니다)
Cloudflare의 이메일 난독화 스크립트는 과거에 렌더링을 차단했습니다. Cloudflare의 한 PM이 이 기사를 읽고 수정 사항을 배포했습니다. SEO 및 보안 문제는 여전히 피할 가치가 있습니다.
Cloudflare 이메일 난독화란 무엇인가요?
Cloudflare 이메일 주소 난독화는 페이지의 이메일 주소를 이메일 수집기 및 봇으로부터 숨기면서 실제 방문자에게는 표시되도록 하는 Scrape Shield 기능입니다. 모든 Cloudflare 영역에서 기본적으로 활성화되어 있습니다.
2026년 4월 Arjen Karel의 최종 검토 완료
Table of Contents!
2026년 4월 업데이트: Cloudflare가 이 문제를 수정했습니다. Cloudflare의 한 프로덕트 매니저가 LinkedIn을 통해 저에게 메시지를 보냈습니다. 그는 이 기사를 읽고 email-decode.min.js에 defer 속성을 추가했습니다. 이제 Cloudflare의 공식 문서에서도 이를 확인하고 있습니다: 스크립트가 더 이상 렌더링을 차단하지 않습니다.
Defer는 단 한 줄의 변경입니다. 처음부터 이 속성이 없었던 이유는, Cloudflare가 DOMContentLoaded 이전에 주소 디코딩에 의존하는 사이트가 손상되지 않음을 확인하고 싶었기 때문일 것입니다. 팀의 누군가가 이 작업을 해냈습니다. 그들의 노력에 감사해야 합니다.
작동 방식은 간단합니다. Cloudflare의 엣지 프록시는 사용자의 HTML을 스캔하여 이메일 주소처럼 보이는 것을 찾습니다. 각 주소를 XOR 인코딩된 16진수 문자열로 바꾸고, 브라우저에서 주소를 디코딩하기 위해 email-decode.min.js라는 작은 스크립트를 주입합니다. 이 스크립트는 약 1.2KB 크기이며, 이제 defer 속성으로 로드되고 실행 후 DOM에서 스스로를 제거합니다.
최근까지 이 스크립트는 async나 defer 속성 없이 로드되었습니다. 이는 렌더링을 차단했습니다. 그리고 대부분의 방문자가 눈치채거나 필요로 하지 않는 기능을 위해 렌더링을 차단했습니다. 이것이 이 기사에서 원래 설명했던 상황이며, Cloudflare가 수정한 이유입니다.
과거에 Cloudflare 이메일 난독화가 Core Web Vitals에 미쳤던 영향
defer 수정 이전에 email-decode.min.js 스크립트는 렌더링 차단 리소스로 주입되었습니다. 브라우저는 페이지 렌더링을 계속하기 전에 스크립트를 다운로드하고, 파싱하고, 실행해야 했습니다. 이는 세 가지 결과를 낳았습니다:
1. 중요한 렌더링 기간 동안 네트워크 대역폭을 두고 경쟁하여 Largest Contentful Paint를 지연시켰습니다.
2. 메인 스레드를 차단하여, Interaction to Next Paint 지표를 "개선 필요" 영역으로 밀어낼 수 있었습니다.
3. 최대 5개의 Lighthouse 감사 경고를 유발했습니다: 렌더링 차단 리소스 제거, 긴 메인 스레드 작업 방지, JavaScript 실행 시간 단축, 중요 요청 체인 방지, 효율적인 캐시 정책으로 정적 자산 제공.
이제 defer가 적용되면서, 스크립트는 HTML 파싱과 병렬로 다운로드되고 문서 파싱이 완료된 후 실행됩니다. 렌더링 차단 경고가 사라졌습니다.
수정 후 남은 문제
메인 스레드는 여전히 1.2KB의 JavaScript를 파싱하고 실행해야 합니다. 데스크탑에서는 아무것도 아니지만, CPU 사용량이 많은 저사양 Android 휴대폰에서는 모든 작은 메인 스레드 작업이 INP 예산을 갉아먹습니다. 이미 마지막 50ms의 INP 여유를 두고 싸우고 있다면, 이 스크립트는 대기열에 추가되는 또 하나의 짐입니다.
Cloudflare가 수정하지 않은 더 큰 문제들은 아래와 같습니다.
SEO 부작용
Cloudflare는 이메일 주소를 /cdn-cgi/l/email-protection#[hex]를 가리키는 링크로 바꿉니다. 이 URL은 Googlebot을 포함한 크롤러에게 404를 반환합니다. 결과적으로 Google Search Console에 "소프트 404(Soft 404)" 오류가 발생합니다. Ahrefs나 Screaming Frog 같은 SEO 감사 도구는 이를 손상된 내부 링크로 보고하여, 실제 크롤링 문제를 가리는 노이즈를 만듭니다. 이메일 난독화가 활성화된 Cloudflare를 사용 중이라면 Search Console 적용 범위 보고서에서 이러한 유령 오류를 확인해 보세요.
Cloudflare 이메일 난독화가 보안에 도움이 되긴 하나요?
그렇지 않습니다. Cloudflare는 인코딩된 문자열 자체에 키가 포함된 1바이트 XOR 암호를 사용합니다. Cloudflare로 보호되는 모든 사이트는 동일한 디코딩 메커니즘을 사용합니다. 스패머는 모든 사이트에서 이메일 주소를 추출하기 위해 디코더를 한 번만 구현하면 됩니다.
보안 연구자들은 인코딩이 아주 쉽게 되돌려질 수 있음을 입증했습니다. Spencer Mortensen의 2026년 난독화 연구에서는 허니팟 이메일 주소를 사용하여 300명 이상의 다양한 스패머를 대상으로 25가지 다른 방법을 테스트했습니다. 단순한 CSS display:none 기술조차 이메일 수집기에 대해 100% 차단율을 달성했습니다. 봇으로부터 이메일 주소를 숨기기 위해 지연된 JavaScript가 필요하지 않습니다.
그럼에도 계속 비활성화해야 할까요?
이메일 난독화가 필요하지 않다면(대부분의 사이트는 그렇지 않습니다), 기능을 끄는 것이 소프트 404 크롤링 오류와 마지막 몇 밀리초의 메인 스레드 작업을 제거해 줍니다. 방법은 다음과 같습니다:
1. Cloudflare 대시보드에 로그인합니다.
2. Security > Settings (이전 대시보드 레이아웃의 경우 Scrape Shield)로 이동합니다.
3. Email Address Obfuscation을 OFF로 전환합니다.
이게 전부입니다. 스크립트는 즉시 사라집니다. 전체 Cloudflare 성능 구성에 대해서는 Core Web Vitals를 통과하기 위한 최고의 Cloudflare 구성을 참조하세요.
Configuration Rules를 사용하여 페이지별로 비활성화하기
문의 페이지에는 이메일 난독화를 적용하고 싶지만 트래픽이 많은 랜딩 페이지에는 적용하고 싶지 않다면, Configuration Rule을 사용하세요:
1. Rules > Configuration Rules로 이동합니다.
2. 새 규칙을 만들고 이름을 지정합니다(예: "랜딩 페이지에서 이메일 난독화 비활성화").
3. 일치 기준(호스트 이름, URL 경로 또는 둘 다)을 설정합니다.
4. Email Obfuscation 설정을 추가하고 Off로 설정합니다.
5. 배포합니다(Deploy).
또한 이메일 주소를 주석으로 감싸 HTML에서 개별적으로 예외 처리할 수도 있습니다: <!--email_off-->email@example.com<!--/email_off-->
난독화가 필요하다면: 직접 하세요
봇으로부터 이메일 주소를 숨기고 싶다면, 사용자가 관심을 보이기 전에는 스크립트를 전송하지 않는 훨씬 더 나은 방법들이 있습니다. 가장 좋은 방법은: IntersectionObserver를 연결하고 화면에 스크롤될 때 적시에 이메일을 디코딩하는 것입니다. 이것은 YouTube 임베드부터 Google Maps에 이르기까지 제가 모든 것에 사용하는 동일한 필요할 때까지 지연(defer until needed) 패턴입니다.
난독화된 이메일 생성하기
<a
class="email-hidden"
href="#"
data-email="aW5mb0BleGFtcGxlLmNvbQ==">
[email-hidden]
</a> IntersectionObserver를 연결합니다. 페이지 하단에 이 JavaScript 코드를 배치하세요.
<script>
const emailtag = document.querySelector('.email-hidden');
let observer = new IntersectionObserver((entries) => {
entries.map((entry) => {
if (entry.isIntersecting) {
let script = document.createElement('script');
script.onload = function () {
emaildecode(entry.target)
};
script.src = 'decode-email.js';
document.head.appendChild(script);
}
});
}).observe(emailtag);
</script>
이메일 디코딩 스크립트 decode-email.js를 업로드하고 이메일 디코딩 함수를 원하는 디코딩 라이브러리로 바꾸세요.
const emaildecode = (e) => {
let email = atob(e.dataset.email);
e.href = 'mailto:'+email;
e.innerHTML = email;
}
결과 확인하기
<a href="mailto:info@example.com">info@example.com</a> 이메일은 방문자가 화면에 보이게 스크롤할 때만 디코딩됩니다. INP에 미치는 영향은 0이고, Googlebot에 대한 소프트 404 오류가 발생하지 않으며, base64 인코딩은 Cloudflare의 XOR 암호 못지않게 안전합니다. 실제 방문자로 개선을 확인하려면 Real User Monitoring을 설정하세요. Lighthouse 점수는 디버깅에 유용하지만 Google이 순위를 매기는 데 사용하는 것은 실제 사용자의 필드 데이터입니다.
