[TIL] 240708

1. Node.js & npm 

 

- Node.js는 Chrome V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경(Runtime Environment)

- 서버 사이드 애플리케이션 개발에 사용 

- 브라우저 외부 환경에서 자바스크립트 애플리케이션 개발에 사용되며 이에 필요한 모듈, 파일 시스템, HTTP 등 Built-in API를 제공 

- Non-blocking  I/O와 단일 스레드 이벤트 루프를 통한 높은 Request 처리 성능

- 데이터를 실시간으로 처리하여 빈번한 I/O가 발생하는 SPA(Single Page Application)에 적합 

- CPU 사용률이 높은 애플리케이션에는 권장하지 않는다. 

 

 

설치된 node 버전 및 npm 버전 확인 

 

 

 

node.js 맛보기 : HTTP Server

 

app.js

const http = require("http");

http
  .createServer((request, response) => {
    response.statusCode = 200;
    response.setHeader("Content-Type", "text/plain");
    response.end("Hello World");
  })
  .listen(3000);

console.log("Server running at http://127.0.0.1:3000/");

 

 

 

 

express with npm

 

1. 새로운 보안 실습용 폴더 생성

2. 폴더 이동 후 터미널에서 다음 명령어 사용 

npm init -y

 

3. express 모듈 설치 

npm install express --save

 

 

server.js

const express = require("express");
const app = express();
const port = 3000;

app.get("/", (req, res, next) => {
  res.end("Top Page");
});
app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});

 

 

npm(node package manager)

 

- Node.js 기반으로 작성된 패키지를 관리하기 위한 온라인 저장소와 커맨드 라인 도구(CLI, Command Line interface)를 제공하는 개발 도구 

npm | Home (npmjs.com)

npm | Home

 

 

 

쿠키와 세션 그리고 WebSocket

 

- HTTP의 통신 방식은 'stateless'

 

1) 쿠키

 

- 쿠키는 웹 서버가 생성해 웹 브라우저로 전송하는 작은 정보 파일

- 클라이언트의 요청을 기억하고 구분하려는 용도로 쿠키를 사용

- 서버에서 구동되는 도메인 별로 관리 

 

 

쿠키 전송 방법 

 

- 서버가 클라이언트로부터 요청을 받아 응답을 보낼 때는 Set-Cookie라는 헤더 정보를 전송한다. 

Set-Cookie: <쿠키_이름>:<쿠키_값>

 

 

ex)

const app = require('express')();
app.get('/',(req,res) => {
	res.setHeader('Set-Cookie', [username='jiwoo']);
    res.sendFile(`${__dirname}/index.html`);
});

app.listen(8080, () => console.log('listening on port:8080'));

 

- username이라는 쿠키의 이름 값을 넣어 보내는 경우, 

   1. 서버에서 응답할 때 응답 메시지의 헤더에 쿠키를 저장하도록 코드를 작성

   2. 응답 메시지의 헤더에는 Set-Cookie가 포함

   3. 클라이언트의 웹 브라우저는 username이라는 이름으로 jiwoo 라는 값을 저장

   4. 이후 전송하는 모든 요청에 다음과 같이 쿠키를 넣어 보냄 

 

const express = require("express");
const app = express();
const port = 3000;

app.get("/", (req, res, next) => {
  res.setHeader("Set-Cookie", [(username = "jiwoo111")]);
  res.sendFile(`${__dirname}/index.html`);
  res.end("Top Page");
});
app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});

 

 

 

GET /sample_page.html HTTP/1.1
Host: www.example.org
Cookie: username=jiwoo

 

 

쿠키 속성 

- set-cookie에 expires, path, domain, priority 등 여러 값이 붙어 있는데, 이러한 값을 쿠키 속성

 

1. 쿠키 만료 시간(expires, max-age)

 

 - 모든 쿠키는 웹 브라우저가 완전히 닫히면 삭제 

 - expires 속성을 날짜에 명시하거나, max-age 속성으로 기간을 명시하면 웹 브라우저의 닫힘과 상관없이 언제까지 저장할 지 만료시간을 설정 

 

 

2. 쿠키 범위(domain, path)

 

- 쿠키 범위는 domain과 path 속성으로 지정

- 쿠키 범위에 따라 쿠키를 보낼 URL과 경로를 설정 가능 

 

3. 쿠키 보안(secure)

 

- 쿠키는 HTTP 메시지에 포함돼 전송되므로 중간에 탈취당하기 쉬움

- 민감한 정보는 절대로 쿠키로 전달하면 안됨

- secure 속성으로 지정하면 HTTP가 아니라 HTTPS를 사용할 때만 쿠키 값을 전송하도록 설정 

 

const express = require("express");
const app = express();
const port = 3000;

app.get("/", (req, res, next) => {
  let options = {
    expires: new Date(Date.now() + 900000),
    httpOnly: true,
    domain: "www.naver.com",
    path: "/",
  };

  res.cookie("lesson", "glocal2024", options);
  res.end("Top Page");
});

app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});

 

 

 

 

4. XSS 공격 방지(HttpOnly)

 

 

- XSS(Cross-Site Scripting, 사이트간 스크립팅)는 사용자가 이용하는 웹 사이트에 악성 스크립트 코드를 심어 쿠키를 탈취하는 해킹 공격

- HttpOnly 속성을 사용해 클라이언트가 쿠키에 접근하지 못하게 함 

 

 

5. CSRF 공격 방지(samesite)

 

 

- CSRF(Cross-Site Request Forgery ,사이트간 요청 위조)는 원치 않는 사이트로 쿠키를 보내는 공격 방법

- 인증된 사이트에 저장된 쿠키를 해커가 미리 심어놓은 다른 사이트에 전송하는 방식

- samesite 속성을 사용하는데, samesite 속성에는 strict, lax, none 옵션 중 하나를 지정

 

• strict: 다른 사이트로 쿠키를 전송할 수 없음
• lax: 안전한 HTTP 메서드(예: GET)이고 작업이 최상위 경로에서 이뤄지는 경우를 제외하고 그 밖의 사이트로 쿠키를 전송할 수 없음
• none: 다른 사이트로 쿠키를 전송할 수 있음(이 옵션은 사용하면 안 됨)

 

2) 세션 

- 세션은 서버가 자신에게 요청을 보낸 클라이언트의 상태를 유지하기 위한 방법 

 

세션 전달 과정 

 

1. 클라이언트가 서버에 어떤 요청

2. 서버는 무작위로 생성한 고유한 세션 ID를 응답 메시지의 Set-Cookie 헤더 정보에 포함해 전달

3. 클라이언트는 요청 메시지를 보낼 때마다 응답받은 세션 ID를 포함해 보냄 

4. 서버는 클라이언트의 요청 메시지에 있는 세션 ID를 보고 해당 ID가 유효한지 확인한 뒤 요청을 처리 

 

특징

- 웹 브라우저와 같은 클라이언트가 종료되면 즉시 삭제 

- 새로운 클라이언트가 요청을 보내면 세션 ID를 주고받는 과정을 처음부터 다시 수행 

 

 

3) 웹 소켓 프로토콜

 

- 웹 소켓은 HTTP처럼 TCP/IP 4 계층 중 응용 계층에서 동작

- 한 번 연결되면 끊어지지 않음

- 클라이언트의 요청이 없어도 서버에서 응답을 보낼 수 있음 

 

웹 소켓 연결 설정 

1. 초기 연결 설정은 HTTP, 클라이언트와 서버와 웹 소켓을 지원하는지 사전에 알 수 없기 때문

2. HTTP 요청 메시지의 헤더에 Upgrade 값으로 websocket을 보내 서버가 웹 소켓을 지원하는지 확인 

3. 요청을 받은 서버는 웹 소켓을 지원하는 경우 응답에 상태 코드 101, 상태 메시지 Switching Protocols를 담아 보낸다. 

 

 

3. 웹 Application 디자인 패턴 

 

- 웹 애플리케이션을 개발할 때 일반적으로 사용되는 접근 방식 또는 모범 사례

- 시간이 자니도 유지.보수가 편리하고 확장성이 좋음

- MPA, SPA, SSR

 

MPA

- MPA(Multi page Application)은 웹 페이지에서 서버로 데이터를 요청하고 응답을 받을 때 매번 새로운 HTML 페이지를 받는다. 

 

 

 

 

장점

- 모든 페이지가 분리돼 있어 검색 엔진 최적화(SEO, Search Engine Optimization)에 용이 

- 홈페이지의 구조가 개별 페이지가 검색 엔진이 이해하기 쉽게 개발

- 구글 애널리틱스(Google Analytics)와 같은 웹 애플리케이션 분석 솔루션과 통합하기 쉬움 

 

단점

- 페이지 속도 저하와 웹 사이트 전체의 성능 문제

- 개발자가 개발해야 할 양이 많고, 개발 기간이 상대적으로 길다. 

- 웹 사이트의 보안 및 유지.보수가 어렵다 

 

 

 

SPA

 

- AJAX의 등장으로 클라이언트에서 데이터를 요청할 때 새 HTML 페이지를 받지 않고 데이터를 갱신

- SPA(Single Page Application)는 웹 페이지에서 처음 응답받을 때 딱 한 번만 HTML, CSS, 자바스크립트 같은 자원을 내려받고 다음 요청부터는 응답받은 데이터로 부분만 변경하는 방식 

- 응답 데이터는 XML, CSV,HTML 등의 형식으로 받을 수 있는데, JSON(JavaScript Object Notation) 데이터를 가장 많이 사용 

 

 

- 응답받은 데이터를 웹 페이지에서 직접 변경, 렌더링을 클라이언트에서 함 

- CSR(Client Side Rendering, 클랑이언트 사이드 렌더링)이라고도 함 

 

장점 

- 웹 페이지 전체를 다시 로딩하지 않고 변경되는 부분만 업데이트 

- 웹 페이지가 변경돼도 새로 고침이 발생하지 않아 사용자 경험(UX)이 향상

 

단점

- 모든 페이지가 분리돼 있지 않아 검색 엔진 최적화에 매우 불리

- 하나의 웹 페이지 내에서 데이터가 변경되기 때문에 보안 측면에서 취약 

- 웹 브라우저의 히스토리를 따로 관리하지 않으므로 URL(Uniform Resource Locater,웹 주소) 개념이 없음 

 

 

 

DOM

- HTML, CSS 요소를 자바스크립트가 이해할 수 있도록 객체화해 제공하는 모델

- DOM 생성이 끝나면 웹 브라우저는 자바스크립트가 DOM에 접근할 수 있도록 브라우저 API, DOM API와 같은 접근 방법을 제공

- 문제는 자바스크립트가 DOM에 직접 접근하면 내부적으로 연속적인 처리가 발생해 속도나 성능 면에서 매우 불리 

- SPA 디자인 패턴을 기반으로 한 자바스크립트 프레임워크(앵귤러,리액트,뷰)는 이 문제를 해결하기 위해 DOM을 제어하는 알고리즘을 제공

  -> 앵귤러는 증가 DOM 방식의 알고리즘을, 리액트와 뷰는 가상 DOM 방식의 알고리즘을 제공