프런트엔드 보안

현대 웹 개발은 개발자들이 반드시 고려해야 할 각종 도전을 가져왔다. 예를 들어 성능, 접근성, 응답성 디자인과 안전성이다.불행하게도 안전성은 전방 개발자들에게 자주 무시되는 화제다.해커의 장비가 그 어느 때보다 선진적이며 가능한 모든 빈틈을 찾을 수 있다는 것을 알아야 한다.
본고에서 우리는 웹 응용 프로그램의 안전을 확보하는 기교를 소개할 것이다.

보안 빈틈의 패키지 의존 관계를 심사하다

우리 프로그램의 대부분 코드는 npm 에서 나온다.그래서 우리의 대다수 빈틈은 npm에서 나온다.이것은 제3자 코드이므로 맹목적으로 그것을 믿어서는 안 된다.v6에서 npm에서 패키지의 보안 빈틈 의존성을 평가할 수 있는 새로운 명령을 도입했습니다. npm audit이것은 공공 npm 등록표에 보고된 알려진 빈틈 검사 항목에 설치된 패키지의 현재 버전을 근거로 합니다.보안 문제가 발견되면 심각도low, moderate, high, critical 및 immer에 따라 보고되고 표시됩니다.

생성된 빈틈 보고서를 보면 패키지-react-dev-utils와 npm audit fix에 심각한 빈틈이 있고 복구 프로그램도 사용할 수 있습니다.
실행 integrity 명령은 호환성 업데이트를 공격받기 쉬운 종속성에 자동으로 설치합니다.

모든 보고서의 빈틈이 복구되었다.

타사 스크립트에 대한 서브 리소스 무결성 사용(SRI)

우리는 응용 프로그램에서 제3자 스크립트를 사용하는 것을 최대한 줄여야 한다.제3자 서비스가 파괴되면 조종된 스크립트를 제공하기 때문이다.그러나 제3자 스크립트가 일부 기능을 실현해야 하는 경우도 있을 수 있다.다행히도, 우리는 응용 프로그램을 보호하는 해결 방안을 가지고 있다.
응용 프로그램에 사용된 모든 제3자 스크립트에 Subresource Integrity(SRI) 속성이 포함되어 있는지 확인하십시오.이것은 스크립트 원본 파일의 파일 해시 값입니다.제3자 서버에 위탁 관리된 스크립트가 조종되지 않도록 확보하다.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

우리는 온라인integrity 산열 생성기를 사용하여 Content Security Policy (CSP) 산열을 생성할 수 있다. SRI Hash Generator.

CSP(Content Security Policy)

script-src는 일부 유형의 공격을 검측하고 완화시키는 데 도움이 되는 부가적인 안전층이다Cross-Site Scripting (XSS).XSS 공격은 서버에서 받은 내용에 대한 브라우저의 신뢰를 이용한다.악성 스크립트는 피해자의 브라우저가 실행합니다. 왜냐하면 브라우저는 내용의 출처를 신뢰하기 때문입니다. 설령 내용이 어디에서 온 것 같지 않더라도.
CSP는 신뢰할 수 있는 내용 원본의allowlist를 만들 수 있으며, 브라우저는 서버가 제공하는 모든 내용을 맹목적으로 신뢰하지 않고 이 원본에서 온 자원을 실행하거나 보여 줍니다.공격자가 스크립트를 주입하는 빈틈을 찾을 수 있어도 스크립트는allowlist와 일치하지 않기 때문에 실행되지 않습니다.

정책을 제정하다

정책은 일련의 정책 명령을 사용하여 설명하고 모든 명령은 특정한 자원 유형의 정책을 설명한다.
몇 가지 정책 지침:

script-src 'self'는 화이트리스트 스크립트 원본에 사용됩니다.현재 소스의 스크립트만 허용하려면 style-src를 사용합니다.

style-src 'self'는 화이트리스트 CSS 스타일시트 원본에 사용됩니다.현재 소스의 스타일시트만 허용하려면 img-src를 사용합니다.

font-src는 이미지 소스를 제한합니다.

media-src 글꼴을 불러올 수 있는 원본을 지정합니다.

frame-ancestors는 소리와 영상 자원의 출처를 제한한다.

<iframe> 제한은 현재 자원을 <object>, apis.google.com 및 유사 요소의 URL에 삽입할 수 있습니다.

우리는 Content-Security-Policy가 유효한 코드를 제공할 수 있다고 믿고 이를 할 수 있다고 믿기 때문에 다음 두 소스 중 하나에서만 스크립트를 실행할 수 있는 정책을 정의합니다.

HTTP 헤더를 사용하여 정책을 지정할 수 있습니다.

Content-Security-Policy: script-src 'self' https://apis.google.com

또는 <meta> 레이블을 사용하여 정책을 지정할 수 있습니다.

<meta http-equiv="Content-Security-Policy" content="script-src 'self' https://apis.google.com">

이 정책을 정의하면 브라우저는 다른 원본에서 스크립트를 불러오는 것이 아니라 오류만 던집니다.

결론

인터넷의 발전에 따라 현대 인터넷 응용은 신속하게 변화하고 있다.현재, 전단 코드와 후단 코드의 책임은 거의 같고, 심지어 더 많다.우리는 응용 프로그램을 구축할 때 보안을 명심해야 한다.

도구책

https://developers.google.com/web/fundamentals/security/csp

https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity