OneWebDesk

SRI 해시 생성기

외부 JS/CSS용 Subresource Integrity 해시를 생성합니다.

CDN에서 불러오는 외부 JS·CSS 파일은 출처 서버가 변조되면 내 사이트에서 그대로 악성 코드가 실행될 수 있습니다. Subresource Integrity(SRI)는 파일의 암호학적 해시를 미리 적어 두고, 브라우저가 실제로 받은 파일의 해시와 일치할 때만 실행하도록 강제하는 보안 표준입니다. 이 SRI 해시 생성기는 파일 내용을 붙여넣으면sha256·sha384·sha512 알고리즘으로 integrity 해시를 만들어 줍니다.

생성된 integrity 속성과 함께 crossorigin="anonymous"를 추가하면 CDN 파일이 한 글자라도 바뀌었을 때 브라우저가 로딩을 차단합니다. 계산은 전적으로 브라우저의 Web Crypto API로 이뤄지므로 파일 내용이 서버로 전송되지 않습니다.

파일 내용을 붙여넣으면 integrity 해시가 생성됩니다.

SRI 해시는 어떻게 만들어지나요?

SRI 해시는 파일 바이트 전체를 해시 함수로 압축한 뒤 그 결과를 Base64로 인코딩하고, 앞에 알고리즘 이름을 붙인 형식입니다. 예: sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC. 하나의 파일에 여러 알고리즘 해시를 공백으로 구분해 넣으면, 브라우저는 자신이 지원하는 가장 강한 것을 사용합니다.

  • sha256 — 가장 널리 호환되지만 보안 마진이 가장 작습니다.
  • sha384 — 보안과 호환성의 균형이 좋아 권장 기본값입니다.
  • sha512 — 가장 강력하며 길이가 깁니다.

HTML에 적용하는 법

외부 스크립트에는 <script>integritycrossorigin을 함께 지정합니다. 스타일시트도 동일하게 <link rel="stylesheet">에 적용할 수 있습니다.

  1. 배포에 사용할 정확한 파일 내용을 이 도구에 붙여넣습니다(압축·번들된 최종 산출물 기준).
  2. 출력된 integrity 값을 복사합니다.
  3. crossorigin="anonymous"를 빼먹지 않고 함께 넣습니다. 없으면 검증이 동작하지 않습니다.

외부 리소스를 점검할 때는 보안 헤더 점검으로 CSP·HSTS 같은 응답 헤더가 함께 잘 설정돼 있는지 확인하면 좋습니다.

알고리즘별 해시 길이·접두어

각 알고리즘이 만드는 다이제스트 바이트 수가 다르기 때문에, Base64 인코딩 후 integrity 문자열의 길이도 정해져 있습니다. 출력값이 아래 길이와 맞지 않으면 잘못 복사됐을 가능성이 큽니다. (Base64 길이는 접두어 sha###- 7글자를 제외한 본문 기준입니다.)

알고리즘다이제스트Base64 본문 길이권장 용도
sha25632바이트44자 (끝에 = 1개)레거시 호환 최우선
sha38448바이트64자 (패딩 없음)권장 기본값
sha51264바이트88자 (끝에 ==)최고 강도 필요 시

적용 예시 — jQuery 슬림 빌드

실제 CDN 스니펫에 두 가지 알고리즘을 함께 넣은 모습입니다. 브라우저는 지원하는 가장 강한 것(여기서는sha512)으로 검증하고, 둘 중 하나라도 받은 바이트와 맞으면 통과시킵니다.

<script
  src="https://code.jquery.com/jquery-3.7.1.slim.min.js"
  integrity="sha256-kmHvs0B+OpCW5GVHUNjv9rOmY0IvSIRcf7zGUDTDQM8=
             sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
  crossorigin="anonymous"
  referrerpolicy="no-referrer"></script>

위처럼 한 속성 안에 공백으로 여러 해시를 나열할 수 있습니다. 줄바꿈/들여쓰기 공백도 구분자로 인정되므로 가독성을 위해 줄을 나눠도 됩니다.

흔한 실수 / 함정

  • 줄 끝(EOL)·인코딩 차이: SRI는 파일 바이트 전체를 해시합니다. CRLF(Windows)와 LF가 다르고, UTF-8 BOM 1바이트만 있어도 해시가 완전히 달라집니다. 반드시 CDN이 실제로 내보내는 압축본을 그대로 붙여넣으세요. 원본 소스나 포매터를 거친 파일로 만들면 차단됩니다.
  • gzip/Brotli 압축과 무관: 서버가 전송 시 압축해도 브라우저는 압축을 푼 원본 바이트로 검증합니다. 따라서 압축 전 파일 내용으로 해시를 만들면 됩니다 — 압축본을 붙여넣으면 안 됩니다.
  • 해시 직접 손편집 금지: Base64 한 글자만 바꿔도 검증이 깨집니다. 또 sha384=처럼 구분자를 =로 쓰면 안 되고, 접두어와 본문 사이는 반드시 하이픈(sha384-)입니다.

자주 묻는 질문

왜 crossorigin 속성이 꼭 필요한가요?
SRI 검증은 CORS로 받아온 리소스에만 적용됩니다. crossorigin="anonymous"가 없으면 브라우저는 무결성 검사를 수행하지 않고, integrity 속성이 무시됩니다. CDN이 적절한 CORS 헤더(Access-Control-Allow-Origin)를 반환해야 합니다.
파일이 조금이라도 바뀌면 어떻게 되나요?
해시가 달라지므로 브라우저가 리소스를 차단하고 실행/적용하지 않습니다. CDN을 업데이트하면 새 버전에 맞춰 integrity 값을 다시 생성해야 합니다. 그렇지 않으면 정상 업데이트도 차단됩니다.
어떤 알고리즘을 골라야 하나요?
특별한 이유가 없다면 sha384를 권장합니다. 보안 강도와 길이의 균형이 좋고 모든 최신 브라우저가 지원합니다. 더 강한 보장을 원하면 sha512, 레거시 호환이 중요하면 sha256을 사용하세요.
붙여넣은 파일 내용이 외부로 전송되나요?
아니요. 해시 계산은 브라우저 내장 Web Crypto API(crypto.subtle.digest)로 로컬에서만 수행됩니다. 입력한 내용은 서버로 전송되거나 저장되지 않으므로 민감한 코드도 안전하게 처리할 수 있습니다.
URL을 입력하면 자동으로 받아서 해시해 주나요?
이 도구는 파일 내용을 직접 붙여넣는 방식입니다. 브라우저에서 임의 URL을 가져오면 CORS 제약과 보안 이슈가 있어, 정확한 최종 산출물(번들/압축된 파일)을 붙여넣는 것을 권장합니다.

관련 도구

웹 보안