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 같은 응답 헤더가 함께 잘 설정돼 있는지 확인하면 좋습니다.

자주 묻는 질문

왜 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 제약과 보안 이슈가 있어, 정확한 최종 산출물(번들/압축된 파일)을 붙여넣는 것을 권장합니다.

관련 도구

웹 보안