🔐 브라우저가 위협 받는 이유
브라우저는 자바스크립트를 구동하게 된다. 다시말해 자바스크립트에 의해서 브라우저는 위협을 받는다. 자바스크립트는 무궁무진하게 실행 가능한 일들이 많다. 때문에 자바스크립트로 위험한 일들도 실행이 가능하다.
- Ajax call을 해서 API를 호출 할 수 있다.
- 다이나믹하게 DOM을 제어 할 수 있다.
- 인증 정보를 브라우저에 저장 할 수 있다.
- 인증 정보를 불러 올 수도 있다.
🔒 XSS
XSS 란?
클라이언트가 서버를 신뢰하기 때문에 발생하는 이슈
서버에 메세지 요청 => 메세지 응답 => 응답 받은 메세지 돔 반영
위 과정에서 응답받은 메세지를 텍스트로 받았는데 이 텍스타가 해커가 심어놓은 텍스트인 경우 이다.
이로 인해서 단순히 html파일을 실행 시켰을 뿐인데 해커가 심어둔 텍스트에 의해서 내 컴퓨터에 있는 다른 스크립트가 실행되는 것이다. 앞서 말했다 시피 이렇게 실행되는 스크립트로는 정말 많은 일들을 할 수 있게 된다.
- 보안이 약한 웹 어플리케이션에 대한 웹 기반 공격
- XSS 공격의 희생자는 어플리케이션이 아닌 user
- XSS 공격에서 해로운 컨텐츠는 javascript를 활용하여 전달 됨
어떻게 막을 수 있을까?
최근 브라우저는 기본적으로 XSS공격은 막혀있다. 하지만 100% 막아주는 것은 아니다.
🔓 CSRF
CSRF 란?
서버가 클라이언트를 신뢰하기 때문에 발생하는 이슈
서버는 인증정보를 가지고 오면 믿는다. 사용자는 인증 정보를 가지고 해커의 링크를 누르면, 해커는 인증정보를 가로채서 서버에 요청을 보낸다.
🔏 CORS
CORS(Cross-Origin Resource Sharing : 교차 출처 리소스 공유) : 처음 전송되는 리소스에 도메인과 다른 도메인으로 부터 리소스가 요청될 경우 해당 리소스는 cross-origin HTTP요청에 의해 요청된다.
접근 제어 시나리오
-
단순 요청(Simple requests) : 일부 요청은
preflight를 요청하지 않는다. 이 경우 몇가지 조건을 충족해야 한다.
클라이언트와 서버간에 간단한 통신을 하고, CORS헤더를 사용하여 권한을 처리, 이 경우 브라우저가 서버로 전송하는 내용을 살펴보고, 서버의 응답을 확인한다.서버는 이에 대한 응답으로Access-Control-Allow-Origin헤더를 다시 전송한다. 가장 간단한 접근 제어 프로토콜은Origin헤더와Access-Control-Allow-Origin : *,으로 응답해야 하며, 이는 모든 도메인에서 접근할 수 있음을 의미한다. -
프리플라이트 요청(Preflighted request) : 단순 요청과는 달리 먼저
OPTION메소드를 통해 다른 도메인의 리소스로 HTTP 요청을 보내 실제 요청이 전송하기에 안전한지 확인 (Cross-site 요청은 유저 데이터에 영향을 줄 수 있기 때문에 미리 전송(preflighted)한다.)
- 첫번째 통신으로 통해서 preflight request/response 완료
- 첫번째 통신이 완료되면 실제 요청을 전송
- 인증정보를 포함한 요청(credentialed request) :
HTTP cookies와HTTP Authentication정보를 인식한다. 기본적인 형식은 단순요청으로 요청이 되지만 브라우저는Access-Control-Allow-Credentials: true헤더가 없는 응답은 거부한다.
HTTP 응답 헤더
Access-Control-Allow-Origin : <origin> | *: 단일 출처를 지정하여 브라우저가 해당 출처가 리소스에 접근하도록 허용 합니다.Access-Control-Expose-Headers : <header-name>: 브라우저가 접근할 수 있는 헤더를 서버의 화이트리스트에 추가 가능Access-Control-Max-Age : <delta-seconds>: 프리플라이트 요청 결과를 캐시할 수 있는 시간Access-Control-Allow-Credentials : true:credentials플래그가 true일 때 요청에 대한 응답을 표시할 수 있는지를 나타낸다.Access-Control-Allow-Methods : <method>: 리소스에 접근할 때 허용되는 메서드를 지정Access-Control-Allow-Headers : <header-name>: 요청시 사용할 수 있는 HTTP 헤더를 나타낸다.
HTTP 요청 헤더
Origin : <origin>: cross-site 접근 요청 혹은 preflight request의 출처 명시Access-Control-Request-Method: 실제 요청에서 어떤 메서드를 사용할지 알려줄 때, preflight request에서 사용Access-Control-Request-Headers: 실제 요청에서 어떤 헤더를 사용할지 알려줄 때, preflight request에서 사용
