프론트엔드관점에서 헤더 보안 처리

프론트엔드 개발자 관점으로서 보안적인 문제들은 어떻게 처리해야 하는지 알아볼려고 합니다.

해커들의 공격이 들어왔을때 웹 브라우저를 통해서 공격을 시도할 수 있는데 이전에는 백엔드 서버 관점에서만 생각하였는데 어떤식으로 클라이언트에서 처리할 수 있는지 정리해볼려 합니다.

Response Header

헤더 관련해서는 보통 백엔드의 작업이지만 serverless로 구성된 서비스를 사용할때 프론트엔드에서의 책임이 있다고 합니다. 그래서 서버 통신을 할때 전송하는 response header의 값을 사용하는 서비스에 맞게 적절하게 구성해야한다고 합니다.

header값에 보안적인 키값들의 구성요소로는 아래의 예시처럼 구성으로 설정할 수 있습니다.

let securityHeaders = {
  "Content-Security-Policy" : "upgrade-insecure-requests",
  "Strict-Transport-Security" : "max-age=1000",
  "X-Xss-Protection" : "1; mode=block",
  "X-Frame-Options" : "DENY",
  "X-Content-Type-Options" : "nosniff",
  "Referrer-Policy" : "strict-origin-when-cross-origin",
  "Permissions-Policy": "geolocation=(self \"https://your.domain\"), microphone=()"
}

CSP의 경우 특정 유형의 코드 삽입을 방지함으로서 XSS(Cross-Site Scripting)이나 클릭 재킹을 막아줄 수 있다고 합니다.  CSP설정을 통해서 외부 리소스가 로드되는 도메인을 제어할 수 있습니다. 콤마(;)로 구분하며 예시로 구글 태그 매니저를 사용할 경우 google.com도메인을 csp에 추가함으로써 해결할 수 있습니다.

STS(Strict-Transport-Security)의 경우 Web Site에 접속할 때, 강제적으로 HTTPS 프로토콜로만 접속하게 하는 기능입니다. 즉 HTTPS 프로토콜을 지원하는 사이트에서 HTTPS만 사용해서 통신할 수 있음을 접속하고자 하는 브라우저에게 알려 주는 기능이라고 합니다. 

X-XSS-Protection으로 브라우저가 response를 차단하도록 해서 사용자 입력에 악성 코드가 입력되는것을 막을 수 있다고 합니다.

X-Frame-option를 설정함으로서 iframe 임베딩을 통한 클릭 재킹을 방지함으로 해결 할 수 있다고 합니다.

X-Content-Type-Options의 경우 웹서버가 보내는 MIME 형식 이외의 형식으로 해석을 확장하는 것을 제한하는 크로스사이트스크립트 방어법이라고 합니다.
MIME형식은 
- JavaScript MIME 형식("text/javascript" 또는 "application/javascript")

- CSS MIME 형식("text/css")
이 있습니다.

Feature-Policy를 설정해 애플리케이션이 필요로 하지 않는 특기능과 API에 대한 액세스를 거부하도록 만들 수 있다고 합니다.

Referrer-Policy를 설정해서 현재 웹사이트에서 다른 웹사이트로 이동시에 마지막 URL위치를 referrer헤더로 받는데 민감한 데이터를 포함하는경우가 있어서 방지할 수 있다고합니다. 
Referrer에 포함되어야하는 데이터가 있는 경우 따로 설정을 통해 해결할 수 있다고 합니다.

Permissions-Policy는 개발자가 웹브라우저 사용하는 API를 선택적으로 비활성화 또는 활성화 할 수 있는 것이라 합니다. CSP는 기능 통제라면 Permisiions-Poilcy의 경우 기능을 제어한다고 할 수 있습니다. 
기능의 경우 GPS, 카메라, 마이크를 말합니다.


참고 링크
https://dev.to/madsstoumann/frontend-security-security-headers-517p

Frontend Security: Security Headers