[TIL] Day36 #CORS

2022.06.16(Thurs)

[TIL] Day36
[SEB FE] Day36

☑️ CORS

Cross-Origin Resource Sharing (교차 출처 리소스 공유)
추가 HTTP 헤더를 사용하여 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제

👉 SOP에 의해 다른 출처 리소스 공유를 막은 브라우저를 CORS를 사용하여 다시 접근 권한을 얻게 되는 것!

📎 SOP

Same-Origin Policy, 동일 출처 정책
👉 같은 출처의 리소스만 공유 가능

🫶 출처(Origin): protocol, host, port 조합 (ex.https://www.google.com:443/)

🤷‍♀️ Why SOP 사용?

👉 잠재적으로 해로울 수 있는 문서를 분리함으로써 공격받을 수 있는 경로를 줄여주므로

• http://google.com:81 vs http://google.com → http 프로토콜 기본 포트는 80이므로 두 URL은 동일 출처 ❌
  
• https://google.com:443 vs https://google.com → https 프로토콜 기본 포트는 443이므로 두 URL은 동일 출처 ⭕️
  

✅ 다른 출처 리소스를 가져오고 싶지만 SOP 떄문에 접근 ❌
→ CORS 설정으로 서버 응답 헤더에 ‘Access-Control-Allow-Origin’을 작성하면 접근 권한 획득 가능

전에 Three.js 토이 프로젝트를 진행했을 때 아래와 같은 에러가 떠서 브라우저에서 바로 실행시키지 못하고, http-server를 npm으로 설치한 후에 이를 이용했었는데 이번 시간을 통해 CORS가 무엇이고, 왜 이런 error가 발생하는지 조금이나마 알 수 있었다.

📎 CORS 동작 방식

1. Preflight Request

실제 요청을 보내기 전, OPTIONS 메서드로 사전 요청을 보내, 해당 출처 리소스에 접근 권한이 있는지부터 확인

• 요청을 보내고, 응답 헤더의 Access-Control-Allow-Origin으로 요청을 보낸 출처가 돌아오면 실제 요청을 보내게 됨
• 요청을 보낸 출처가 접근 권한이 없다면 브라우저에서 CORS 에러, 실제 요청 전달 ❌

👍 실제 요청을 보내기 전 미리 권한 확인 가능 → 권한 없는 요청을 미리 거를 수 있다는 장점

 if (request.method === "OPTIONS") {
     response.writeHead(200, defaultCorsHeader);
     response.end();
  }

2. Simple Request

특정 조건이 만족되면 Preflight 요청을 생략하고 요청을 보냄

a. GET, HEAD, POST 요청 중 하나여야 함
b. Accept, Accept-Language, Content-Language, Content-Type 헤더 값만 수동으로 설정 가능
     i. Content-Type 헤더엔 application/x-www-form-urlencoded, multipart/form-data, text/plain 값만 허용

3. Credentialed Request(인증정보를 포함한 요청)

요청 헤더에 인증 정보를 담아 보내는 요청

별도의 설정을 하지 않으면 쿠키를 보낼 수 없음 (🤷‍♀️why? 민감한 정보라서)
→ Front, Server 모두 CORS 설정 필요

• Front 측: 요청 헤더에 withCredentials: true 삽입
• Server 측: 응답 헤더에 Access-Control-Allow-Credentials: true 삽입
• Server 측에서 Access-Control-Allow-Origin 설정시,
  모든 출처 허용 의미의 와일드카드(*)로 설정하면 Error 발생 👉 출처 정확히 설정!

📎 CORS 설정 방법

1. Node.js Server

   const http = require('http');
   
   const server = http.createServer((request, response) => {
   	// all domain
   	response.setHeader("Access-Control-Allow-Origin", "*");
   
   	// 특정 domain
   	response.setHeader("Access-Control-Allow-Origin", "https://google.com");
   
   	// 인증 정보를 포함한 요청을 받을 경우
   	response.setHeader("Access-Control-Allow-Credentials", "true");
   })

2. Express Server

   // cors 미들웨어를 사용해서 더 간단히 CORS 설정 가능
   const cors = require("cors");
   const app = express();
   
   // all domain
   app.use(cors());
   
   // 특정 domain
   const options = {
   	origin: "https://google.com", // 접근 권한을 부여하는 domain
   	credentials: true, // 응답 헤더에 Access-Control-Allow-Credentials 추가
   	optionsSuccessStatus: 200, // 응답 상태 200 설정
   };
   
   app.use(cors(options));
   
   // 특정 Request
   app.get("/example/:id", cors(), function (req, res, next) {
   	res.json({ msg: "example" });
   });

---

☑️ Mini Node Server

Node.js의 http module을 이용하여 Web Server 만들기

• Client Action(button click)에 따라 다른 HTTP 요청을 서버로 보내고,
  HTTP 요청에 담아 보낸 단어를 소문자/대문자로 응답 받아 화면에 보여주는 기능 구현

➰ Web Server: HTTP 요청을 처리하고 응답을 보내주는 프로그램

// Server 실행
node [folder name]/[file name]

// nodemon 사용시, 서버를 매번 실행시킬 필요없음
// 1-1. nodemon 설치
npm install nodemon

// 1-2. package.json의 'scripts' 코드 추가
"start": "nodemon [folder name]/[file name]"

// 2. nodemon을 따로 설치하지 않고 실행
npx nodemon [folder name]/[file name]

// Client 실행
// 1. web browser에서 html 파일 실행
// 2. 특정 port로 client 실행하고 싶다면, serve 이용
npx serve -l [port number] [folder name]/

// server/basic-server.js

const http = require("http");

const PORT = 4999;
const ip = "localhost";

// 서버 생성
const server = http.createServer((request, response) => {

	// preflight request   
	if (request.method === "OPTIONS") {
		// 명시적으로 response stream에 Header 작성
		// writeHead() 메서드엔 status code, Header 작성
		// 헤더를 설정하고 나면 응답 데이터를 전송할 준비 완료!
    response.writeHead(200, defaultCorsHeader);
    response.end();
    return; // 조건문마다 return; 안 해주면 app crushed 어쩌구 에러 발생
  }

  let body = [];
	// 문자열을 소문자로 만들어 응답
	// 요청 메서드가 'POST'이면서 Endpoint(URL)가 /lower인 경우
  if (request.method === "POST" && request.url === "/lower") {
    request
			// 각 'data' event에서 발생시킨 chunk는 'Buffer'.
			// chunk가 문자열 데이터라면 이 데이터를 배열에 수집한 후,
			// 'end' 이벤트에 이어 붙여 다음 문자열로 만드는 것이 good!
      .on("data", (chunk) => {
        body.push(chunk);
      })
      .on("end", () => {
				// 'body'에 전체 요청 바디가 문자열로 담겨 있음
        body = Buffer.concat(body).toString();
        response.writeHead(200, defaultCorsHeader);
        response.end(body.toLowerCase());
        return;
      });
	// 문자열을 대문자로 만들어 응답
	// 요청 메서드가 'POST'이면서 Endpoint(URL)가 /upper인 경우
  } else if (request.method === "POST" && request.url === "/upper") {
    request
      .on("data", (chunk) => {
        body.push(chunk);
      })
      .on("end", () => {
        body = Buffer.concat(body).toString();
        response.writeHead(200, defaultCorsHeader);
        response.end(body.toUpperCase());
        return;
      });
	// 위 조건이 아닌 경우 404 응답
  } else {
    response.statusCode = 404;
    response.end();
  }
});

// listen 메서드를 server 객체에서 호출함으로써 요청을 실제로 처리
// 대부분 서버가 사용하고자 하는 포트 번호를 listen에 전달
server.listen(PORT, ip, () => {
  console.log(`http server listen on ${ip}:${PORT}`);
});

const defaultCorsHeader = {
  "Access-Control-Allow-Origin": "*",
  "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
  "Access-Control-Allow-Headers": "Content-Type, Accept",
  "Access-Control-Max-Age": 10,
};

✋ npm run start로 서버도 실행시키고, 클라이언트도 브라우저에 함께 돌려야 작동 가능하다.

🍀 참고-Node 문서
https://nodejs.org/ko/docs/guides/anatomy-of-an-http-transaction/