XMLHttpRequest 와 Fetch API
<리얼월드 HTTP> 도서의 내용을 요약 정리하고 관련 내용을 추가하였습니다.
XMLHttpRequest
curl 커맨드의 기능을 자바스크립트로 사용할 수 있게 해주는 기능이 XMLHttpRequest이다. http 통신과 마찬가지로 클라이언트가 서버에 요청을 보내고, 그 응답으로 서버가 클라이언트에 데이터를 보낼 수 있다. 단, http처럼 서버 측에서 클라이언트에 요청을 보낼 수는 없다.(?)
XMLHttpRequest 와 브라우저의 http요청 차이
- 송수신할 때 html화면이 새로 고침되지 않는다.
- GET과 POST 이외의 메서드도 전송할 수 있다.
- 폼의 경우 키와 값이 일대일이 되는 형식의 데이터만 전송할 수 있고, 응답은 브라우저로 표시되어 버리지만, 플레인텍스트,json,binary data,xml등 다양한 형식을 송수신할 수 있다.
http의 경우, 파일 다운로드를 제외하면 서버의 응답을 받을 때는 화면이 일단 지워지고 브라우저 내에서 새로운 페이지가 렌더링된다. 하지만 XMLHttpRequest를 사용하면 자바스크립트 내에서 송수신이 완결되므로 화면이 지워지지 않아도 최신 정보를 가져올 수 있다. 이처럼 화면을 지우지않고 웹페이이지를 갱신할 수 있는 아키텍처를 ajax라고 한다.
XMLHttpRequest의 보안
XMLHttpRequest의 보안 제어는 액세스할 수 있는 정보 제한과 전송 제한이라는 두가지 제한으로 구성된다.
액세스할 수 있는 정보의 제한으로는 쿠키가 있다. 스크립트로 document.cookie 속성에 엑세스하면 브라우저에서 여는 페이지에 관한 쿠키를 모두 읽을 수 있다. 이 때, httponly 속성을 쿠키에 부여하면, 스크립트로 액세스할 수 없어지므로 외부로 유출될 위험이 줄어든다.
전송 제한에는 도메인, 메서드, 헤더 세 종류가 있다. 스크립트로 어느 웹사이트에나 자유롭게 액세스할 수 있게 되면, 악의가 있는 웹사이트로 정보를 전송해 버릴 수 있다. 이를 방지하기 위해 기본적으로 브라우저 액세스하고 있는 호스트에만 접근할 수 있다. 그 밖의 사이트에 액세스하는 방법으로서 xmlhttprequest뿐만 아니라 브라우저에서 널리 이용되는 CORS라는 액세스 제한 시스템이 있다.