Written by angular-style
on 2021-07-08

JavaScript에서 무결성 검사의 중요성

반응형

JavaScript 파일을 로드하기 위해 script 태그를 사용하는 것은 모든 개발자에게 매우 간단합니다. 하지만 브라우저에 로드하기 전에 이러한 스크립트 중 하나라도 담금질되면 어떻게 되는지 궁금해 본 적이 있습니까?

답은 뻔하다. 이로 인해 중요한 데이터가 노출되는 심각한 보안 침해로 이어질 수 있습니다.

따라서 이러한 스크립트의 무결성을 검증하여 스크립트 발생을 방지할 수 있는 안전 조치를 마련해야 합니다. 가장 인기 있는 솔루션 중 하나는 최신 브라우저의 SRI(하위 리소스 무결성)입니다.

SRI(하위 리소스 무결성)란 무엇입니까?

이를 통해 개발자는 해당 무결성 코드를 확인하여 로드 중인 타사 리소스가 변조되었는지 여부를 식별할 수 있습니다.

그렇다면 무결성 코드란 무엇일까요? 애플리케이션에 어떻게 사용할 수 있습니까?

다음 섹션에서 이러한 질문에 답변하겠습니다.

실제로 SRI 사용

먼저 스크립트 태그와 함께 사용하는 방법을 살펴보겠습니다. SRI를 구현하려면 무결성이라는 속성을 사용하여 스크립트 태그를 수정하기만 하면 되며, 아래 코드는 간단한 SRI 구현을 보여 줍니다.

base64-hashsa384 해시의 무결성 문자열은 다음과 같습니다.

sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo

작동 방식

SRI가 정의되면 파일의 해시가 스크립트 태그와 함께 정적으로 정의됩니다. 따라서 파일이 타사 서버(예: CDN)에서 제공되더라도 브라우저는 파일을 다운로드하고 해당 파일의 해시를 계산합니다.

그런 다음 페이지의 스크립트 태그로 정의된 해시와 비교합니다. 해시가 일치하면 파일이 다운로드되고 일치하지 않으면 파일이 차단됩니다. 따라서 강화 파일이 실행되지 않습니다.

CDN에서 많이 사용되는 JavaScript 라이브러리를 참조하는 경우 각 릴리스에 무결성 해시가 언급될 수 있습니다. 몇 가지 예로는 jQuery, BootStrap이 있습니다.

이와 별도로 SRI를 사용하여 개발하는 파일을 보호할 수도 있습니다. 그러면 실제로 SRI를 생성하는 방법을 살펴보겠습니다.

SRI 생성

파일에 대한 해시를 생성하려면 openssl을 사용하면 됩니다. 먼저 파일의 내용을 입력으로 openssl에 전달하고 sha384를 사용하여 다이제스트를 생성해야 합니다. 그런 다음 다른 openssl 명령에 입력으로 전달하여 base64를 인코딩해야 합니다. 이 작업은 다음 명령을 사용하여 수행할 수 있습니다.

cat myfile.js | openssl dgst -sha384 -binary | openssl base64 -A

이것을 위한 또 다른 방법은 샤섬을 사용하는 것이다.

shasum -b -a 384 myfile.js | awk '{ print $1 }' | xxd -r -p | base64

이것은 프로젝트에 SRI를 통합하는 수동 방법입니다. 하지만, 오늘날에는 이것을 할 수 있는 미리 만들어진 메커니즘이 있다.

예를 들어 애플리케이션의 빌드 프로세스에 통합될 수 있으며 사용할 번들링 툴에 따라 달라집니다.

웹 페이지-하위 리소스-integrity — 웹 팩을 사용하여 사이트를 구축하는 경우 이 도구를 사용할 수 있습니다.

또한 무결성 코드를 생성하기 위한 온라인 툴인 srihash.org도 있습니다.

SPA와 함께 사용

HTML 페이지에서 스크립트 태그를 거의 조작하지 않기 때문에 현대판 단일 페이지 애플리케이션(SPA)에서 SRI를 어떻게 사용할 수 있을지 궁금해하시는 분들도 계실 겁니다.

하지만 여러분 대부분이 번들에 웹팩을 사용하기 때문에(SPA 라이브러리와 Resource-Integrity NPM 라이브러리(Ract, Angular와 같은 프레임워크에서 기본 제공됨) 우리는 웹팩-하위 리소스-integrity NPM 라이브러리를 사용하여 무결성 해시 생성을 처리할 수 있습니다.

다음과 같이 단계는 매우 간단합니다. 자세한 내용은 라이브러리 설명서를 참조하십시오.

1단계: 플러그인 설치

npm install webpack-subresource-integrity — save-dev or yarn add --dev webpack-subresource-integrity

2단계: 웹 팩 구성

import SriPlugin from 'webpack-subresource-integrity'; const compiler = webpack({ output: { crossOriginLoading: 'anonymous' }, plugins: [ new SriPlugin({ hashFuncNames: ['sha256', 'sha384'], enabled: process.env.NODE_ENV === 'production', }), ], });

브라우저 지원

Internet Explorer를 제외한 모든 최신 브라우저는 SRI를 지원합니다. 하지만 지원되지 않는 브라우저에 영향을 주지 않으면서 지원되는 브라우저의 보안 위험을 줄여주므로 사용하기에 매우 안전합니다.

결론

CDN에서 리소스 및 타사 라이브러리를 소싱하는 경우 SRI가 매우 중요합니다. 무결성 검사를 통해 로드하는 리소스가 변경되지 않았는지 확인할 수 있습니다. 이 경우 브라우저가 오류 메시지와 함께 이 리소스를 차단합니다.

따라서 해커 및 기타 손상으로부터 이 안전 메커니즘을 보호하려면 이 안전 메커니즘을 반드시 갖추어야 합니다.

읽어줘서 고마워!

발전시키다

Bit는 독립적으로 작성, 소스 제어 및 유지 보수되는 구성 요소를 사용하여 진정한 모듈형 애플리케이션을 만들 수 있는 확장성이 뛰어난 툴입니다.

모듈식 애플리케이션 구축에 사용

더 배우기

from http://issue-disk.tistory.com/360 by ccl(A) rewrite - 2021-07-08 09:26:50

Top