오꾸오꾸(오늘도 꾸준히 오랫동안 꾸준히)

csrf란? Cross-site request forgery, 사이트 간 요청 위조 사이트 간 요청 위조는 웹사이트 취약점 공격의 하나로, 사용자가 자신의 의지와는 무관하게 공격자가 의도한 행위를 특정 웹사이트에 요청하게 하는 공격을 말한다. CSRF(cross site request forgery) 다른 사이트에서 유저가 보내는 요청을 조작한다 ex) 이메일에 첨부된 링크를 누르면 내 은행계좌의 돈이 빠져나감 해커가 직접 데이터를 접근할 수 없다. ex) 다른 오리진이기 때문에 response에 직접 접근할 수 없음 CSRF 공격을 하기 위한 조건 쿠키를 사용한 로그인 유저가 로그인 했을 때, 쿠키로 어떤 유저인지 알 수 있어야함 예측할 수 있는 요청/parameter를 가지고 있어야함 request에..

보호되어 있는 글입니다.

토큰이란 통행증과 같은 개념이다. 클라이언트로 로그인할 시 서버에서 인증을 거친 다음 토큰을 내어주는 방식으로 다음 부터 서버에 요청시 토큰을 같이 보내어 인증을 가진다. 토큰 기반 인증은 왜, 그리고 언제 쓸까요? 세션 기반 인증은 서버(혹은 DB)에 유저 정보를 담는 인증 방식이었습니다. 매 요청마다 데이터베이스를 살펴보는 것이 불편하고, 이 부담을 덜어내고 싶다면 어떤 방법이 있을까요? 이럴 때 사용할 수 있는 토큰 기반 인증 중 대표적인 JWT (JSON Web Token)에 대해서 알아봅시다. 클라이언트에서 인증 정보 보관 클라이언트가 토큰을 가지고 있다면 보통의 다른(돈을 내지 않은) 유저들과는 다르게 서버에서 제공하는 다양한, 더 프리미엄한 기능을 요청할 수 있을 것입니다. 토큰을 클라이언트..

세션(Session)이란? HTTP Session id를 식별자로 구별하여 데이터를 사용자의 브라우저에 쿠키형태가 아닌 접속한 서버 DB에 정보를 저장한다. 클라이언트는 HTTP Session id를 쿠키로 메모리 저장된 형태로 가지고 있다. 메모리에 저장하기 때문에 브라우저가 종료되면 사라지게 된다. 중요 서버가 client에 유일하고 암호화된 ID를 부여 중요 데이터는 서버에서 관리 서버에 접속 상태가 저장 신뢰할 수 있는 유저인지 확인이 가능 Cookie에 세션 아이디가 저장 세션의 흐름 1. 클라이언트가 서버에 Resource를 요청합니다. 2. 서버에서는 HTTP Request를 통해 쿠키에서 Session id를 확인을 한 후에 없으면 Set-Cookie를 통해 새로 발행한 Session-id..

Cookie 서버가 사용자의 위치에 정보를 저장하고 불러올 수 있는 수단 특정 호스트에서 생성된 쿠키는 이후 모든 요청마다 서버로 다시 전송 이름, 값, 만료 날짜, 경로 정보로 구성 쿠키가 없으면 서버가 쿠키를 자동적으로 생성해서 리스폰스에 담아서 보내준다. 그 이후로는 쿠키가 자동적으로 http 요청에 담겨져서 오게 된다. 클라이언트에 저장되어 관리된다. 서버와 클라이언트의 대화하기 위한 수단이다. 쿠키의 목적 세션 관리, 개인화, 추적 세션 관리 로그인 쇼핑 카트, 게임 점수 또는 서버가 기억해야 하는 기타 사항 개인화 사용자 환경설정, 테마 및 기타 설정 추적 사용자 동작 기록 및 분석 쿠키의 구성요소 Name :쿠키의 이름 Value : 쿠키의 저장된 값 Expires : 쿠키가 언제 삭제되는지..

[인증/보안] 기초 회원 가입 및 로그인, 로그아웃과 같은 기능을 구현하게 됩니다. 이와 더불어 큰 개념인 인증(authentication)에 대해서 알아봅니다. 인증(Authentication)은 요청이 왔을 때 그 요청을 보낸 사람이 누구인지를 증명하고, 그 요청에 대한 답(정보)를 줄 것인지 결정할 때 확인하는 절차를 말한다. 권한(Authorization)은 인증(Authentication)을 통해 증명된 누군가가, 어떤 권한을 가지고 있어서, 어떠한 액션을 허용하는지 확인한는 절차를 말한다. 클라이언트, 서버, 데이터베이스 모두를 다루면서, Full Stack 개발 환경에서의 전체적 흐름 및 작동을 직접 확인합니다. 암호화와 hashing, salting 등의 개념을 이해할 수 있다. 암호화: ..

axios란? Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리입니다. 일종의 자바스크립트에 내장되어 있는 fetch api와 유사한 기능을 하지만 차이점이 몇가지 있습니다. 그렇다면 axios의 장단점을 알아보기 위해 그 차이를 비교하도록 하자 axios vs fetch axios fetch 요청 객체에 url이 있다. 요청 객체에 url이 없다. 써드파티 라이브러리로 설치가 필요 현대 브라우저에 빌트인이라 설치 필요 없음 XSRF 보호를 해준다. 별도 보호 없음 data 속성을 사용 body 속성을 사용 data는 object를 포함한다 body는 문자열화 되어있다 status가 200이고 statusText가 ‘OK’이면 성공이다 응답객체가..

✓ props에 userData 객체가 존재해야 합니다. import React from 'react' import axios from 'axios' const endPoint = 'https://localhost:4000/users/logout' function Mypage(props) { const handleLogout = () => { // TODO: 서버에 로그아웃 요청을 보낸다음 요청이 성공하면 props.logoutHandler를 호출하여 로그인 상태를 업데이트 해야 합니다. // ✓ 로그아웃 버튼이 클릭된 경우, POST `/users/logout` 요청을 보내야합니다. // 로그아웃 요청이 성공한 이후, logoutHandler 함수가 호출되어야 합니다 axios .post(endPoin..

✓ 인증서 파일이 존재해야 합니다 $ mkcert -install $ mkcert -key-file key.pem -cert-file cert.pem localhost 127.0.0.1 ::1 ✓ 환경 변수에 데이터베이스 비밀번호가 존재해야 합니다. DATABASE_PASSWORD= 비밀번호 DATABASE_PASSWORD= 비밀번호 ✓ 성공적으로 데이터베이스에 연결해야 합니다 npm install --save-dev sequelize-cli npx sequelize-cli init npx sequelize-cli db:migrate ✓ 데이터베이스에 `Users` 테이블이 존재해야 합니다 npx sequelize-cli model:generate --name User --attributes firstN..

GET method GET 방식의 요청에서 파라미터를 전송하는 방법은 두가지가 있다. 쿼리스트링(Querystring)이나 경로(path)를 통하여 파라미터를 전달할 수 있다. 각각의 방법을 알아보자 Request Methods req.params : 이름 붙은 라우트 파라미터를 담는다. // GET /user/tj console.dir(req.params.name) // => 'tj' // GET /file/javascripts/jquery.js console.dir(req.params[0]) // => 'javascripts/jquery.js' req.query : GET 방식으로 넘어오는 쿼리 스트링 파라미터를 담고 있다. req.body: POST방식으로 넘어오는 파라미터를 담고있다. HTTP의 ..