Brower Security

CORS(Cross-Origin Resource Sharing)

웹 어플리케이션이 다른 출처 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제

• 브라우저에서 cross origin 요청은 기본적으로 제한 되어있다.
  • 이유? 임의의 클라이언트가 서버에 어떤 리소스를 추가할지 모르기 때문에
  • 개발자들은 웹 어플리케이션 고도화를 위해 cross origin 요청을 할 수 있도록 요청
  • 서버가 허용하는 범위내에서 cross origin 요청 허용

언제 발생?

• 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 발생
• 즉, 출처가 다른 값에 접근할 때는 CORS 정책에 따라 접근한다는 것.

CORS 동작 방식

const defaultCorsHeaders = {
  'access-control-allow-origin': '*',
  //모든 origin의 접근을 허용
  'access-control-allow-methods': 'GET, POST, PUT, DELETE, OPTIONS',
  //허용되는 method
  'access-control-allow-headers': 'content-type, accept',
  //헤더에는 content-type과 accept만 쓸 수 있다.
  'access-control-max-age': 10
  //preflight request는 10초까지 허용된다.
}

Simple requests

• 아래 조건을 모두 만족한 경우 Simple request
• 메소드
  • GET, HEAD, POST 메서드만 사용
• User agent가 자동으로 설정 한 헤더 + Fetch 명세에서 정의한 헤더
• 허용되는 Content-Type
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain

위 사진과 같이 Simple request조건을 만족한다면 Simple request로 요청이 들어가고, 이 경우
Access-Control-Allow-Origin : *로 응답이 온다. 이는 모든 도메인에서 접근할 수 있음을 의미한다.

options

• 서버에서 허용하는 조건을 다 맞추고 있는지 확인하는 메소드
  • 위 그림과 같이 다른 origin에서 요청을 보낼 때 먼저 OPTIONS 메소드를 이용해 서버에 확인 요청을 보낸다.
  • 이후 허락이 되면 서버에 접근할 수 있다.

preflighted requests

• Simple request 조건을 만족시키지 못한 요청인 경우 preflighted request 요청이 들어간다.

• 위 사진은 foo.example에서 다른 도메인으로 요청을 보내는 경우의 사진이다. simple request 조건을 충족시키지 못했으므로 options 메서드를 이용해 실제 요청 파라미터로 요청을 보낼 수 있는지 확인하는 요청을 보낸다.
  option메서드와 함께 Access-Control-Request-Method: POST Access-Control-Request-Headers: X-PINGOTHER, Content-Type 요청 헤더가 전송된다.
  Access-Control-Request-Method: POST는 실제 요청을 전송할 때 POST메서드로 한다는 것이고,Access-Control-Request-Headers는 X-PINGOTHER, Content-Type 사용자 정의 헤더 와 함께 전송된다는 것을 서버에 알려준다. 이를 보고 서버는 요청을 수락할지 결정한다.

• preflight request 요청 이후 아래와 같이 응답이 온다.

Access-Control-Allow-Origin: http://foo.example // foo.example은 서버에 접근할 수 있다는 의미
Access-Control-Allow-Methods: POST, GET, OPTIONS //POST, GET, OPTIONS로 접근할 수 있다는 의미
Access-Control-Allow-Headers: X-PINGOTHER, Content-Type// 실제 요청에 헤더를 사용할 수 있음을 확인
Access-Control-Max-Age: 86400 //다른 preflight request를 보내지 않고, preflight request에 대한 응답을 캐시할 수 있는 시간(초)을 제공

• 위와 같이 답장이 온다면 서버에 실제 요청을 보낼 수 있게 된다.

XSS

서버에 스크립트 코드를 삽입하는 공격 방법
서버 자원을 사용하는 클라이언트가 피해를 보는 공격 방법이다.

• 발생 이유

  • 클라이언트가 서버를 신뢰하기 때문에 발생하는 이슈

• 공격의 예로 서버에 스크립트 코드를 사용해본다.

let data = {
        "username": '김코딩',
        "text": "<script>alert(1)</script>",
        "roomname": '로비',
};
app.send(data); //서버에 데이터 추가하는 코드 

• 위와 같이 서버에 스크립트 코드를 넣으면 해당 서버에 들어갔을 땐 데이터가 나오지 않고 경고창이 뜬다. 이를 응용하면 서버를 이용하지 못하도록 할 수도 있다.

  

• 위 서버에서 데이터를 가져와 보았는데 크롬에서 자체적으로 막혀있는 공격이라 클라이언트에선 따로 alert창이 뜨질 않았다.