Javascript CDN을 피해야 하는 이유

CDN(Content Delivery or Distribution Network)이란 

 

CDN은 콘텐츠를 분산하여 저장한 다음, 요청할 때마다 신속하게 전송해 주는 서버 집단을 말합니다. CDN은 웹사이트 로드 속도를 빠르게 해 준다는 이점이 있습니다. 웹사이트에 처음 접속했을 때 브라우저는 화면을 표시하기 위해 서버로부터 HTML, CSS, Javascript 등의 소스파일과 미디어 파일들을 다운로드하여야 합니다. 웹 서버로부터 물리적인 거리가 멀어질수록 전송 속도가 낮아지기 때문에 지역별로 속도의 차이가 발생하게 됩니다. CDN을 사용할 경우 전 세계에 있는 서버로 데이터가 분산되어 이런 속도 차이를 개선할 수 있습니다. 

더보기 (https://www.cloudflare.com/ko-kr/learning/cdn/what-is-a-cdn/)

javascript 라이브러리를 사용하기 위해서는 js 파일을 로드해주어야 합니다. 파일을 로컬에 다운로드한 다음, 다운로드한 위치로부터 로드할 수도 있고 아래와 같이 CDN 서버에 업로드된 파일 주소를 통해 로드할 수도 있습니다.

<script src="https://code.jquery.com/jquery-3.6.1.js"></script>

 

CDN을 이용할 경우 한 줄의 '복붙' 만으로도 간편하고 빠르게 사용이 가능하며, 동일한 url을 사용하는 모든 애플리케이션에서 브라우저 캐시에 있는 라이브러리를 찾을 수 있어 로딩 속도가 향상될 수 있습니다.

대표적인 Javascript CDN 서비스로는 cdnjs, jsdelivr, unpkg 이 있습니다.

 

이 좋은 걸 피하라고?

 

현재 전세계 웹 트래픽의 대부분이 CDN을 통한 것일 정도로 CDN은 해마다 성장을 거듭하고 있습니다. 하지만 Javascript 로드 시 CDN을 사용하는 것이 야기할 수 있는 문제점들에 대해서 지적하는 의견이 있어 소개하려고 합니다.

 

(1) 프라이버시와 보안

 

일반적으로 여러분이 웹사이트를 방문했다는 사실을 알 수 있는 것은 그 사이트의 운영자, 컴퓨터와 서버 사이 인터넷 인프라를 운영하는 사람뿐입니다. 하지만 웹사이트에서 Javascript CDN을 사용할 경우 CDN에서도 당신이 방문한 사실을 알 수 있게 됩니다.

"구글은 당신의 모든 것을 알고 있다" 라는 말은 공공연하게 알려진 사실입니다. 그만큼 구글 이용자가 많고, 구글에서 많은 정보를 수집하고 있거든요. 하지만 듣도 보도 못한 CDN 회사에서도 여러분이 웹 상에서 뭘 하고 다니는지 알 수 있다는 사실은 모르셨을 겁니다. 그들은 로그를 팔지는 않겠다고 하고 있습니다. 여러분은 그들이 갑자기 해킹을 당하지 않도록 기도해야 합니다. 하지만 개인 정보를 공공재라고 생각하는 한국인 입장에서 크게 공감이 되지는 않습니다. K* 도 털리는 걸요.

하지만 단순히 프라이버시의 문제를 넘어, CDN을 해킹함으로써 여러분에게 피해를 가할 수 있다는 점은 우려할 점입니다. 

 

(2) 시스템의 안정성

 

위에서 소개한 대형 javascript CDN 들은 전 세계적으로 수많은 사람들에 의해 사용되고 있습니다. 최근 카카오 사태를 통해 여러분이 경험했듯이 이렇게 많은 사람들이 사용하는 CDN에 장애가 발생하거나 해커에 의해 공격을 당할 경우 사회적인 혼란이 초래될 수 있습니다. 

 

(3) 속도

 

현대의 브라우저는 여러 도메인에서 CDN에 보내는 요청을 캐싱하지 않습니다. 이것이 사용자를 추적하는 데 사용될 수 있기 때문입니다. 누군가가 어떤 웹사이트에서 라이브러리를 다운로드하더라도 여러분의 웹사이트에서는 다시 다운로드를 하여야 합니다. 한편, 이 다시 다운로드하여야 하는 것이 프라이버시 문제를 해결해주지는 않습니다.

또 HTTP/2 나 HTTP/3을 사용할 경우 멀티플렉싱이 지원되기 때문에 웹사이트가 호스팅 되고 있는 동일한 장소에서 다운로드하는 것이 더 빠를 수 있습니다. DNS resolution*과 TLS setup**은 새로운 도메인으로의 첫 번째 연결을 로드하는 데 걸리는 시간을 좌우하곤 합니다. HTML과 동일한 서버에서 js 파일을 호스팅 할 경우 이런 문제점을 해결할 수 있습니다. 단일 연결을 사용할 수 있어 작은 파일의 경우 더 빠르게 됩니다. 

* DNS resolution : 공용 또는 개인 인터넷에 연결된 호스트에 IP주소를 매핑하는 프로세스

  더보기 (https://www.datadoghq.com/knowledge-center/dns-resolution/)

** TLS : Transport Layer Security, 전송 계층 보안. SSL의 개선된 버전으로, 인터넷 연결 시 사용되는 보안 프로토콜이다.

 

그래서 어쩌라고?

 

모든 경우에 있어서 그렇듯이, 명확한 정답이 있는 것은 아니고 CDN의 장단점을 고려하여 각자의 사정에 맞게 적절한 방법을 찾아야 하겠습니다.

하지만 단지 귀찮다는 이유로 CDN을 사용하는 것은 피해야 합니다. 필요한 라이브러리 파일들을 검색해서 다운로드하는 데 그리 긴 시간이 소요되는 건 아니니까요.

프라이버시가 걱정된다면 Decentraleyes와 같이 CDN 연결을 차단할 수 있는 확장 프로그램이 있습니다.

또 현대 웹 브라우저들이 제공하는 Subresource Integrity(SRI)가 있습니다. SRI는 여러분이 웹 애플리케이션을 통해서 가져온 파일들이 제삼자에 의해 조작, 변형되었는 지를 검증할 수 있습니다.

다만, SRI가 모든 경우에 작동하는 것은 아닙니다. 라이브러리가 여러 개의 파일로 쪼개져 있는 경우 하나의 메인 파일만이 지정된 SRI 해시를 갖도록 하거든요.

그럼에도 불구하고 CDN을 사용하는 경우라면 최소한 SRI 정도는 활용해야 합니다. 보안 측면에서 오로지 이점만이 있을 뿐이기 때문입니다. 그리고 언젠가는 이런 약점도 보완이 되겠죠.

 

 

참조 :

https://blog.wesleyac.com/posts/why-not-javascript-cdn

https://blog.bitsrc.io/boost-frontend-load-speed-using-cdn-7ae02cbbf492