SRI란 무엇인가
웹 개발을 하다 보면 jQuery나 Bootstrap 같은 라이브러리를 직접 다운로드하지 않고 CDN(Content Delivery Network)에서 불러와 사용하는 경우가 많습니다. 속도도 빠르고 관리도 편하기 때문이죠. 그런데 만약 이 CDN 서버가 해킹당해서 원래의 정상 파일이 악성 코드로 바뀐다면 어떻게 될까요? 내 사이트를 방문하는 모든 사용자가 그 악성 스크립트를 그대로 실행하게 됩니다.
SRI(Subresource Integrity)는 이런 문제를 막기 위한 브라우저 보안 기능입니다. 쉽게 말해 ‘이 파일의 지문(해시값)은 이거야. 만약 다운로드한 파일의 지문이 다르면 실행하지 마’라고 브라우저에 미리 알려주는 방식입니다. 택배를 받을 때 송장 번호와 실제 물건이 일치하는지 확인하는 것과 비슷한 개념이라고 생각하면 이해하기 쉽습니다.
동작 원리와 사용 예시
SRI는 script나 link 태그에 integrity 속성을 추가하는 방식으로 동작합니다. 이 속성값에는 파일의 해시값(주로 SHA-256, SHA-384, SHA-512)이 들어갑니다. 예시는 다음과 같습니다.
<script src='https://cdn.example.com/library.js' integrity='sha384-oqVuAf...' crossorigin='anonymous'></script>
브라우저는 스크립트를 다운로드한 뒤 실제 파일의 해시값을 계산합니다. 그리고 integrity 속성에 적힌 해시값과 비교해서 두 값이 일치하면 정상적으로 실행하고, 조금이라도 다르면 실행을 차단합니다. 파일이 단 한 글자만 바뀌어도 해시값은 완전히 달라지기 때문에 변조 여부를 매우 정확하게 감지할 수 있습니다.
해시값은 직접 계산할 필요 없이 대부분의 CDN 제공 사이트(예: cdnjs)에서 integrity 속성값을 함께 제공하므로 복사해서 사용하면 됩니다.
실무에서 SRI를 쓰는 이유
SRI가 특히 중요한 이유는 CDN이 하나라도 뚫리면 그 CDN을 사용하는 수많은 사이트가 동시에 피해를 볼 수 있기 때문입니다. 실제로 과거 여러 오픈소스 CDN에서 서버 침해나 설정 실수로 인해 스크립트가 변조된 사례가 있었습니다. SRI를 적용해두면 이런 상황에서도 사용자의 브라우저가 자동으로 실행을 막아주기 때문에 최소한의 안전장치 역할을 합니다.
- 외부 CDN 리소스를 불러올 때는 가능하면 integrity 속성을 항상 함께 사용할 것
- crossorigin=’anonymous’ 속성도 함께 지정해야 CORS 정책상 정상 동작함
- 라이브러리 버전을 업데이트할 때는 해시값도 반드시 새로 갱신해야 함
SRI는 설정이 간단하면서도 CDN 변조라는 치명적인 공급망 공격을 예방할 수 있는 효과적인 방법입니다. 특히 사용자가 많은 서비스일수록 이런 작은 설정 하나가 큰 사고를 막는 방패가 될 수 있으므로, 외부 스크립트를 사용할 때는 습관적으로 적용하는 것이 좋습니다.