스크립트 태그 무결성 속성

우리는 웹사이트가 열릴 때 브라우저에서 자바스크립트 파일을 로드한다는 것을 알고 있습니다. 대부분은 CDN 서버에서 제공됩니다.

문제

해당 웹 사이트의 CDN 서버 중 하나가 해킹되고 해커가 JS 파일 중 하나에 일부 악성 코드를 추가했다고 가정하면 클라이언트는 민감한 정보를 해커에게 노출할 위험이 있습니다.

그렇다면 이런 일이 발생하지 않도록 하려면 어떻게 해야 할까요?
브라우저는 이 JS 파일이 악의적이거나 변조된 것임을 어떻게 알 수 있습니까?

해결책

이 문제를 해결하기 위해 대부분의 브라우저는 스크립트 태그에서 integrity 속성이라는 새 속성을 지원하기 시작했습니다.

예시:

<script src="main.js" type="text/javascript" integrity="sha265-XU3HpWw3sNnYKqNWosvZyNN7HMyCOJGOrf1t5CLuuBc=" ></>

integrity 속성에는 두 부분이 있습니다. 첫 번째 부분은 알고리즘(sha256 또는 sha384 등)이고 두 번째 부분은 알고리즘에 의해 생성된 hash입니다.
integrity="{algorithm}-{hash}"

이 해시를 생성하는 방법은 무엇입니까?

기본적으로 이hash는 임의의 문자열이 아니며 JS 파일에 대해 생성됩니다. 이 해시는 JS 파일마다 다릅니다. JS 파일에 대한 hash는 아래 명령을 사용하여 생성할 수 있습니다.

명령:shasum -b -a 265 main.js | awk '{ print $1 }' | xxd -r -p | base64
이 명령의 출력은 스크립트 태그의 무결성 속성에 추가됩니다. JS 파일이 업데이트될 때마다 새 파일hash을 생성합니다.

실시간 개발에서는 hash를 수동으로 생성할 필요가 없습니다. webpack 또는 rollup 와 같은 대부분의 최신 번들러는 이제 JS 파일에 대한 hash 생성을 지원하고 관련 스크립트 태그에 추가합니다.

브라우저는 어떻게 유효성을 검사합니까?

브라우저가 JS 파일 다운로드를 완료하면 동일한 알고리즘( sha256 또는 sha384 )을 사용하여 동일한 파일에 대해 hash를 생성합니다.
이제 브라우저는 생성된 hash와 무결성 속성에 있는 hash를 비교합니다.
비교에 실패하면 브라우저는 해당 JS 파일의 실행을 허용하지 않습니다.



이 개념은 서버와 클라이언트 간에 데이터 무결성을 유지하려는 경우 모든 나머지 API에 적용할 수 있습니다.