210318_TIL(Chatterbox Client 마무리, Browser Security)
✅Toy 문제 tiling
타일을 일정 크기의 바닥에 몇 가지 방법으로 깔 수 있는지 경우의 수를 세는 문제를 풀었다.
조합으로 규칙을 찾아 경우의 수를 구하는 방식이다.
나는 재귀를 이용해 풀었다가 실행초과가 떴고, for문 하나를 돌려서 피보나치 수열방식으로 풀었더니 풀렸다.
래퍼런스를 봤더니 내가 사용했던 방식이 tabulation 이라는 데이터를 테이블에 정리하면서 bottom-up 방식으로 해결하는 기법이라고 했다.
전혀 이 기법을 생각하고 풀진 않았다.🙄
✅채팅앱 만들기(Chatterbox Client) 마무리
완전 기본 채팅만 할 수 있게 만들어졌다.
리스트를 만들어서 어드밴스트 도전도 만들고 싶었지만 못만들었다.
웹에 렌더링메세지가 잘 안뜨고 클릭 이벤트를 너무 이상하게 만들어서 시간에 쫓겼다.
시간이 남으면 진짜 채팅앱같은 느낌으로 만들어보고 싶다.
제일 만들어보고 싶었던 기능은 submit 버튼을 누르면 loading 창이 gif로 몇초동안 돌아가다가 화면에 내용이 뜨는 그런 상황을 구현하고 싶었는데 못했다.
후에 AJAX, JQuery 등을 더 배우고 쉽게 구현해보고 싶다. 공부하자🤮
✅CORS, Browser Security Model
네트워크와 관련된 개념들을 배웠는데, 처음 전송되는 도메인과 다른 도메인이 리소스 요청을 했을 때 CORS에 의해 요청된다는 것을 알게되었다.
서버는 요청에 대해 응답을 할 때 헤더의 Access-Control-Allow-Origin의 값으로 리소스 접근이 허용된 출처를 갖고 브라우저는 이후에 자기가 보낸 요청과 서버의 응답을 비교해 유효성을 판단하게 된다.
이런 CORS는 세가지 상황에 따라 동작하는 방식이 바뀐다.
첫 번째는 Preflight 요청인데, OPTIONS 메서드를 사용해 브라우저가 본격적인 요청을 보내기 전, 어떤 메서드를 사용할 수 있는지 파악하는 요청이다.
두번 째는 일반적인 요청인 Simple Request, 마지막은 보안 강화를 위해 요청시 인증을 함께 보내는 Credentialed Request 이다.
추가로 클라이언트가 서버를 신뢰해 발생하는, 메세지에 스크립트 등을 포함해 보내는 XSS이슈, 그리고 서버가 사용자 인증정보를 있는 그대로 믿어버리는 바람에 발생하는 이슈인 CSRF 이슈에 대해서도 배웠다.
🍒Remember
✅MIME type
클라이언트에게 전송된 문서의 다양성을 알려주기 위한 메커니즘
웹에서 파일의 확장자가 무엇인지 클라이언트에게 알려주는 등 문서의 타입 대한 정보를 알려주기 위해 정해둔 방법
(ex. text/plain, text/html, aplication/json, image/jpeg)
✅AJAX, JSON
Javascript 없던 시절 → XMLHttpRequest 로 HTML 조작(?)
Javascript 활발 이후 → JSON으로 Javascript로 DOM 조작 가능 (JSON은 Javascript 객체형식이니까 훨씬 다루기 편해짐...다른 언어에서도 키, 값 갖는 객체형식은 매우 흔해서 여기저기서 공통으로 쓰기 좋다.)
✅XSS, CSRF, XSRF
CSRF : 사용자는 인증 정보를 가진 체로 해커의 링크를 누르면, 해커는 인증정보를 가로채서 서버에 요청을 보내 버린다.
인증을 학습하면 이해가 쉽다.
XSRF(Cross-Site Request Forgery) : 쿠키만으로 인증하는 서비스의 취약점을 이용해, 사용자가 모르게 해당 서비스에 특정 명령을 요청하는 공격
XSS(Cross-Site Scripting) : 특정 사용자의 페이지에 스크립트를 추가하는 방식
보안이 약한 웹 어플리케이션에 대한 웹 기반 공격이고, XSS 공격의 희생자는 어플리케이션이 아닌 User이다.
XSS 공격에서 해로운 컨텐츠는 javascript를 활용하여 전달된다.
그리고 브라우저에서 기본적인 XSS 공격은 막혀 있다.
✅쿠키와 세션
쿠키 : 클라이언트에서 보관
세션 : 서버에서 보관
🍒More Study
✅CORS
✅TCP/IP
✅정적렌더링 vs 동적 렌더링