Unit10 회고

YEN J·2022년 10월 17일

code states

목록 보기

26/43

CORS

🔆 CORS, SOP

SOP❓

SOP(Same-Origin Policy, 동일 출처 정책)이란 같은 출처의 리소스만 공유가 가능한 보안 방식으로 특정 출처에서 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용하는 것을 제한하는 방식이다. 다른 사이트(출처)와의 리소스 공유를 제한하여 개인 정보가 타 사이트로 새어나가는 것을 방지하는 등의 보안상 이점으로 모든 브라우저에서 기본적으로 사용하고 있는 정책이다.

출처: 프로토콜, 호스트, 포트로 구성
출처의 세 가지 구성요소가 모두 같아야 같은 출처라고 볼 수 있음
SOP

CORS❓

CORS(Cross-Origin Policy, 교차 출처 리소스 공유)란 추가 HTTP 헤더를 사용하여 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제를 말한다. CORS는 개발 환경에서 다른 출처의 리소스를 사용해야 하는 상황이 많이 발생하기 때문에 막혀있는 리소스 공유의 접근 권한을 얻기 위해 필요하다.
CORS

🔆 CORS 동작 방식

프리플라이트 요청(Preflight Request)
- 실제 요청을 보내기 전, OPTION 메서드로 서버 측에 사전 요청을 보내 해당 출처 리소스에 접근 권한이 있는지부터 확인하는 방식
- 프리플라이트 요청의 필요성
  - 리소스 측면에서 효율적
  - CORS에 대비 되어있지 않은 서버 보호 가능
단순 요청(Simple Request)
- 특정 조건이 만족되면 프리플라이트 요청을 생략하고 요청을 보내는 방식
인증정보를 포함한 요청(Credentialed Request)
- 요청 헤더에 인증 정보를 담아 보내는 요청 방식
- 프로트, 서버 양측 모두 CORS 설정 필요

🔆 CORS 설정 방법

Node.js 서버🤔

const http = require('http');

const server = http.createServer((request, response) => {
// 모든 도메인
  response.setHeader("Access-Control-Allow-Origin", "*");

// 특정 도메인
  response.setHeader("Access-Control-Allow-Origin", "https://특정 사이트.com");

// 인증 정보를 포함한 요청을 받을 경우
  response.setHeader("Access-Control-Allow-Credentials", "true");
})

Express 서버🧐

const cors = require("cors");
const app = express();

//모든 도메인
app.use(cors());

//특정 도메인
const options = {
  origin: "https://특정 사이트.com", // 접근 권한을 부여하는 도메인
  credentials: true, // 응답 헤더에 Access-Control-Allow-Credentials 추가
  optionsSuccessStatus: 200, // 응답 상태 200으로 설정
};

app.use(cors(options));

//특정 요청
app.get("/example/:id", cors(), function (req, res, next) {
  res.json({ msg: "example" });
});

Express

🔆 Express

Express란❓
Node.js 환경에서 웹 서버, 또는 API 서버를 제작하기 위해 사용되는 인기 있는 프레임워크

Express 설치
```
npm install express
```

간단한 웹 서버 만들기

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

라우팅: 메서드와 url에 따라 분기하기
```
app.get('/', function (req, res) {
  res.send('Hello World!');
});

app.post('/', function (req, res) {
  res.send('Got a POST request');
});

app.put('/user', function (req, res) {
  res.send('Got a PUT request at /user');
});
```
Routing🛣

URI 및 특정 HTTP 요청 방법의 특정 endpoint에 대한 클라이언트 요청에 서버가 응답하는 방식을 결정하는 것으로 좀 더 쉽게 말하자면 애플리케이션의 endpoint가 클라이언트 요청에 응답하는 방식을 의미한다.
express에서의 routing
- 형식: app.METHOD(PATH, HANDLER)
- 형식 부가 설명: app.HTTP 요청 메서드(서버 경로, 경로가 일치할 때 실행되는 함수)

🔆 MiddleWare

대표적인 MiddleWare 사용 상황😎

POST 요청 등에 포함된 body를 구조화할 때
- express.json() -> app.use()로 전체 적용 가능
모든 요청/응답에 CORS 헤더를 붙여야 할 때
- npm intall cors -> cors 사용(app.use()로 전체 적용 가능)
모든 요청에 대해 url이나 메서드를 확인할 때
```
// 요청에 대한 url과 메서드를 확인하는 미들웨어 작성
const myLogger = function (req, res, next) {
  console.log(`http request method is ${req.method}, url is ${req.url}`);
  next();
};

// 모든 요청에 적용
app.use(myLogger);
```
- req: 미들웨어 함수에 대한 HTTP 요청을 가리킴
- res: 미들웨어 함수에 대한 HTTP 응답을 가리킴
- next: 미들웨어 함수에 대한 콜백 함수로 다음 미들웨어를 실행하는 역할

요청 헤더에 사용자 인증 정보가 담겨있는지 확인할 때

// 토큰을 통해 로그인 여부를 확인하는 미들웨어
app.use((req, res, next) => {
  // 토큰이 있는지 확인, 없으면 받아줄 수 없음.
  if(req.headers.token){
    req.isLoggedIn = true;
    next();
  } else {
    res.status(400).send('invalid user')
  }
})

🔆 알아두면 유용한 Express API

express.json(): express 내장 미들웨어 기능으로 JSON으로 들어오는 요청을 구문분석하며, body-parser를 기반으로 함, JSON 부분만 파싱하여 미들웨어 반환
- 기본값으로 strict: true로 설정되어 있는데 이는 배열과 객체만 허용한다는 의미이며 이외의 다른 것들을 파싱하려면 stirc: false로 이를 비활성화하면 됨
app.use(): 미들웨어 기능을 마운트하거나 지정된 경로에 마운트하는데 사용되는 메서드로 경로가 일치하면 미들웨어 기능이 실행되며 특정 경로를 작성하지 않으면 모든 요청에 대해 실행됨
req.params: 경로에 대한 속성을 포함하는 객체
req.query: 경로의 각 쿼리 문자열 매개 변수에 대한 속성을 포함하는 객체
res.send(): 응답을 보내는 역할 수행하는 메서드로 어떠한 데이터를 보내는지 파악하여 이에 알맞은 Content-Type을 지정
res.json(): JSON.stringfy()를 사용하여 JSON 문자열로 변환된 응답을 보내는 메서드로 Content-type헤더를 application/JSON으로 고정하며 응답을 보내는 메서드라는 측면에서는 res.send()와 유사함
res.end(): 보내줄 데이터 없이 응답을 종료하고 싶은 경우 사용하는 메서드

출처
Express
res.send() vs res.json()

<오늘의 일기>
이번 유닛에서 학습한 서버에 관한 내용은 가시성이 떨어지는 내용이다보니 어렵다기보다는 낯설게 느껴졌다. 하지만 이번 유닛은 여러 과제를 실습해보고 하나하나 수행해나가며 유독 뿌듯함이 크게 느껴졌던 유닛이기도 하다. 아무래도 최근 나태해진 나의 학습 태도를 다시금 바로잡을 수 있었던 시간이었다는 것이 가장 큰 이유일 것 같다.
이번 페어 활동에서 만나게 된 페어분은 자신이 무엇을 아는지 모르는지 정확히 구분할 줄 아는 분이셔서 나 역시도 헷갈렸던 부분을 확실하게 짚고 넘어갈 수 있었던 것 같다. 아는 것과 모르는 것을 구분하는 점이 나에게는 굉장히 어려운 일인데 페어 활동을 통해 그런 부분들을 많이 배우게 되었다.
앞으로의 유닛도 꾸준하게 천천히 나아가야겠다.

YEN J

이전 포스트

Unit9 회고

다음 포스트