프론트엔드에 사용되는 많은 라이브러리가 OSS로 개발되었으며, 대부분은 CDN과 npmjs.com을 통해 배포됩니다. 웹 애플리케이션을 개발할 때 가까운 위치의 CDN 서버에서 콘텐츠를 가져올 수 있도록 하므로 웹페이지의 표시 속도를 높일 수 있습니다.
서드파티 라이브러리를 경유하는 공격
보안이 강력한 웹 애플리케이션은 직접적인 공격이 어렵습니다. 하지만 웹 애플리케이션을 구성하는 오픈소스 라이브러리에 악성코드를 심으면 공격이 가능합니다.
오픈소스 소프트웨어 중 일부는 이름 그대로 코드가 공개되어 있으며, 누구나 버그 수정과 기능 추가를 위해 수정한 코드를 보낼 수 있습니다. 담당자는 내용을 리뷰하고 문제가 없으면 기존 소프트웨어 코드에 병합합니다.
실제 사례를 살펴보면 2018년에는 자바스크립트의 정적 분석 도구인 'Eslint'의 유지보수 계정이 탈취되는 사건이 있었습니다. Eslint 관련 라이브러리에 악의적인 코드가 포함되어, 이 라이브러리를 설치한 사용자가 관리하는 npm 계정의 로그인 정보가 유출되었습니다. 2021년에도 ua-parser-js, coa, rc 등 유명한 npm 패키지의 유지보수 계정이 탈취되어 악의적인 코드가 포함되는 사건이 있었습니다.
의존관계 상속에 의한 취약성
2018년에는 'event-stream'이라는 유명한 npm 패키지가 의존하는 'flatmap-stream'이라는 npm 패키지에 멀웨어(malware)가 포함되는 사건이 있었습니다. 이는 직접적으로 공격당한 패키지를 사용하지 않더라도, 간접적인 의존성을 통해 피해를 받을 수 있음을 보여주는 사례입니다.
CDN에서 콘텐츠 변조
CDN을 사용하면 자체 서버에서 전송할 필요가 없고 사용자와 가까운 서버를 사용하므로 성능도 향상됩니다. 그러나 CDN의 라이브러리가 변조되면 라이브러리를 사용하는 브라우저는 악성코드를 실행하게 되는 등 보안에 문제가 생기기도 합니다.
CDN 보안 강화 방법으로는 라이브러리를 가져오는 곳을 신뢰할 수 있는 CDN 서비스로만 좁혀 두면 보안 단계가 낮은 CDN 등으로부터 라이브러리를 가져오는 것을 방지할 수 있습니다. 이때 CSP를 사용합니다.
Content-Security-Policy: script-src cdn.example
라이브러리 사용의 보안 대책
npm audit 활용
npm은 npm audit이라는 커맨드를 제공합니다. 프로젝트에서 npm audit을 실행하면 npm install로 로컬에 설치한 npm 패키지에 알려진 취약점이 포함된 버전의 포함 여부를 확인합니다. 실행하면 어떤 npm 패키지에 어떤 문제가 있고 수정이 있는 버전은 무엇인지 알려줍니다.
자동화 도구 활용
소스코드를 깃허브로 관리할 때는 깃허브에서 제공하는 Dependabot을 사용해 볼 수도 있습니다.
라이브러리 선택 및 관리
유지보수가 꾸준히 이루어지는 라이브러리를 사용해야 합니다.
최신 버전의 라이브러리를 사용하기를 권장합니다. 라이브러리 버전은 가능한 최신 버전으로 유지해야 합니다. 이를 위해 라이브러리를 항상 최신의 상태로 유지해 주는 서비스가 Renovate입니다.
SRI(Subresource Integrity) 활용
CDN 서버의 라이브러리가 변조되어 악성코드가 포함되면 브라우저에서 라이브러리를 불러온 사용자에게는 문제가 발생할 수 있습니다. 브라우저는 문제를 방지하기 위해 서버에서 가져온 리소스에 변조가 없는지 확인하는 하위 자원 무결성(Subresource Integrity, SRI) 기능이 있습니다. SRI로 리소스 내용의 해시값을 확인해 변조 여부를 확인할 수 있습니다. 해당 리소스의 해시값을 Base64로 인코딩한 문자열을 script 요소와 link 요소의 integrity 속성으로 지정합니다.
<script src="https://cdn.jsdelivr.net/npm/react@18.2.0/umd/react.production.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40+rpW0CUjn8D" crossorigin="anonymous"></script>
CDN 라이브러리 버전 지정
CDN에서 불러오는 라이브러리의 버전을 지정하는 것이 중요합니다. CSP로 라이브러리를 가져오는 CDN의 범위를 좁히더라도 해당 CDN이 취약성을 갖는 이전 버전의 라이브러리를 제공하면 문제가 발생할 수 있습니다. 따라서 라이브러리 파일을 검색할 때 버전을 지정하는 것이 중요합니다.
버전별로 라이브러리를 제공하는 CDN 서비스가 있습니다. unpkg.com이라고 하는 CDN에서 react 버전 18.0.0을 불러오는 코드는 다음과 같습니다.
<script crossorigin src="https://unpkg.com/react@18.0.0/umd/react.production.min.js">
결론적으로 SRI, 버전 지정, CSP의 사용으로 취약성이 없는 라이브러리를 사용하도록 해야 합니다.