외부 CDN의 위험성

# 외부 CDN의 위험성

회사에선 UI 라이브러리로 vuetify2를 사용 중이다.

공식 홈페이지에서는 폰트나 Material Design 아이콘을 사용하기 위해 외부 CDN을 연결하는 방법을 제시하고 있다.

📌 문제 상황

오늘 회사 서비스에 Material Design 아이콘이 제대로 나오지 않고, 폰트도 깨지는 현상이 발생했다.

원인은 사용하고 있는 외부 CDN 서비스(jsdelivr)에서 발생한 문제였다.

확인해보니, jsdelivrd에서 ssl 인증서 만료됐는데 갱신되지 않아 발생한 이슈였다.

 

[문제의 코드]

 <link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">

 

에러화면

 

 

📌 해결 방법

✅ 방법1. 해당 스크립트를 다운받아 웹서버에서 제공하는 방식 (<- 나의 해결방법)

CDN에서 제공하는 아이콘,폰트 관련 파일을 직접 다운 받아, public폴더에 소스를 넣고
웹서버에서 제공하는 방식으로 전환

 

사내 웹서버에 소스를 담고있으므로, 더이상 외부 CDN에 의존하지 않게된다!

mdi 깃헙에서 소스 복사

 

자체 배포함

https://github.com/Templarian/MaterialDesign-Webfont/tree/master/css

 

✅ 방법2. 다른 외부 cdn 사용 (임시방편)

: cdn.jsdelivr.net 대신 fastly.jsdelivr.net 또는 gcore.jsdelivr.net 로 임시방편으로 해결

 

 

✅ 방법3. 자체cdn 구축

: 핵심 라이브러리들은 자체 cdn 구축해서 제공하는게 좋다고 한다. (ex. aws cloudfront 등으로)

 

 

📌 느낀점

1. 외부 라이브러리를 무료로 사용하는 것은 편하지만, 보안까지는 신경써주지 않는다!

 

2. 경험한 이슈 사항 공유
이 사건 이후, 회사 내 다른 서비스 담당하는 프론트엔드 개발자가 mdi 아이콘을 사용하려고 했다. 
Vuetify2 공식 사이트의 안내대로 외부 CDN을 스크립트에 연결하는 방식으로 진행한다고 들었고

나는 먼저 경험했던 이 이슈에 대해 공유했다. 

덕분에 그 서비스에도 같은 문제를 방지하고, 안정적인 서비스를 제공하는 데 기여할 수 있었다.

 

---

# 배운것들

✅ CDN이란 (Content Delivery Network)

웹 콘텐츠를 제공하는 서버를 전 세계로 분산시켜 놓고, 사용자는 물리적으로 가까운 CDN서버에서 콘텐츠를 다운받게 된다.

이로인해 사용자는 콘텐츠 다운로드 시간을 줄이고 더 빠르게 접근할 수 있다.

 

CDN 서버는 보통 콘텐츠(asset) 전용 서버이다. (asset : 이미지, 동영상, CSS, JavaScript 등)

 

<장점>

1. 속도 향상

한국 사용자가 미국 서버에서 이미지를 다운하는 경우, 한국 서버보다 물리적 거리가 있기 때문에 다운로드 시간이 더 오래 걸릴 것이다.

이를 해결하기 위해 미국 서버를 한국 서버로 복사해 두고, 한국 사용자는 한국에 있는 CDN서버에서 다운할 수 있게 된다.

접속 속도가 훨씬 빨라, 이미지를 다운받는 시간이 더 빠르다.

 

2. 서버 부하 분산

여러 사용자 요청을 한 서버에서 담당하는게 아니아, 여러 서버로 나눠 처리하여 서버의 부하가 줄게된다. (서버의 성능향상)

 

3. 안정성

또한 많은 사용자가 동시 접속할 때도 트래픽을 분산 처리하므로 더 안정적인 콘텐츠 제공이 가능하다.

 

---

 

※ 참조 사이트

cdn에 대해 - https://www.youtube.com/watch?v=_kcoeK0ITkQ&t=562s

오늘 이 사태에 대한 제로초님 속보! - https://www.youtube.com/shorts/JlnZQBZbyUA