오래된 자바스크립트 라이브러리, 화면 쪽 버전 점검 5단계

오래된 자바스크립트 라이브러리는 페이지가 불러오는 파일을 찾아 버전을 적고, 알려진 취약점과 대조해 바꾸면 됩니다. 이 글에서는 화면 쪽 라이브러리가 왜 위험해지는지, 운영자가 브라우저만으로 버전을 확인하는 5단계, 불러오는 방식별 업데이트 방법을 정리했습니다.

화면 쪽 자바스크립트 라이브러리가 위험해지는 이유

홈페이지의 메뉴 펼침, 슬라이드 배너, 팝업, 날짜 선택 같은 기능은 대부분 방문자 브라우저에서 동작하는 자바스크립트 라이브러리로 만듭니다. 이 파일들은 제작할 때 한 번 넣고 나면 몇 년 동안 그대로 남는 경우가 많습니다. 사이트 화면이 멀쩡해 보여도 그동안 라이브러리에는 취약점이 공개되고 새 버전이 나왔을 수 있습니다.

화면 쪽 라이브러리의 취약점은 주로 방문자 브라우저에서 악성 스크립트가 실행되는 문제로 이어집니다. 이런 공격의 원리와 운영자 예방법은 XSS 크로스사이트 스크립팅 글에서 다뤘습니다. 서버 쪽 라이브러리와 달리 화면 쪽 파일은 누구나 페이지 소스에서 이름과 버전을 볼 수 있기 때문에, 오래된 버전은 공격 대상을 찾는 사람에게도 쉽게 드러납니다.

OWASP가 권하는 관리 방식

국제 웹 보안 프로젝트 OWASP는 취약하고 오래된 구성 요소(A06:2021) 항목에서 서버 쪽뿐 아니라 화면 쪽 구성 요소의 버전도 목록으로 관리하라고 권하고, 점검 도구의 예로 Retire.js를 듭니다. 서버 쪽 의존성 관리는 오픈소스 라이브러리 취약점 글에서 따로 정리했습니다.

브라우저로 라이브러리 버전을 확인하는 5단계

아래 순서는 개발 지식이 많지 않아도 크롬이나 엣지 같은 브라우저만으로 따라 할 수 있습니다. 내 사이트를 확인하는 방법이며, 다른 사이트를 대상으로 하지 않습니다.

1. 불러오는 파일 찾기: 페이지에서 마우스 오른쪽 버튼으로 페이지 소스 보기를 열거나, 개발자 도구(F12)의 네트워크 탭에서 .js 파일 목록을 봅니다.
2. 이름과 버전 적기: 파일 주소에 jquery-3.x.x.min.js처럼 버전이 들어 있는 경우가 많습니다. 없으면 파일을 열어 첫 줄 주석에 적힌 버전을 확인합니다.
3. 알려진 취약점 대조: 적은 이름과 버전을 라이브러리 공식 사이트의 공지나 점검 도구 결과와 비교합니다.
4. 업데이트나 제거: 더는 쓰지 않는 라이브러리는 지우고, 쓰는 것은 보안 수정이 들어간 버전으로 바꿉니다.
5. 화면 다시 확인: 메뉴, 슬라이드, 문의 폼처럼 그 라이브러리를 쓰던 기능이 PC와 휴대폰에서 정상인지 시험합니다.

그림의 3단계에서 도움이 되는 도구가 Retire.js입니다. 명령줄 도구와 크롬·파이어폭스 확장 프로그램으로 제공되며, 방문한 페이지에 알려진 취약점이 있는 라이브러리가 있으면 경고를 보여 줍니다. 도구가 경고하지 않아도 업데이트가 오래 끊긴 라이브러리는 교체를 검토하는 것이 좋습니다.

불러오는 방식별 업데이트 방법

라이브러리를 어떤 방식으로 넣었는지에 따라 바꾸는 방법이 다릅니다. 아래 표는 흔한 세 가지 방식을 비교한 것입니다.

방식	알아보는 법	업데이트 방법
사이트 서버에 복사	파일 주소가 우리 도메인으로 시작	새 버전 파일로 바꾸고 캐시를 비웁니다.
CDN 외부 주소 연결	파일 주소가 외부 CDN 도메인	주소 속 버전 번호를 바꿉니다.
빌드 도구로 묶음	app.js처럼 여러 코드를 합친 파일	패키지를 업데이트한 뒤 다시 빌드합니다.

그림과 표처럼 빌드 도구로 묶은 파일은 소스 보기만으로 버전을 알기 어렵습니다. 이때는 제작 업체나 유지보수 담당에게 패키지 목록과 점검 결과를 요청하는 것이 정확합니다.

CDN으로 불러올 때 함께 챙길 것

외부 CDN에서 파일을 불러오면 그 파일이 바뀌었을 때 우리 사이트도 영향을 받습니다. MDN의 하위 리소스 무결성(SRI) 안내처럼 script 태그에 integrity 해시를 넣으면, 브라우저가 내려받은 파일이 해시와 다를 때 실행하지 않습니다. 버전을 바꿀 때는 해시도 새 파일에 맞게 바꿔야 합니다.

점검할 때 흔한 실수

• 첫 화면만 본다: 게시판, 문의, 예약 페이지에서만 따로 불러오는 라이브러리가 있습니다.
• 같은 라이브러리가 두 번 들어 있다: 테마와 플러그인이 각각 다른 버전을 불러오면 옛 버전이 남습니다.
• 업데이트 뒤 시험을 건너뛴다: 큰 버전이 바뀌면 기존 코드가 동작하지 않을 수 있습니다.
• 쓰지 않는 파일을 남긴다: 화면에서 빠진 기능의 파일도 서버에 있으면 정리합니다.

디코랩이 돕는 방식

디코랩은 운영 중인 사이트의 유지보수와 개선을 맡고, 웹사이트 취약점 점검 서비스로 사이트의 보안 상태를 확인합니다. 오래된 라이브러리를 바꾸는 작업은 화면 시험이 함께 필요하므로 작업 범위를 상담 후 안내합니다.

자주 묻는 질문

jQuery를 쓰면 무조건 위험한가요?

라이브러리 자체가 위험한 것이 아니라 오래된 버전이 문제입니다. 보안 수정이 들어간 버전을 쓰고 계속 관리한다면 사용할 수 있습니다.

라이브러리를 업데이트하면 디자인이 바뀌나요?

대부분 겉모습은 그대로지만, 큰 버전이 바뀌면 일부 기능이 동작하지 않을 수 있습니다. 시험 환경에서 확인한 뒤 반영하는 이유입니다.

얼마나 자주 확인해야 하나요?

분기에 한 번 버전 목록을 다시 보고, 쓰는 라이브러리에 보안 공지가 나오면 그때 바로 확인하는 방식이 무리가 없습니다.

점검 도구가 경고를 띄우지 않으면 안전한가요?

도구는 알려진 취약점만 찾습니다. 업데이트가 멈춘 라이브러리는 경고가 없어도 대체 라이브러리를 검토하는 것이 좋습니다.

우리 홈페이지에 오래된 라이브러리가 남아 있는지 확인하고 싶다면 사이트 주소를 적어 디코랩 프로젝트 문의로 보내 주세요.