이머시브 4주차 4째날이 되었다.
오늘은 어제 배웠던 HTTP에 이어서 CORS와 XSS에 대해서 배우며 어제부터 진행했던 ChatterBox Client과제를 마무리를 하는 날이었다. 블로깅을 통해 오늘 배운내용을 다시한번 머릿속에 채워넣는 시간을 가져보자 !
🔥Today Lesson🔥
- CORS
- XSS
CORS 🤶
CORS란?
CORS는 Cross-Origin Resource Sharing의 약자로 W3C에서 서로 다른 Origin에서 리소스(Resource)를 공유할 수 있도록 하기 위해 내놓은 정책입니다. 서로 다른 Origin 이라는 것은 도메인 혹은 포트가 다르다는 것을 의미하므로 서로 다른 도메인 주소 사이에서 데이터(예를 들면 API요청, 응답)를 주고받을 수 있도록 하기 위한 정책이라고 할 수 있습니다.
CORS는 왜 필요한가?
만약 내가 서비스하고 있지 않은 사이트에서 세션을 요청해서 세션을 획득할 수 있다면 해당 사이트는 악의적으로 내 세션을 탈취하거나 다른 행동을 할 수 있습니다. 그래서 브라우저에서는 이러한 요청을 막습니다. 피싱사이트가 대표적인 공격 사례인데 이러한 것을 막고 내가 허용한 origin들만 요청할 수 있도록 하기 위해 필요합니다.
XSS 🎅
XSS공격이란?
사이트 간 스크립팅으로 웹 앱에서 많이 나타나는 취약점의 하나이며, 웹 사이트의 관리자가 아닌 일반 유저가 웹 페이지에 악성 스크립트를 삽입할 수 있는 취약점이다.
XSS방지하는 방법
유저가 입력한 값 중에 HTML 코드로 인식될 수 있는 특수문자를 일반문자로 바꿔서 처리
웹 페이지를 출력할 때, HTML 코드로 인식될 수 있는 문자열(예를 들면 '<', '&' 등)을 일반 문자열로 바꿔서 출력하도록 하며, 유저가 입력한 값 뿐만 아니라 외부 시스템에서 온 데이터 등도 웹 페이지에 출력 대상이 되는 것이라면 반드시 처리해주는 것이 중요하다.
.replace()를 사용하여 악성코드입력을 문자열로 바꿀수도 있다.
하루를 마치며 👋
오늘은 어제부터 진행한 스프린트 과제를 마무리하며 cors에 대해서 조금 배우고 xss공격에 대하여 배우며 xss공격을 방지할수있도록 코드작성까지 해보았다. 아직은 fetch를 사용하여 데이터를 받아와서 전송하는게 익숙하지도 않고 어렵지만 그래도 2틀간 진행해보니 조금은 알거 같다는 생각이 들었다 ! 이후시간에도 계속 공부해보며 익숙해질수 있도록 노력해야겠다 !
