jQuery CDN 버전 지정하기, latest를 쓰면 안 되는 이유

jQuery를 CDN으로 불러올 때 쓰던 주소들을 정리해뒀던 글이다. 그런데 지금 기준으로는 절반이 더 이상 유효하지 않다. 당시 기록과 현재 권장 방식을 나눠서 정리한다.

당시 정리했던 것

최신 버전

<script src="//code.jquery.com/jquery-latest.min.js"></script>

3.2.1 버전

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>

1.11.1 버전 (Google CDN)

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

지금은 latest를 쓰면 안 된다

jquery-latest.min.js 는 2016년에 jQuery 팀이 공식적으로 동결했다. 지금 이 주소로 요청하면 최신 버전이 아니라 1.11.1이 내려온다.

이유는 명확했다. 수많은 사이트가 이 주소를 쓰고 있었는데, jQuery 1.x에서 2.x, 3.x로 올라가면서 breaking change가 들어갔다. 파일 하나 갱신할 때마다 전 세계 사이트가 동시에 깨지는 상황이 벌어진 것이다.

같은 이유로 Google CDN의 /jquery/1/ 같은 축약 경로도 특정 버전에 고정돼 있다.

교훈은 이렇다. 프로덕션에서 버전을 고정하지 않는 CDN 주소는 쓰지 않는다. jQuery만의 이야기가 아니라 모든 라이브러리에 해당한다.

현재 권장 방식

1. 버전 명시 + SRI

<script
  src="https://code.jquery.com/jquery-3.7.1.min.js"
  integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
  crossorigin="anonymous"></script>

integrity 속성이 SRI(Subresource Integrity)다. 파일의 해시값을 미리 적어두면, 브라우저가 내려받은 파일의 해시를 비교해서 다르면 실행하지 않는다.

CDN이 해킹당해 악성 코드가 섞인 파일이 배포되더라도 이 속성 하나로 막을 수 있다. 실제로 공급망 공격은 꾸준히 발생하고 있으므로 외부 CDN을 쓴다면 SRI는 선택이 아니라 필수에 가깝다.

해시값은 jQuery 공식 릴리스 페이지에서 제공한다.

2. 프로토콜 생략(//)은 이제 불필요하다

예전에는 //code.jquery.com/... 처럼 프로토콜을 생략해서 http/https 양쪽에 대응했다. 지금은 사실상 모든 사이트가 HTTPS이므로 https://를 명시하는 게 낫다. 프로토콜 생략 방식은 로컬 파일로 열었을 때 깨지는 부작용도 있다.

3. 가능하면 npm으로 번들에 포함

npm install jquery

const $ = require('jquery');   // CommonJS 방식

CDN보다 이쪽이 나은 이유가 몇 가지 있다.

• 버전이 lock 파일로 고정된다
• 오프라인·폐쇄망에서도 동작한다
• 요청 수가 줄어든다. 번들에 합쳐지므로
• 브라우저 캐시 공유 효과는 이제 없다. 요즘 브라우저는 사이트별로 캐시를 분리하기 때문에, 예전에 CDN을 쓰던 가장 큰 이유가 사라졌다

마지막 항목이 중요하다. "다른 사이트에서 이미 받았으니 캐시가 재사용된다"는 논리는 캐시 파티셔닝 도입 이후 성립하지 않는다.

버전별 주의사항

버전	특징
1.x	IE 6~8 지원. 지금 새로 쓸 이유가 없다
2.x	IE 8 이하 제거. 사실상 3.x로 넘어감
3.x	현행. slim 빌드는 ajax·effects 제외로 더 가볍다

구버전은 알려진 XSS 취약점이 있다. 레거시 프로젝트를 유지보수한다면 최소 3.5 이상으로 올리는 것을 권한다.

그런데 jQuery가 아직 필요한가

솔직히 짚고 넘어가야 할 부분이다. jQuery가 해결하던 문제들은 대부분 표준으로 흡수됐다.

// 선택
$('.item')            →  document.querySelectorAll('.item')

// 클래스 조작
$(el).addClass('on')  →  el.classList.add('on')

// 이벤트
$(el).on('click', fn) →  el.addEventListener('click', fn)

// Ajax
$.ajax({...})         →  fetch(url).then(r => r.json())

// DOM 로드
$(function(){})       →  document.addEventListener('DOMContentLoaded', fn)

신규 프로젝트라면 jQuery 없이 시작하는 게 기본이다. 다만 기존 코드에 이미 깊게 들어가 있다면 무리해서 걷어낼 필요는 없다. 동작하는 코드를 바꾸는 데도 비용이 든다.

정리

• jquery-latest.min.js 는 2016년에 동결됐다. 최신 버전이 아니다
• 프로덕션에서 버전 미지정 CDN은 쓰지 않는다
• 외부 CDN을 쓴다면 integrity(SRI)를 반드시 붙인다
• 프로토콜 생략 대신 https:// 명시
• 캐시 파티셔닝 이후 CDN의 캐시 공유 이점은 사라졌다. npm 번들이 낫다
• 신규 프로젝트는 jQuery 없이 시작