SRI(Subresource Integrity)는 외부 CDN에서 로드하는 파일이 변조되지 않았음을 브라우저가 검증하도록 하는 보안 기능이다. 스크립트나 스타일시트에 해시를 포함하여 공급망 공격을 방어한다.
동작 원리
html
<!-- integrity 속성: base64(SHA-256/384/512 해시) -->
<script
src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"
integrity="sha256-geUvdk7iwUGLfVkKN3bI1jk3Jaj7Pw9gUG96xt7Kn0="
crossorigin="anonymous">
</script>
<!-- CSS -->
<link
rel="stylesheet"
href="https://cdn.example.com/styles.css"
integrity="sha384-abc123..."
crossorigin="anonymous">
동작:
1. 브라우저가 파일 다운로드
2. 파일 내용의 해시 계산
3. integrity 속성의 해시와 비교
4. 불일치 시 파일 실행/적용 거부 + 오류
해시 생성
bash
# SHA-384 해시 생성
cat lodash.min.js | openssl dgst -sha384 -binary | openssl base64 -A
# → sha384-xxxxxxx...
# 또는
shasum -b -a 384 lodash.min.js | awk '{ print $1 }' | xxd -r -p | base64
# NPM 도구
npx sri-hash https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js
CSP와 함께 사용
http
# require-sri-for: 모든 스크립트/스타일에 SRI 강제
Content-Security-Policy: require-sri-for script style
공급망 공격 방어 시나리오
시나리오: CDN이 해킹당해 악성 코드 삽입
SRI 없음:
CDN 파일 변조 → 브라우저 실행 → 사용자 피해
SRI 있음:
CDN 파일 변조 → 해시 불일치 → 브라우저 차단 → 안전
주의:
- 파일 업데이트 시 해시도 함께 업데이트 필요
- integrity와 crossorigin 속성은 함께 사용
- 동적으로 로드하는 스크립트에는 JS로 설정 가능
관련 문서
