블로그 목록

SRI integrity mismatch 오류가 날 때 CDN 파일과 해시를 맞추는 법

SRI mismatch는 integrity 값이 현재 CDN 응답 바이트의 digest와 다르다는 뜻입니다. 브라우저가 실제로 받는 고정 버전 파일을 내려받아 새 hash를 계산하고 태그의 integrity를 교체한 뒤, 교차 출처라면 crossorigin 속성과 CDN의 CORS 허용 응답까지 함께 확인하세요.

파일 이름이 같아도 CDN이 내용을 교체하거나 빌드 도구가 공백을 바꾸면 기존 digest는 더 이상 맞지 않습니다. 보안 검사를 끄기 전에 HTML이 가리키는 URL과 계산에 사용한 파일이 정말 같은 응답인지부터 증명해야 합니다.

먼저 보는 핵심 요약

  • integrity에는 지원되는 알고리즘 이름과 Base64로 인코딩한 digest를 정해진 형식으로 넣습니다.
  • 버전이 고정되지 않은 CDN URL이나 런타임에 내용이 달라지는 자원은 SRI 값과 쉽게 어긋납니다.
  • 교차 출처 자원은 무결성 비교뿐 아니라 CORS 검사 조건도 충족해야 하므로 응답 헤더를 함께 봅니다.

integrity mismatch가 의미하는 것

브라우저는 가져온 자원의 표현을 지정된 알고리즘으로 계산하고 integrity 메타데이터의 digest와 비교합니다. 값이 일치하지 않으면 해당 script나 stylesheet를 적용하지 않습니다. 이는 네트워크 실패와 구별되므로 개발자 도구에서 요청 상태, 최종 URL, 콘솔의 무결성 메시지를 함께 확인해야 합니다.

해시를 계산할 파일을 정확히 고르는 법

로컬 패키지 파일이 아니라 HTML의 src 또는 href가 실제로 반환하는 파일을 기준으로 계산합니다. 리디렉션이 있다면 최종 응답을 확인하고, minified와 일반 빌드, ESM과 UMD 파일을 혼동하지 마세요. CDN URL은 가능한 한 명시적인 버전과 파일명을 사용합니다.

crossorigin과 CORS가 함께 필요한 경우

다른 출처의 자원에 SRI를 적용하면 브라우저는 해당 응답이 교차 출처 공유를 허용하는지도 검사합니다. 일반적인 공개 CDN 자원에는 `crossorigin="anonymous"`를 사용하고 서버의 Access-Control-Allow-Origin 응답을 확인합니다. 자격 증명이 필요한 자원은 공개 라이브러리와 다른 설계가 필요합니다.

업데이트 때 오류가 재발하지 않게 관리하는 방법

의존성 버전을 올릴 때 CDN URL과 integrity 값을 하나의 변경으로 검토합니다. 자동화가 hash를 갱신하더라도 출처와 패키지 버전을 검증하고, CSP의 허용 출처와 캐시 무효화도 함께 테스트하세요. 내용이 수시로 바뀌는 URL이라면 고정 자산으로 전환하는 편이 SRI 목적에 맞습니다.

단계별로 확인하는 방법

  1. 실패한 최종 URL 확인하기

    Network 탭에서 리디렉션 뒤 URL, 응답 상태, 실제 내려온 파일과 Content-Type을 확인합니다.

  2. 실제 응답으로 hash 계산하기

    브라우저가 받는 동일 파일을 사용해 sha256, sha384 또는 sha512 형식의 SRI 값을 생성합니다.

  3. 태그와 CORS 설정 맞추기

    integrity를 교체하고 교차 출처 자원에는 필요한 crossorigin 속성과 서버 CORS 응답을 확인합니다.

  4. 캐시를 비우고 재검증하기

    새 문서와 자원을 다시 받아 콘솔 오류가 사라지고 스크립트·스타일 기능이 정상인지 검사합니다.

판단 기준을 한눈에 비교하기

확인 항목판단 기준
CDN 파일 내용 변경현재 실제 응답으로 digest를 다시 계산하고 버전 고정 URL을 사용합니다.
다른 빌드 파일 선택minified, module, 배포 환경별 파일명이 HTML과 같은지 대조합니다.
crossorigin 누락교차 출처 요청의 CORS 모드와 CDN 응답 헤더를 함께 확인합니다.
오래된 HTML·CDN 캐시문서와 자원 버전이 같은 배포 단위를 가리키도록 캐시 무효화 순서를 점검합니다.

실행 전 체크리스트

  • HTML의 최종 CDN URL과 hash 입력 파일이 동일한가요?
  • digest를 16진수가 아닌 SRI용 Base64 형식으로 넣었나요?
  • 교차 출처 응답의 CORS 허용 여부를 확인했나요?
  • 버전 URL과 integrity 값이 한 변경으로 배포되나요?

주의할 점

오류를 없애기 위해 integrity 속성만 삭제하면 변조된 자원을 차단하려던 보호도 사라집니다. CDN이 가변 콘텐츠를 제공한다면 SRI를 반복 갱신하기보다 신뢰한 버전 파일을 자체 호스팅하거나 변경되지 않는 URL을 사용하세요.

함께 보면 좋은 글

자주 묻는 질문

SRI hash는 일반 파일 체크섬과 형식이 같은가요?

digest 계산 원리는 같지만 integrity 속성에는 알고리즘 이름, 하이픈, Base64 digest를 포함한 SRI 메타데이터 형식을 사용합니다.

쿼리 문자열이 같으면 CDN 응답도 항상 같나요?

보장할 수 없습니다. CDN 운영 정책이나 원본 교체로 같은 URL의 내용이 바뀔 수 있으므로 버전 고정 정책과 실제 응답을 확인해야 합니다.

sha256과 sha384를 동시에 넣을 수 있나요?

SRI 메타데이터에는 공백으로 구분한 여러 digest를 둘 수 있습니다. 브라우저의 선택 규칙은 명세를 따르므로 모두 현재 자원과 맞게 관리해야 합니다.

같은 도메인의 파일에도 crossorigin이 필요한가요?

동일 출처 자원에는 교차 출처 CORS 검사가 적용되지 않습니다. 실제 요청의 origin이 다른지부터 확인하세요.

근거와 출처

도구에서 직접 확인하기

설명한 기준을 실제 값에 적용하려면 SRI 해시 생성기에서 작은 샘플부터 확인하세요. 원본과 결과를 나란히 비교한 뒤 실제 사용 환경에 적용하는 순서가 가장 안전합니다.

이 글은 알파카랩스 Utils개발 도구 도구와 함께 보는 정보성 가이드입니다. 규격과 외부 서비스 정책은 바뀔 수 있으므로 중요한 결정 전에는 연결된 공식 출처의 최신 내용을 다시 확인하세요.

무료 도구 둘러보기