오늘은 실전프로젝트 아키텍처를 작성하면서 axios 를 사용하는 이유에 대해서 공부를 해봤다.
먼저 Axios란 ?
Axios 는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이고
백엔드와 프론트엔드가 통신을 쉽게 하기 위해 사용된다.
Axios 특징
1.운영 환경에 따라 브라우저의 XMLHttpRequset 객체 또는 Node.js의 http api 사용한다.
2.Promise(ES6 문법) API 사용한다.
3.요청하고 응답받은 data 를 변형 시킬 수 있다.
4.HTTP 요청과 응답을 JSON 형태로 자동으로 변경 시킨다.
자바스크립트의 fetch 함수도 axios 와 비슷하게 통신할때 다루는데 어떤 차이점이 있을까?
여러가지 차이점이 있는데
1. axios 는 XSRF 보호를 해준다
2. HTTP 요청을 가로챌수 있음.
3. 요청을 취소할 수 있고 타임아웃을 걸 수 있다.
XSRF란 무엇인가?
XSRF: Cross-Site Request Forgery
XFRF 라고도 하고, CSRF 라고도 한다.
쿠키만으로 인증하는 서비스의 취약점을 이용해, 사용자가 모르게 해당 서비스에 특정 명령을 요청하는 공격
예시를 들어보면
사용자가 쿠키만으로 인증하는 사이트에 로그인한 뒤 , B 사이트에서 XSRF 공격 코드를 만난다.
쿠키는 페이지가 다르더라도 요청 URL 이 같다면 요청되기 때문에 해당 요청은 유효하게 처리 된다.
방어:
GET 요청에 쓰기 작업을 할당하지 않고 유효한 API 콜인지 확인한다, 요청 헤더를 활용하면 쉽게 해결할 수 있다.
인증 정보를 쿠키 대신 헤더로 보냅니다.
