웹 어플리케이션이 다른 출처 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제
cross origin
요청은 기본적으로 제한 되어있다.cross origin
요청을 할 수 있도록 요청 cross origin
요청 허용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 request
위 사진과 같이 Simple request
조건을 만족한다면 Simple request
로 요청이 들어가고, 이 경우
Access-Control-Allow-Origin : *
로 응답이 온다. 이는 모든 도메인에서 접근할 수 있음을 의미한다.
OPTIONS
메소드를 이용해 서버에 확인 요청을 보낸다.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에 대한 응답을 캐시할 수 있는 시간(초)을 제공
서버에 스크립트 코드를 삽입하는 공격 방법
서버 자원을 사용하는 클라이언트가 피해를 보는 공격 방법이다.
발생 이유
공격의 예로 서버에 스크립트 코드를 사용해본다.
let data = {
"username": '김코딩',
"text": "<script>alert(1)</script>",
"roomname": '로비',
};
app.send(data); //서버에 데이터 추가하는 코드
위와 같이 서버에 스크립트 코드를 넣으면 해당 서버에 들어갔을 땐 데이터가 나오지 않고 경고창이 뜬다. 이를 응용하면 서버를 이용하지 못하도록 할 수도 있다.
위 서버에서 데이터를 가져와 보았는데 크롬에서 자체적으로 막혀있는 공격이라 클라이언트에선 따로 alert창이 뜨질 않았다.