브라우저에서 자바스크립트로 뭘 할수 있나?
1.AJAX call을 통해 API 호출
2.다이나믹하게 DOM을 제어
3.인증 정보를 브라우저에 저장
4.인증 정보를 불러 올 수
XSS
클라이언트가 서버를 신뢰하기 때문에 발생 이슈
서버에 메세지 요청 →메세지 응답 → 응답 받은 메세지 돔 반영
CSRF
반대로 서버가 클라이언트를 신뢰해서 발생하는 문제
서버가 인증벙보를 가지고 오면 믿는다.
CORS
브라우저에 두개 이상에 서버와 연결 되는 것을 예외적으로 허용하는 정책
Same-origin policy 브라우저 가 만든 → 하나의 서번만 연결한 허용
공인된 서버만 허용 브라우저엫서 이어나는 일이지만 서버에서 정의허용한다.
콜스를 통해 공인된 서버라는걸 인증
- 클라이언트와 서버가 서로 다른 origin에 있는 경우가 있으므로 CORS 기술이 도입
- 서버쪽에서 클라이언트를 대상으로 리소스의 허용 여부를 결정하는 방법
- 같은 origin에서 fetch를 시도하면 CORS 문제가 발생하지 않는다.
브라우저간의 데이터를 주고받는 과정에서, 도메인 이름이 서로 다른 사이트간에 api요청을 할 때, 공유를 설정하지 않았다면 CORS에러가 발생한다.
브라우저 —> 프론트 서버 (리액트) —> 백엔드 서버
origin(출처)이 다르다고 판단?
- 프로토콜
- 호스트(도메인)
- 포트번호
접근 제어 시나리오
1.단순 요청 Simple requests
단순 하게 에이피아이 보내고 받고 허용하면 허용 안하면 무반응
빠르다.
- preflight request : OPTIONS method
옵션 메소드를 미리 보낸다. 서버에게 허용하는 지 물어봄 어떤 메소드 허용하는지 응답이 제대로 오면 본 요청을 보낸다.
3.request with credentials
인증 벙보를 포함한 요청 (쿠키, 세션)
처음에 2번 플라이트 요청하고 인증되면 1번 단수요청읋
preflight request
- 실질적인 요청 전, OPTIONS 메서드를 통해 발생한다.
- 실제 요청이 안전한지 서버가 미리 파악할 수 있도록 하는 수단이다.
- 모든 cross origin 요청이 preflight request를 발생시키는 것은 아니다.
외부 도메인에서의 요청(접근)을 허용해주는 규약.
CORS에러 해결
브라우저에서 도메인 이름이 서로 다른 사이트를 내가 소유하고 있다면 설정을 통해 CORS에러를 해결할 수 있다. 데이터를 주고 받는 api요청을 할 때, 요청을 주는 쪽의 request 헤더와 요청을 받는 쪽의 response 헤더에 특정 값을 설정하면 된다.
"writeHead"는 response 객체의 메소드에서 헤더 정보를 응답에 작성해서 내보내는 것이다. 첫번째 인자는 상태 코드를 지정하고 두번째인수에 헤더 정보를 연관 배열로 정리한 것이다.
출처:
https://araikuma.tistory.com/453
[프로그램 개발 지식 공유]
