[💻 코드스테이츠 FE 44기] SOP, CORS

✔️ 시작

SOP가 무엇이고 왜 생겼는지, SOP의 반대인 CORS의 역할이 무엇이고 어떻게 설정하는지에 대해 학습했다.

---

📍알게된 부분

✔️ SOP(Same-Origin Policy)

• 동일 출처 정책
• 같은 출처의 리소스만 공유가 가능

ex) http://www.jieun.com:443/name
출처(origin) : http://www.jieun.com:443/name
프로토콜 : http
포트 : 443

• 출처는 프로토콜, 호스트, 포트의 조합을 구성되어 있다.
• 이중 하나라도 다르면 동일한 출처로 보지 않는다.

SOP가 생긴 이유

• 해로운 문서를 분리함으로 공격 받을 수 있는 경로를 줄여준다.
• 사이트와의 리소스 공유를 제한하기 때문에 개인 정보가 타 사이트의 코드에 의해서 새어나가는 것을 방지 (개인 정보 유출 방지)

SOP으로 인해 다른 출처의 리소스를 받아 올 수 없게 되었는데 만약 다른 출처의 리소스를 받아와야하는 상황이 온다면? (외부 API 등)

✔️ CORS(Cross-Origin Resoure)

• 교차 출처 리소스 공유
• SOP에 의해 기본적으로 다른 출처의 리소스 공유를 막지만 CORS를 사용해 접근 권한(다른 출처 리소스 공유 권한)을 얻을 수 있다.

CORS 동작 방식

1. 프리플라이트 요청(Preflight Request)

• 실제 요청 보내기 전, OPTIONS 메서드로 사전 요청을 보내 해당 출처 리소스에 접근 권한이 있는지 부터 확인 하는 거
• 브라우저는 서버에 실제 요청을 보내기 전에 프리플라이트 요청을 보내고, 응답 헤더의 Access-Control-Allow-Origin으로 요청을 보낸 출처가 돌아오면 실제 요청을 보내게 된다.

프리플라이트 ➡︎ [요청] ➡︎ Access-Control-Allow-Origin ➡︎ [응답] ➡︎ 실제요청 보내기

프리플라이트가 필요한 이유

• 미리 권한을 확인 할 수 있기에 실제 요청을 처음 부터 전부 보내는 것 보다 리소스 측면에서 효율적이다.
• CORS에 대비가 되어있지 않는 서버를 보호할 수 있다.
• CORS이전에 만들어진 서버들은 SOP 요청만 들어오는 상황만 고려해 만들어 졌다고 한다.(즉, 다른 출처에서 들어오는 요청에 대한 대비가 되어 있지 않다.)

CORS에 대비가 되어있지 않는 서버라도 프리플라이트 요청을 먼저 보내게 되면, 프리플리아트 요청에서 CORS 에러를 띄우게 된다.
CORS 기본 사양 : 프리플라이트 요청

2. 단순 요청(Simple Request)

• 특정 조건이 만족되면 프리플라이트 요청을 생략하고 요청을 보내는 것을 말한다.

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

• 요청 헤더에 정보를 담아 보내는 요청
• 출처가 다를 경우 별도의 설정을 하지 않으면 쿠키를 보낼 수 없다.

• 프론트 측에서 요청 헤더: withCredentials: ture
• 서버측에서 응답 헤더 : Access-Controll-Allow-Credentials:true
• 서버 측에서 Access-Control-Allow-Origin을 설정 할 때 모든 출처를 허용한다는 뜻의 와일드 카드(*)로 설정해 줘야 한다.

✔️ CORS 설정 방법

1.Node.js 서버

• Node.js로 간단한 HTTP 서버를 만든 경우 응답 헤더를 설정해 줄 수 있다.

const http = require ("http");
const server = http.createServer((request, response) => {
	//1. 모든 도메인
  	response.setHeader("Access-Control-Allow-Origin", "*");
  
	//2. 특정 도메인
	response.setHeader("Access-Control-Allow-Origin", "http://Jieun.com")
  
  	//3. 인증 정보를 포함한 요청을 받을 경우
  	response.setHeader("Access-Control-Allow-Origin", "true")	
});

2. Express 서버

• Express 프레임 워크를 사용해서 서버를 만드는 경우 CORS 미들웨어를 사용해 더운 간단하게 CORS 설정을 해줄 수 있다.

const cors = require("cors");
const app = express();
// 1. 모든 도메인
app.use(cors());

// 2. 특정 도메인
const options = {
	origin: "http://Jieun.com", // 접근 권한을 부여하는 도메인
  	credentials: true, // 응답 헤더에 Access-Controll-Allow-Credentials 추가
  	optionsSuccessStates: 200, // 응답 상태를 200으로 설정
};
app.use(cors(options));

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

다양한 개발 환경에서도 헤더의 값을 설정하는 방법만 알면 CORS 설정할 수 있다.

Node Server

- 서버 실행

node server/파일 경로

• 서버 코드를 수정 후 저장한 경우 프로그램을 매번 다시 실행해 줘야한다.

- npx nodemon으로 파일 실행

npx nodemon server/파일 경로

- 클라이언트 실행

npx serve -l 포트번호 client/

HTTP 트랜잭션 해부 바로가기

---

✏️ 마치며

과제를 진행하면서 분명 맞게 수정하고 저장까지 했는데 syntaxerr가 나서 애를 먹었다.
알고 보니 서버 코드는 수정 후 저장했을 대 프로그램을 매번 다시 실행해 줘야한다.

즉, 서버 코드를 수정했을 때 해당 경로 터미널에 node server/파일 경로를 매번 실행해 주면 해결된다.

너무 어렵게 생각해서 시간을 잡았던 거 같다.