220316 D+60 HTTPS, Hashing, Cookie, Session, CSRF

✷ javascript index.js

 

1. HTTPS(Hyper Text Transfer Protocol Secure Socket layer)

: HTTP 프로토콜 내용을 암호화.

→ 상대적으로 HTTP 통신보다 안전하다.

→ 요청 내용을 한 번 암호화시키기 때문에(암호화된 데이터를 주고받기 때문에)

개인정보 등 중요한 정보가 유출되더라도 정확한 키로 복호화하기 전까지 어떤 내용인지 알 수 없음.

 

✷ HTTPS가 동작하는 방식

 

‣ 인증서(Certificate)

: 데이터를 제공한 서버가 정말 데이터를 보내준 서버인지 인증, 확인하는 용도.

→ 브라우저가 응답과 함께 전달된 인증서 정보를 확인할 수 있다.

→ 서버의 도메인 정보가 있어 데이터 제공자의 신원을 보장한다.

 

✷ 인증에서 데이터 제공자의 신원을 확인하고 보장받는 것이 중요한 이유

‣ 클라이언트는 데이터 제공자가 제공해 준 데이터를 사용할 수밖에 없다.

→ 클라이언트는 서버에 데이터 요청을 한 이후 받은 데이터를 사용하여

화면을 렌더링 하는 등의 작업을 해야 한다.

→ 그렇기 때문에 요청 및 응답을 중간에서 가로채는 중간자 공격에 취약하다.

(중간자 공격: 클라이언트와 서버 사이에서 공격자가

서로의 요청, 응답의 데이터를 탈취 및 변조하여 다시 전송하는 공격)

 

‣ 데이터가 중간에 다른 도메인을 거쳐서 전달되기 때문에 서버가

해당 데이터는 https://example.com 도메인에서 제공되었습니다.

라는 추가 데이터를 응답 객체에 실어 보낸다면 '중간자 공격'으로 인해 다른 도메인에서 데이터를 받은 클라이언트는

데이터를 제공한 도메인과 전달받은 내용의 도메인을 비교하여 '중간자 공격'이 존재하는지 아닌지 확인할 수 있다.

 

→ 보안 위협으로부터 사용자 및 사용자의 데이터를 보호할 수 있다.

→ 이러한 경고를 직접 보여줌으로써 브라우저들은 인증된 CA가 발급된 인증서를 이용하여

데이터를 제공하는 안전한 서버를 이용할 수 있게 사용자를 유도한다.

→ 중간자 공격으로 인해 이런 추가 데이터 또한 변조할 수 있기 때문에

    해당 데이터를 암호화시키는 작업이 필요하다.

 

요청을 받는다면 서버는 인증서와 함께 응답을 전송하고,

응답을 받은 클라이언트는 인증서에 작성된 도메인과 응답 객체에 작성된 도메인을 비교한다.

 

→ 응답에서 확인한 도메인과 인증서에 작성된 도메인이 같다면

    정말 데이터를 제공해준 서버가 맞다는 것을 인지한다.

→ 중간에 요청을 탈취하여 제 3자의 공격 발생 시

응답에서 확인한 도메인과 인증서에 작성된 도메인이 같지 않아

정말 데이터를 제공해준 서버가 맞다는 것을 확신할 수 없다. 

⇒ 클라이언트는 데이터를 제공해준 서버가 아니라는 것을 알 수 있게 된다.

 

‣ CA(Certificate Authority)

: 인증서를 발급하는 공인된 기관.

→ 각 브라우저는 각자 신뢰하는 CA의 정보를 가지고 있다.

→ 각 브라우저는 인증서도 다 차이가 나게 된다.

→ CA는 자격을 박탈당할 수도 있다.

 

‣ 비대칭 키 암호화

: 전혀 다른 키 한 쌍으로 암호화 및 복호화를 진행할 수 있다.

→ 다만 어느 하나의 키로 진행했다면 복호화할 때는 다른 키가 필요함.

⇒ 공개키(public key)로 암호화한 데이터는 그에 맞는 개인키(private key)로만 복호화 가능.

⇒ 키 한 쌍 중 하나는 비밀로 숨겨두고(private key)

다른 하나(public key)는 클라이언트에 공개하여 데이터를 안전하게 전송할 수 있게 한다.

 

(개인키(private key)로 암호, 공개키(public key)로 복호=전자서명

  공개키로 암호, 개인키로 복호=암호화)

 

✷ 대칭키 암호화

: 키 한 개로 암호화 / 복호화

✷ 모든 통신에 대해 공개 키 방식을 사용하는 것은 아니다.

공개 키 방식은 많은 클라이언트를 대상으로 매번 사용하기에는 연산이 복잡한 알고리즘이기 때문에

통신의 초창기에서만 비밀 키로 사용하기 위한 키를 만들어내기 위해 사용한다.

 

‣ Hand Shake

서로를 확인하고 서버는 클라이언트에 공개 키 한 쌍의 키 중 하나를 전달한다.

 

‣ 비밀 키 생성

: 클라이언트는 전달받은 키를 이용하여 서버와 키를 만들어 낼 임의의 정보를 암호화하여 전달한다.

이에 서버는 클라이언트와 마찬가지로 임의의 정보를 암호화하여 전달한다.

클라이언트 및 서버는 서로 만들고 교환한 임의의 정보를 바탕으로 비밀 키를 생성하게 된다.

 

‣ 상호 키 검증

: 각자 생성한 키를 바탕으로 클라이언트가 테스트용 데이터를 만들어 낸 비밀 키로 암호화하여 전달한다.

서버 역시 만들어진 비밀 키로 복호화하고 다시 암호화하여 클라이언트에 전달한다.

만약 클라이언트가 같은 내용의 데이터를 복호화하는데에 성공했다면,

성공적으로 비밀 키가 만들어진 상태이며 HTTPS 연결이 성립한 상태이다.

이후 비밀 키를 바탕으로 정말 데이터 송수신에 필요한 동일 키 암호화 및 복호화를 진행한다.

 

 

2. HTTPS 사설 인증서 발급 및 서버 구현

// homebrew를 통한 mkcert 설치
brew install mkcert

// 로컬을 인증된 발급기관으로 추가하는 명령어
mkcert -install

// 로컬 환경에 대한 인증서 만들기
// localhost로 대표되는 로컬 환경에 대한 인증서 만들기
mkcert -key-file key.pem -cert-file cert.pem localhost 127.0.0.1 ::1
비밀번호 입력
옵션으로 추가한 localhost, 127.0.0.1(IPv4), ::1(IPv6)에서 사용할 수 있는 인증서가 완성되었다. 
cert.pem, key.pem 이라는 파일이 생성된 것을 확인할 수 있다(저장경로 제대로 확인해 둘 것)
인증서는 공개키, 그리고 인증기관의 서명을 포함하고 있으므로 공개되어도 상관이 없지만, 
key.pem의 경우 개인 키이므로 git에 커밋하지 않고, 암호처럼 다루어야 한다.

 

2-1. HTTPS 서버 작성

Node.js 환경에서 HTTPS 서버를 작성하기 위해서는 https 내장 모듈을 이용할 수 있다.

express.js를 이용해 https 서버를 만들 수도 있다.

먼저 방금 생성한 인증서 파일들을 HTTPS 서버에 적용해 주는 작업이 필요하다.

 

① Node.js https 모듈 이용

const https = require('https');
const fs = require('fs');

https
  .createServer(
    {
      key: fs.readFileSync(__dirname + '/key.pem', 'utf-8'),
      cert: fs.readFileSync(__dirname + '/cert.pem', 'utf-8'),
    },
    function (req, res) {
      res.write('Congrats! You made https server now :)');
      res.end();
    }
  )
  .listen(3001);

이제 서버를 실행한 후 https://localhost:3001로 접속하면

브라우저의 url 창 왼쪽에 자물쇠가 잠겨있는 HTTPS 프로토콜을 이용한다는 것을 알 수 있다.

 

② express.js 이용

https.createServer의 두 번째 파라미터에 들어갈 callback 함수를

Express 미들웨어로 교체하면 된다.

const https = require('https');
const fs = require('fs');
const express = require('express');

const app = express();

https
  .createServer(
    {
      key: fs.readFileSync(__dirname + '/key.pem', 'utf-8'),
      cert: fs.readFileSync(__dirname + '/cert.pem', 'utf-8'),
    },
    app.use('/', (req, res) => {
      res.send('Congrats! You made https server now :)');
    })
  )
  .listen(3001);

 

✷ ngrok: HTTP로 만들어진 서버를 HTTPS 프로토콜로 터널링 해주는 프로그램

 

3. Hashing(해싱)

: 어떠한 문자열에 '임의의 연산'을 적용하여 다른 문자열로 변환하는 것.

 

① 암호화

: 일련의 정보를 임의의 방식을 사용하여 다른 형태로 변환하여

해당 방식에 대한 정보를 소유한 사람을 제외하고 이해할 수 없도록

알고리즘을 이용하여 정보를 관리하는 과정.

 

ex)

shiftBy('bicycle', 2) // 'dkezeng'
shiftBy('dkezeng', -2) // 'bicycle'

const shiftBy = function(content, offset) {
  return content.split('').map(function(letter) {
    return String.fromCharCode(letter.charCodeAt() + offset);
  }).join('');
}

⇒ 넘긴 수 만큼 위치가 바뀐 알파벳 반환
shiftBy('a', 2) // abcd ... → 'c'

 

 

예시의 알고리즘을 사용하여 암호화한 예시

클라이언트에서 넘긴 비밀번호를 서버에서 한 단계 암호화시켜 DB와 대조한다.

DB와 대조할 때는 원래의 string 형태로 저장하는 것이 아닌 알고리즘을 통해 암호화된 문자열로 저장한다.

서버는 알고리즘을 가지고 있다가 로그인 요청이 올 때마다 그 알고리즘을 통해서 암호화시킨 후,

다시 DB에서 확인하고 비교해서 맞다면 맞는 데이터를 가져와 반환하는 과정을 거친다.

⇒ 중간자 공격이 들어와도 이 알고리즘을 정확하게 모르면 뚫을 수 없다.

✷ 실제 서비스에 적용될 때 지켜야하는 세 가지 철칙

 

‣ 모든 값에 대해 해시 값을 계산하는 데 오래 걸리지 않아야 한다.

‣ 최대한 해시 값을 피해야 하며, 모든 값은 고유한 해시 값을 가진다.

‣ 아주 작은 단위의 변경이라도 완전히 다른 해시 값을 가져야 한다.

 

✷ SHA-256 알고리즘을 사용했을 경우 출력값의 길이는 언제나 동일하다.

    해시 알고리즘은 특정 입력값에 대해 항상 같은 해시값을 리턴한다.

    입력값이 달라도 극히 드물게 해시된 출력값이 같은 경우가 발생할 수 있다.

    (이러한 중복이 드물게 발생할수록 좋은 해싱 함수이다)

 

 

임의의 알고리즘을 사용하여 암호화 한 예시

 

해시된 값으로 DB에 저장이 되고 플로우로 처리가 된다.

DB가 뚫려 해시된 값의 비밀번호가 똑같이 노출이 되어 다른 사이트에 적용되더라도 뚫리지 않기 때문에

악용될 여지가 없다.

 

② Salt

: 암호화해야 하는 값에 어떤 '별도의 값'을 추가하여 결과를 변형하는 것

‣ 암호화만 해놓는다면 해시된 결과는 늘 동일하다.

→ 해시된 값과 원래 값을 테이블(레인보우 테이블)로 만들어서 디코딩(decoding)하는 경우도 생긴다.

→ 암호화 해놓은 것을 해싱 값으로만 사용하기에는 안정성의 문제가 조금 있다.

→ 기존: (암호화 하려는 값) ⇒ 바로 (hash 값)으로 사용

 

⇒ 해싱을 하기 전에 원본 값에 임의로 약속된 '별도의 문자열'을 추가하여 해시를 진행한다면

기존 해시값과 전혀 다른 해시값이 반환되어 알고리즘이 노출되더라도 원본 값을 보호할 수 있도록 하는 안전장치

→ Salt 사용: (암호화 하려는 값) + (Salt용 값) ⇒ (hash 값)

 

✷ Salt 사용 시 주의할 점

‣ Salt는 유저와 패스워드별로 유일한 값을 가져야 한다.

‣ 사용자 계정을 생성할 때와 비밀번호를 변경할 때마다 새로운 임의의 Salt를 사용하여 해싱해야 한다.

‣ Salt는 재사용 금지

‣ Salt는 DB의 유저 테이블에 같이 저장되어야 한다.

→ 유저가 비밀번호를 입력했을 때 이 유저만의 Salt와 합해서 다시 해싱을 해줄 수 있기 때문이다.

 

유저마다 salt의 값을 다 다르게 한 예시

유저마다 salt를 다르게 하면 DB에서도 salt를 각자 다르게 가지고 있어야 한다.

salt + 암호화된 비밀번호를 가지고 있을 때, DB에서 넘겨받은 salt값을 가지고 해싱을 하여 비교를 한다.

⇒ 좀 더 보안된, 혹시 알고리즘이 노출되더라도 안전성이 높다.

 

 

4. 🍪 Cookie(쿠키)

: 서버에서 클라이언트에 데이터를 저장하는 방법의 하나.

  어떤 웹사이트에 들어갔을 때, 서버가 일방적으로 클라이언트에 전달하는 작은 데이터.

  HTTP의 stateless 특징을 보완해주는 작은 데이터 조각. 작은 문자열을 저장함.

→ 쿠키는 삭제하지 않는다면 사라지지 않는다.

✷ 쿠키가 삭제되는 경우

MaxAge 또는 Expires 옵션이 설정되는 쿠키의 경우 설정된 시간이 지난 이후 자동으로 제거하고,

해당 옵션이 없는 경우 대부분의 브라우저에서는 쿠키를 지우지 않으므로 쿠키가 보존된다.

(현대의 브라우저는 쿠키를 지우지 않는 것이 기본 옵션)

 

→ 쿠키는 보안상으로도 위험하고 변조도 쉽기 때문에 암호화 된 내용으로 채워져 있다.

    특히 인증정보와 같은 민감한 정보는 무조건 해싱 처리가 되어 있다.

 

‣ 쿠키 이용법

: 사용자 선호, 테마 등 장시간 보존해야 하는 정보를 클라이언트에 저장하기에 적합함.

  로그인, 로그아웃을 위한 인증정보를 쿠키를 이용해 저장하는 경우가 많다.

 

→ 서버가 원한다면 서버는 클라이언트에서 쿠키를 이용하여 데이터를 가져올 수 있음.

⇒ 쿠키를 이용하는 것은 서버에서 클라이언트에 쿠키를 전송하는 것만 의미하지 않고

    클라이언트에서 서버로 쿠키를 전송하는 것도 포함된다.

 

⇒ 서버가 쿠키를 이용하여 데이터를 저장하고 원할 때 이 데이터를 다시 불러와 사용할 수 있지만

데이터를 저장한 이후 특정 조건(쿠키 옵션)들이 만족하는 경우에만 다시 가져올 수 있다(아무 때나 가져오지 못함).

 

🍪 주로 사용되는 쿠키 옵션

① Domain(도메인)

: 서버에 접속할 수 있는 이름으로 쿠키 옵션에서 도메인은 포트 및 도메인 정보, 세부 경로를 포함하지 않는다.

→ 서브 도메인은 www 같은, 도메인 앞에 추가로 작성되는 부분을 말한다.

→ 만약 요청해야 할 URL이 http://www.naver.com/user/login이라면 Domain은 naver.com 이 된다.

→ 쿠키 옵션에 도메인 정보가 존재한다면

클라이언트에서는 쿠키의 도메인 옵션과 서버의 도메인이 일치해야만 쿠키를 전송할 수 있다.

(서버와 요청의 도메인이 일치하는 경우 쿠키 전송)

 

② Path(세부 경로)

: 서버가 라우팅 할 때 사용하는 경로.

→ 만약 요청해야 할 URL이 http://www.naver.com/user/login이라면 세부 경로는 /user/login이 된다.

     명시하지 않으면 기본으로 / 로 설정되어 있다.

→ 설정된 path를 전부 만족하는 경우 요청하는 path가 추가로 존재하더라도 쿠키를 서버에 전송할 수 있다.

즉, path가 /user로 설정되어 있고, 요청하는 세부 경로가 /user/login인 경우라면 쿠키 전송이 가능하다.

하지만 /user/login으로 전송되는 요청은 path 옵션을 만족하지 못하기 때문에 서버로 쿠키를 전송할 수 없다. 

(서버와 요청의 세부 경로가 일치하는 경우 쿠키 전송)

 

③ MaxAge or Expires

: 쿠키가 유효한 기간을 정하는 옵션.

→ Expires: 클라이언트의 시간을 기준으로 언제까지 유효한지 Date를 지정함.

→ 지정된 시간과 날짜를 초과하게 되면 쿠키는 자동으로 파괴되지만

두 옵션이 모두 지정되지 않은 경우 브라우저 탭을 닫아야만 쿠키가 제거될 수 있다.

 

④ Secure

: 쿠키를 전송해야 할 때 사용하는 프로토콜에 따른 쿠키 전송 여부를 결정한다.

→ 해당 옵션이 true로 설정된 경우 'HTTPS' 프로토콜을 이용하여 통신하는 경우에만 쿠키를 전송할 수 있다.

 

⑤ HttpOnly

: 자바스크립트에서 브라우저의 쿠키에 접근 여부를 결정한다.

(스크립트의 쿠키 접근 가능 여부 결정)

→ 해당 옵션이 true로 설정된 경우 자바스크립트에서 쿠키에 접근이 불가하다.

→ 명시되지 않는 경우에는 기본으로 false로 지정되어 있음.

false인 경우 자바스크립트에서 쿠키에 접근이 가능하기 때문에

(<script>태그로 접근 가능) XSS 공격에 취약하다.

 

✷ 크로스 사이트 스크립팅(Cross Site Scripting, XSS)

: 공격자가 상대방의 브라우저에 스크립트가 실행되도록 하여

사용자의 세션을 가로채거나, 웹사이트를 변조하거나, 악의적 콘텐츠를 삽입하거나, 피싱 공격을 진행하는 것

 

⑥ SameSite

: Cross-Origin 요청을 받은 경우

요청에서 사용한 메소드와 해당 옵션의 조합으로 서버의 쿠키 전송 여부를 결정하게 된다.

(CORS 요청의 경우 옵션 및 메소드에 따라 쿠키 전송 여부 결정)

 

‣ 사용 가능한 옵션

→ Lax: Cross-Origin 요청이면 GET메소드에 대해서만 쿠키를 전송할 수 있다.

⇒ 사이트가 서로 달라도 GET요청이면 쿠키 전송 가능

 

→ Strict: Cross-Origin이 아닌 same-site인 경우에만 쿠키를 전송할 수 있다.

⇒ 사이트가 서로 다르면 쿠키 전송을 할 수 없다

✷ same-site: 요청을 보낸 Origin과 서버의 도메인이 같은 경우

 

→ None

: 사이트가 달라도 항상 모든 요청(GET,   POST, PUT 등등)에 대해 쿠키를 보내줄 수 있으나

  HTTPS 프로토콜과 쿠키 옵션 중 Secure 옵션이 필요하다.

 

 

⇒ 옵션들을 지정한 후 서버에서 클라이언트로 쿠키를 처음 전송하면

헤더에 Set-Cookie라는 프로퍼티에 쿠키를 담아 쿠키를 전송하게 된다.

이후 클라이언트 / 서버에서 쿠키를 전송해야 한다면

클라이언트는 헤더에 Cookie라는 프로퍼티에 쿠키를 담아 서버에 쿠키를 전송하게 된다.

 

‣ 쿠키를 이용한 상태 유지

→ 서버가 쿠키를 저장하면 해당 웹사이트를 이용할 때마다 매 요청마다 자동으로 쿠키가 함께 전송된다.

    서버는 쿠키 내용을 바탕으로 클라이언트에 저장된 쿠키 내용을 통해

    로그인을 유지시키거나 테마를 바꾸는 등의 현상을 보여준다.

 

⇒ 쿠키의 특성을 이용하여 서버는 클라이언트에 인증 정보를 담은 쿠키를 전송하고,

    클라이언트는 전달받은 쿠키를 요청과 같이 전송하여

    stateless(무상태성)한 인터넷 연결을 stateful하게 유지할 수 있다.

 

→ 기본적으로 쿠키는 오랜 시간 동안 유지될 수 있고,

자바스크립트를 이용해 쿠키에 접근할 수 있기 때문에 쿠키에 민감한 정보를 담는 것은 위험하다.

⇒ 인증정보를 탈취하여 서버에 요청을 보낸다면

서버는 누가 요청을 보냈는지 상관하지 않고 유저의 요청으로 취급하여

개인 유저 정보 같은 민감한 정보에 접근이 가능하다.

 

5. Session(세션)

: 서버와 클라이언트 간 연결이 활성화된 상태. 사용자가 인증에 성공한 상태.

→ 데이터를 서버에 저장하고 쿠키에는 데이터에 대한 id만 암호화 된 상태로 부여한다.

 

① 세션 전달 방법

‣ 로그인을 하여 장바구니에 물품을 담는 케이스

 

클라이언트가 요청을 하면 서버는 DB에 정보를 저장하고,

상대적으로 보안에 취약한 쿠키에 session_id를 담아 반환해준다.

그렇기 때문에 session_id는 암호화하는 과정이 필요하다.

 

그래서 유저 데이터를 암호화된 session_id로 저장하고

Set-Cookie 메소드를 통해 쿠키에 담아 클라이언트에 전달한다.

클라이언트에서 또 다른 요청을 할 때는 이미 session_id가 부여된 상태이기 때문에

session_id로 서버에 요청이 전달 된다(다시 로그인을 할 필요가 없다).

 

서버에서는 DB에 session_id가 맞는 지 확인하고 장바구니를 업데이트 한 후, 클라이언트에게 응답을 전송한다.

⇒ 인증에 따라 리소스의 접근 권한(Authorization)이 달라진다.

 

이때 서버와 클라이언트에 각각 필요한 것이 있다.

→ 서버는 사용자가 인증에 성공했음을 알고 있어야 한다.

→ 클라이언트는 인증 성공을 증명할 수단을 갖고 있어야 한다.

 

서버는 일종의 저장소에 세션을 저장하는데,

주로 in-memory(자바스크립트 객체), 또는 세션 스토어(redis 등과 같은 트랜잭션이 빠른 DB)에 저장한다.

세션이 만들어지면, 각 세션을 구분할 수 있는 세션 아이디도 만들어지는데,

보통 클라이언트에 세션 성공을 증명할 수단으로써 세션 아이디를 전달한다.

 

이때 웹사이트에서 로그인을 유지하기 위한 수단으로 쿠키를 사용한다.

쿠키에는 서버에서 발급한 세션 아이디를 저장한다.

 

쿠키를 통해 유효한 세션 아이디가 서버에 전달되고, 세션 스토어에 해당 세션이 존재한다면

서버는 해당 요청에 접근 가능하다고 판단한다.

하지만 쿠키에 세션 아이디 정보가 없는 경우, 서버는 해당 요청이 인증되지 않았음을 알려준다.

 

 

‣ 로그아웃 구현

→ 세션 아이디가 담긴 쿠키는 클라이언트에 저장되어 있으며, 서버는 세션을 저장하고 있다.

    서버는 그저 세션 아이디로만 요청을 판단한다.

 

로그아웃은서버의 세션 정보를 삭제하고 클라이언트의 쿠키를 갱신하는 두 가지 작업을 해야 한다.

서버가 클라이언트의 쿠키를 임의로 삭제할 수는 없지만

set-cookie로 세션 아이디의 키값을 무효한 값으로 갱신해야 한다.

 

이러한 세션을 대신 관리해주는 express-session이라는 모듈이 있다.

이는 세션을 위한 미들웨어로, express에서 세션을 다룰 수 있는 공간을 쉽게 만들어준다.

또한 필요한 경우 세션 아이디를 쿠키에 저장하고, 해당 세션 아이디에 종속되는 고유한 세션 객체를 서버 메모리에 저장한다.

이 때 세션 객체는 서로 독립적인 객체이므로 각각 다른 데이터를 저장할 수 있다.

 

‣ req.session: 세션 객체.

세션 객체에 세션 데이터를 저장하거나 불러오기 위해 사용함.

 

✷ 쿠키와 세션의 비교

	설명	접속 상태 저장 경로	장점	단점
쿠키	http의 stateless한 것을 보완해주는 도구	클라이언트	서버에 부담을 덜어줌	쿠키 그 자체가 인증은 아님
세션	접속 상태를 서버가 가짐 (stateful) 접속 상태와 권한 부여를 위해 세션 아이디를 쿠키로 전송	서버	신뢰할 수 있는 유저인지 서버에서 추가로 확인 가능	하나의 서버에서만 접속 상태를 가져 분산에 불리

 

⇒ 쿠키 인증 방식은 클라이언트에 쿠키를 전송하여 여러가지 정보를 저장했지만, 

쿠키는 유저가 삭제하지 않고 유효기간이 정해지지 않는다면 영원히 존재할 수 있다는 점에서

인증 정보를 담아 저장하기에는 좋지 못한 방법이다.

 

② 세션의 단점

‣ 세션은 서버의 메모리에 세션 정보를 저장하고 있다.

→ 서버의 이용자가 매우 많은 경우 저장 공간의 일정 부분을 항상 차지하고 있게 되어

    가용 메모리의 양이 줄어들어 서버의 성능이 안좋아지는 결과를 발생시킨다.

 

‣ 세션은 여전히 쿠키를 사용하고 있다.

→ 기존 쿠키를 완전하게 대체하는 것이 아니기 때문에

    쿠키의 한계를 여전히 가지고 있다는 말과 같다.

→ 쿠키는 세션 아이디, 즉 인증 성공에 대한 증명을 갖고 있으므로,

탈취될 경우 서버는 해당 요청이 인증된 사용자의 요청이라고 판단한다.

⇒ XSS 공격으로 인해 세션 아이디 정보가 담긴 쿠키가 탈취된다면 개인정보가 유출 될 위험이 크다.

(공공장소에서 로그아웃을 무조건 잘 해주어야 하는 이유가 이것이다)

 

✷ 쿠키와 세션의 관계

 

6. CSRF(Cross-Site Request Forgery)

: 다른 사이트(cross-site / 주소가 다른 사이트)에서 유저가 보내는 요청(request)을 조작(forgery)하는 것.

ex) 이메일에 첨부된 링크를 누르면 내 은행계좌의 돈이 빠져나감.

→ 해커가 요청만 조작하는 것, 즉 다른 오리진이기 때문에

응답에 해당하는 정보를 직접 받을 수 없어 직접 데이터에 접근할 수 없음

 

‣ Web Application Security

개발자들이 웹사이트, 모바일 어플, 웹 API 등을 만들 때

해커들의 공격(SQL injection, XSS, CSRF)을 막기 위해 보안은 필수 사항

 

① CSRF 공격을 하기 위한 조건

→ 쿠키를 사용한 로그인

: 유저가 로그인했을 때 쿠키로 어떤 유저인지 알 수 있어야 함.

→ 예측할 수 있는 요청/parameter를 가지고 있어야 함.

     즉, request에 해커가 모를 수 있는 정보가 담겨 있으면 안됨.

 

② GET요청으로 CSRF 공격하기

‣ 계좌이체에 사용되는 GET요청

은행 계좌의 주인인 김코딩이 은행 웹 사이트에 로그인을 했을 때,

현재 세션이 살아있고 로그인 정보가 쿠키 안에 담겨져 있다는 의미이다.

GET

https://examplebank.com/transfer?account_number=username&amount=1000$ 

 

김코딩의 계좌로 1000$를 이체하는 get요청이 있다고 했을때,

<a href="https://examplebank/transfer?account_number=김코딩계좌번호&amount=1000$">

 

해커는 김코딩의 계좌를 해커 본인의 계좌 번호로 바꿔서 요청을 보낼 수 있다.

<a href="https://examplebank/transfer?account_number=해커계좌번호&amount=1000$">

get요청 준비는 끝났고, 해커는 김코딩인 척 김코딩의 브라우저에서 get요청을 보내게 만들어준다.

이렇게 해커는 김코딩에게 악성 링크를 보내고 그것을 클릭하게 만들어서 자신에게 돈을 보내도록 만든다.

 

은행의 입장에서는 김코딩이라는 유저가 로그인이 되어있는 상태이고,

김코딩이 해커 계좌로 1000$를 보내라는 요청을 보낸 것으로 판단하여 그 요청을 받아들인다.

 

 

③ POST요청으로 CSRF 공격하기

body에 정보를 담아서 요청을 보내는 것이 일반적이다

(공격하기 더 힘듦)

POST

http://examplebank.com/password/change 

body:

{password:user's-new-password}

 

해커가 웹사이트를 하나 만들어 document form을 작성했고,

이 사이트에 접속하는 순간 비밀번호들을 바꾸는 POST 요청을 보내게 된다.

 

④ CSRF 공격을 막는 방법

‣ CSRF 토큰 사용하기

: 서버 측에서 CSRF공격을 보호하기 위한 토큰 문자열을 유저의 브라우저와 웹 앱에만 제공하여

이 조합으로 생성된 요청에만 성공적으로 요청을 완료해주는 방식.

 

‣ Same-site cookie 사용하기

: 같은 도메인에서만 세션 / 쿠키를 사용할 수 있다.

같은 도메인에서 요청하지 않았다면 쿠키가 전송이 되지 않으며 요청을 받아들이지 않음.

 

✷ same-site와 same-origin의 차이

 

 

7. sprint-auth-session

1. client-session과 server-session 폴더에 각각 npm install
2. server-session에 발급받은 인증서를 복사한다.
(npx sequelize db:create 명령어를 먼저 해주면 mysql콘솔에서 db 따로 만들 필요 없음)
3. npx sequelize-cli db:migrate로 마이그레이션을 해준다.
4. mysql -u root -p 명령어로 mysql 콘솔을 열고,
   CREATE DATABASE authentication;으로 데이터베이스를 만들어준다.
5. .env.example파일에 들어가 password를 mysql password로 수정하고,
   파일명을 .env로 수정하고 저장한다.
6. mysql콘솔에 SHOW TABLES; DESC Users; 명령어를 사용해본다.

✷ client-session package.json에서 왜 인증서 경로를 적어주는 이유
: 클라이언트와 서버가 똑같은 인증서 파일을 사용하고 싶다는 것을 나타내주기 위함.

 

✷ axios

package.json파일에 보면 axios가 설치되어 있는 것을 확인할 수 있다.

→ 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다.

→ 백엔드랑 프론트엔드랑 통신을 쉽게하기 위해 Ajax와 더불어 사용한다.

 

‣ axios 특징

운영 환경에 따라 브라우저의 XMLHttpRequest 객체 또는 Node.js의 http api 사용

Promise(ES6) API 사용

요청과 응답 데이터의 변형

HTTP 요청 취소

HTTP 요청과 응답을 JSON 형태로 자동 변경

 

* 설치하는 방법

npm install axios

 

‣ 기본 문법 구성

axios({
  url: 'https://test/api/cafe/list/today', // 통신할 웹문서
  method: 'get', // 통신할 방식
  data: { // 인자로 보낼 데이터
    foo: 'diary'
  }
});

axios 요청 파라미터

✷ withCredentials

: cross-site access-control 요청을 허용 유무. 이를 true로 하면 cross-origin으로 쿠키값을 전달 할 수 있다.

→ client와 server가 쿠키 값을 공유하겠다는 의미.

 

 

🌟 auth-session sprint를 통해 알게 된 것

req.session - github 공식 문서

req.session - 블로그 정리글

axios 라이브러리가 무엇이며 어떻게 사용할 수 있는지에 대해.