SRI가 왜 필요한가요?

CDN이 해킹되면 수천 개 사이트에 악성 코드가 주입될 수 있습니다. SRI는 브라우저가 리소스를 실행하기 전 해시를 검증하여, 변조된 리소스를 자동으로 차단합니다.

어떤 해시 알고리즘을 사용해야 하나요?

SHA-384가 가장 일반적으로 사용됩니다. SHA-256도 안전하지만 SHA-384가 성능과 보안의 균형이 좋습니다. SHA-512는 최고 수준이지만 integrity 속성이 길어집니다.

SRI 해시가 불일치하면 어떻게 되나요?

브라우저가 리소스 로딩을 거부합니다. 스크립트는 실행되지 않고, 스타일시트는 적용되지 않습니다. onerror 이벤트로 폴백 로직을 구현하세요.

crossorigin 속성이 왜 필요한가요?

SRI 검증을 위해 브라우저가 리소스 내용에 접근해야 합니다. CORS 없이는 불투명(opaque) 응답으로 해시를 계산할 수 없습니다. crossorigin='anonymous'는 자격 증명 없이 CORS 요청을 보냅니다.

동적으로 로드되는 스크립트에도 SRI를 적용할 수 있나요?

네. JavaScript로 script 요소를 생성할 때 integrity 속성을 설정할 수 있습니다. 단, crossorigin 속성도 함께 설정해야 합니다. CSP의 require-sri-for를 사용하면 SRI 없는 스크립트를 차단할 수 있습니다.

Claude/Cursor에서 이 도구를 어떻게 사용하나요?

AI 에이전트 설정에 'npx -y @toolypet/mcp-server@latest'로 Toolypet MCP 서버를 추가하세요. 그런 다음 AI에게 sri_hash_generator 도구를 input, algorithm 파라미터와 함께 사용하도록 요청하세요.

MCP란 무엇이며 Toolypet은 왜 지원하나요?

MCP(Model Context Protocol)는 Claude나 Cursor 같은 AI 에이전트가 외부 도구를 사용할 수 있게 하는 개방형 표준입니다. Toolypet은 MCP를 지원하여 65개 이상의 모든 도구를 브라우저와 AI 에이전트 모두에서 사용할 수 있게 하며, 계산과 작업을 AI 워크플로우에 원활하게 통합합니다.

SRI 해시 생성기 | Toolypet

무료 온라인 SRI 해시 생성기. 서브리소스 무결성 해시를 생성하고 MCP로 자동화하세요.

이것은 무엇인가요?

Subresource Integrity(SRI) 해시를 생성하는 도구입니다. 외부 CDN에서 로드하는 스크립트와 스타일시트의 무결성을 보장하기 위한 SHA-256/384/512 해시를 생성하여 integrity 속성에 사용합니다.

입력

리소스 콘텐츠보호하려는 스크립트 또는 스타일시트의 정확한 콘텐츠를 입력하세요

해시 알고리즘SHA-384가 보안과 호환성의 최적 균형을 위해 권장됩니다

리소스 URL (선택사항)생성된 HTML 예제에 사용할 선택적 URL

미리보기

콘텐츠를 입력하고 생성 버튼을 클릭하여 SRI 해시 생성

사용 방법

외부 리소스의 내용을 붙여넣거나 URL을 입력하세요. 해시 알고리즘(SHA-256, SHA-384, SHA-512)을 선택하면 SRI 해시가 생성됩니다. 생성된 integrity 속성을 <script> 또는 <link> 태그에 추가하세요.

심층 분석

SRI는 CDN이 해킹되거나 중간자 공격으로 리소스가 변조되었을 때를 방어합니다. 브라우저가 리소스를 다운로드한 후 해시를 계산하여 integrity 속성의 값과 비교합니다. 불일치 시 리소스를 거부합니다. SRI 사용법: <script src="https://cdn.example.com/lib.js" integrity="sha384-해시값" crossorigin="anonymous">. crossorigin="anonymous"가 필요한 이유는 CORS가 활성화되어야 브라우저가 리소스 내용에 접근하여 해시를 계산할 수 있기 때문입니다. 다중 해시: 여러 해시를 공백으로 구분하여 나열하면, 하나라도 일치하면 리소스가 로드됩니다. 이는 리소스 업데이트 시 마이그레이션에 유용합니다. CSP와의 연동: require-sri-for 디렉티브(현재 deprecated)나 Trusted Types와 결합하면 더 강력한 보호가 가능합니다. CDN 장애 시 폴백을 위해 로컬 복사본을 준비하는 것도 좋은 관행입니다: <script src="cdn-url" integrity="..." onerror="loadLocalFallback()">

예시

CDN 스크립트 보호: jQuery, React 등 CDN 라이브러리의 SRI 해시 생성
CSS 무결성: 외부 스타일시트의 SRI 해시로 스타일 변조 방지
자동화: 빌드 프로세스에서 모든 외부 리소스의 SRI 해시 자동 생성
보안 감사: 기존 SRI 해시의 유효성 검증

Toolypet MCP 서버 설치

하나의 명령어로 AI 에이전트에 Toolypet 도구를 추가하세요. Claude Desktop, Claude Code, Cursor 및 모든 MCP 호환 클라이언트에서 사용 가능합니다.

빠른 시작

npx -y @toolypet/mcp-server@latest

MCP 클라이언트 설정

{
  "mcpServers": {
    "toolypet": {
      "command": "npx",
      "args": [
        "-y",
        "@toolypet/mcp-server@latest"
      ]
    }
  }
}

도구 이름:mcp__toolypet__sri_hash_generator

프롬프트 예시

Generate SRI hash for a JavaScript file content

입력 예시

{
  "content": "console.log('hello');",
  "algorithm": "sha384"
}

출력 예시

{
  "hash": "sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC",
  "integrity": "sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC",
  "tag": "<script src=\"...\" integrity=\"sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC\" crossorigin=\"anonymous\"></script>"
}

자주 묻는 질문

SRI가 왜 필요한가요?: CDN이 해킹되면 수천 개 사이트에 악성 코드가 주입될 수 있습니다. SRI는 브라우저가 리소스를 실행하기 전 해시를 검증하여, 변조된 리소스를 자동으로 차단합니다.
어떤 해시 알고리즘을 사용해야 하나요?: SHA-384가 가장 일반적으로 사용됩니다. SHA-256도 안전하지만 SHA-384가 성능과 보안의 균형이 좋습니다. SHA-512는 최고 수준이지만 integrity 속성이 길어집니다.
SRI 해시가 불일치하면 어떻게 되나요?: 브라우저가 리소스 로딩을 거부합니다. 스크립트는 실행되지 않고, 스타일시트는 적용되지 않습니다. onerror 이벤트로 폴백 로직을 구현하세요.
crossorigin 속성이 왜 필요한가요?: SRI 검증을 위해 브라우저가 리소스 내용에 접근해야 합니다. CORS 없이는 불투명(opaque) 응답으로 해시를 계산할 수 없습니다. crossorigin='anonymous'는 자격 증명 없이 CORS 요청을 보냅니다.
동적으로 로드되는 스크립트에도 SRI를 적용할 수 있나요?: 네. JavaScript로 script 요소를 생성할 때 integrity 속성을 설정할 수 있습니다. 단, crossorigin 속성도 함께 설정해야 합니다. CSP의 require-sri-for를 사용하면 SRI 없는 스크립트를 차단할 수 있습니다.
Claude/Cursor에서 이 도구를 어떻게 사용하나요?: AI 에이전트 설정에 'npx -y @toolypet/mcp-server@latest'로 Toolypet MCP 서버를 추가하세요. 그런 다음 AI에게 sri_hash_generator 도구를 input, algorithm 파라미터와 함께 사용하도록 요청하세요.
MCP란 무엇이며 Toolypet은 왜 지원하나요?: MCP(Model Context Protocol)는 Claude나 Cursor 같은 AI 에이전트가 외부 도구를 사용할 수 있게 하는 개방형 표준입니다. Toolypet은 MCP를 지원하여 65개 이상의 모든 도구를 브라우저와 AI 에이전트 모두에서 사용할 수 있게 하며, 계산과 작업을 AI 워크플로우에 원활하게 통합합니다.