Today I Learned
PUT vs PATCH
PUT은 데이터 전체를 수정하고, PATCH는 데이터 일부를 수정한다.
Chatterbox-Client에서 서버로부터 데이터를 받아 DOM에 표시하는 기능을 구현했다.
Chatterbox-Client Advanced Challenges를 완료했다.
- room 생성 기능
- auto fetch 기능
- 새로고침을 하더라도 이전 room 유지(요구사항 아님)
Browser Security
CORS(Cross-Origin Resource Sharing)
동일한 도메인으로 리소스 요청 => Same-Origin Requests
다른 도메인으로 리소스 요청 => Cross-Origin Requests
보안 상의 이유로 다른 도메인에게 데이터를 요청할 때 브라우저는 HTTP 요청을 제한한다. 다른 출처로부터 데이터를 불러오려면 그 출처에서 올바른 CORS 헤더를 응답을 반환해야 한다. XMLHttpRequest 또는 Fetch와 같은 API에서 CORS를 사용하여 교차 출처 HTTP 요청의 위험을 완화한다.
일부 요청이 어느 조건을 충족하면 simple request일 뿐, cors preflight를 트리거하지 않는다. simple request를 하는 경우
XSS(Cross-site Scripting)
가장 단순하고 기초적인 공격 방법의 일종으로, 공격하려는 사이트에 악의적으로 작성한 스크립트를 넣는 것을 말한다. 사용자가 사이트에 접속하면 스크립트가 실행되어 의도치 않은 동작을 하거나, 개인정보와 같은 민감한 정보들을 갈취할 수 있다. 최신 브라우저의 경우, 브라우저 자체에서 차단된다.
클라이언트 단에서의 보안이 중요하다.
CSRF(Cross-site Request Forgery)
사용자가 웹 사이트에 로그인된 상태(쿠기 or 토큰 보유)로 공격자가 위조한 특정 웹사이트에 접속하게 되면, 사용자의 정보를 이용한 스크립트가 실행되어 사용자도 모르게 웹 사이트에 공격 명령을 발송하게 만든다. 서버는 신뢰할 수 있는 사용자가 보낸 요청으로 인식하고 이를 허용한다.
서버 단에서의 보안이 중요하다.
오늘은 chatterbox를 완성했다. slider를 제작할 때 이미지를 불러오는 용도로 fetch API를 사용해본 적은 있었지만, 추가로 POST 요청까지 보내어 서버에 데이터를 저장하고 불러오는 기능을 구현을 처음해본거라 꽤 재미있었다. 게시판 역할을 하는 room을 선택해서 해당 room에 글을 남길 수 있는 기능 뿐이지만, 클라이언트 측에서 서버에 요청을 보내고 응답을 받아보는 실습을 할 수 있었다.
클라이언트와 서버 간의 네트워크 연결을 해야하므로 보안 관련 내용을 당연히 알아야하겠지만, 갑작스럽게 브라우저 보안에 관한 내용을 다루기 이해하기 어려웠다... 다만 여러 레퍼런스를 찾아보고 network 탭을 통해서 눈으로 직접 확인할 수도 있는 내용이라 막 낯설거나 하진 않았다. 다음 server 스프린트에서도 cors에 대한 내용을 직접 다룰 것으로 보이니 정확히는 잘 모르더라도 그냥 넘어가기로 했다.
요즘 아침에 일어나기가 점점 힘들어진다... 1시나 2시에 잠드는데 12시 이전에는 꼭 자야겠다...
