분류 전체보기
-
[React] 리액트 소개, 컴포넌트, JSX카테고리 없음 2020. 3. 2. 17:53
*리액트(React) 웹사이트에 넣을 수 있는 정보량이 많아지면 웹사이트는 빠른 속도로 복잡해진다. 이것은 무엇을 의미할까. 사이트 내 HTML 태그가 정보량과 함께 기하급수적으로 늘어난다는 것을 의미한다. 당장 페이스북에 들어가서 개발자도구를 켜보면 엄청난 양의 HTML태그가 있는 것을 확인할 수 있다. 말하자면 HTML태그를 효율적으로 관리할 수 있는 방법이 필요해지는 것이다. 만약 내가 반복해서 사용하는 HTML 태그를 한 덩어리에 담아 사용할 수 있다면 어떻게 될까. 말하자면 '사용자 정의 태그'를 만들어주는 것이다. 이 사용자 정의 태그를 사용하면 동일한 작업을 반복하지 않아도 될 뿐만 아니라(재사용성), 가독성이 좋아진다. 뿐만 아니라, 유지보수 또한 엄청나게 편해질 것이다. 리액트(React..
-
[Browser Security] XSS, CSRF카테고리 없음 2020. 2. 26. 00:15
* XSS (Cross-Site Scripting)사용자가 입력한 정보를 출력할 때, 스크립트가 실행되도록 하는 공격 방식이다. 사용자의 사적인 데이터, 이를테면 로그인 시 쿠키정보 등을 공격자의 사이트로 전송한다거나 사용자가 의도하지 않은 행동들을 하도록 한다. 예를 들어 사용자1이 인터넷 게시판에 글을 쓰면, 해당 내용은 서버로 전송되고 서버의 DB에 저장된다. 그리고 사용자2가 서버를 통해 해당 글 내용을 전송받는다. 공격자는 게시판에 글이 아니라 스크립트를 심어놓는다. 스크립트는 서버로 전송되고, DB에 저장된다. 그리고 피해자가 서버를 통해 해당 게시글을 열면 피해자의 브라우저에서 공격자가 심어놓은 스크립트가 실행된다. 스크립트 내에는 브라우저 내 쿠키에 저장된 피해자의 개인정보를 공격자의 서버..
-
[Browser Security] CORS카테고리 없음 2020. 2. 25. 23:56
* CORS : Cross-Origin Resource Sharing 웹브라우저의 기본 정책은 '도메인이 다르면 요청을 주고 받을 수 없다'이다. 이를 동일 출처 정책(SOP)이라고 한다. 유저가 브라우저에 주소값을 입력하면 서버로 요청이 보내지고, 이후 서버에서는 HTML 페이지를 반환해 준다. 이 모든 과정이 같은 도메인에서 일어난다. 과거에는 웹사이트에서 다른 서버로 요청을 보내면 보안상 악의적인 행동(피싱 등)을 하는 것으로 간주되었다. 때문에 브라우저에서는 같은 도메인이 아니면 요청 자체를 막아버렸다. 날씨 API를 이용하는 상황을 생각해보면 그림과 같다. 브라우저에서 웹서버로, 웹서버에서 날씨 API로 요청하는 이중 구조를 가지고 있다. 그냥 바로 브라우저에서 날씨 API를 직접 받아오면 훨씬..