CORS(Cross-Origin Resource Sharing)

 

CORS는 웹 브라우저에서 도메인이 다른 서버끼리 서로 요청을 주고 받을 수 있게끔 해주는 것

---

 

 

CORS 이해하기

CORS(Cross-Origin Resource Sharing)는 웹 브라우저에서 다른 출처의 리소스를 요청할 수 있도록 허용하는 것을 말한다. 웹 애플리케이션은 보안을 위해 기본적으로 동일 출처 정책(Same-Origin Policy)을 따르는데, 이 정책에 따라 한 웹 페이지가 다른 출처의 리소스에 접근하려고 하면 제한이 발생한다. CORS는 이 제한을 허용할 수 있도록 한다.

 

example.com 이라는 집이 있다고 가정해보자. example.com이라는 집은 그 집에 사는 사람만 들어갈 수 있다. 다른 사람은 허락 없이 들어올 수 없다. 그런데 만약에 example.com에 살고 있는 사람이 another.com이라는 다른 집에 있는 물건을 가져오려고 한다면 가져올 수 있을까? 가져올 수 없다. 그 집에 사는 사람이 아니면 그 집에 들어가서 물건을 가져올 수 없다. 이것을 동일 출처 정책(Same-Origin Policy)이라고 한다.

 

하지만 CORS가 있다면 다른집에서 물건을 가져올 수 있다.
CORS는 '다른 집에서 물건을 가져오는 것을 허락하는 규칙'이다. 예를 들어, example.com이 another.com에 가서 물건을 가져오고 싶다면, another.com이 허락을 해줘야 한다. another.com에서 "이 집에서 오는 사람은 물건을 가져갈 수 있어요"라고 명시적으로 말해준다면 그 집에 들어가서 물건을 가져올 수 있게 되는 것이다.

 

 

---

 

 

CORS의 동작 원리

CORS는 브라우저가 다른 출처의 리소스를 요청할 때 이를 허용하는 서버 측의 설정을 제공한다. 서버는 응답 헤더에 적절한 CORS 정책을 포함하여 브라우저가 요청을 허용하게 한다. CORS 요청은 크게 두 가지 종류로 나뉘는데 단순요청과 사전요청으로 구분할 수 있다.

단순 요청(Simple Request)

GET, POST 요청 등 일부 안전한 HTTP 메서드에 대해서는 별도의 preflight 요청 없이 바로 CORS 헤더를 포함한 응답을 받는다.

 

사전 요청(Preflight Request)

PUT, DELETE, PATCH 등의 비표준 HTTP 메서드를 사용할 때 또는 요청에 특정 헤더가 포함되면 브라우저는 사전 요청을 보내 서버가 이 요청을 허용하는지 확인한다.

 

 

---

 

 

동일 출처 정책 (Same-Origin Policy)

동일 출처 정책은 보안상의 이유로 브라우저가 한 도메인에서 로드된 웹 페이지가 다른 도메인에 있는 리소스를 요청하는 것을 제한하는 메커니즘이다. 예를 들어, https://example.com에서 호스팅되는 웹 페이지는 기본적으로 https://anotherdomain.com에서 리소스를 가져올 수 없다.

이 제한은 크로스 사이트 스크립팅(XSS), 크로스 사이트 요청 위조(CSRF) 등 다양한 보안 문제를 방지한다.

 

 

---

 

 

CORS 관련 HTTP 헤더

서버는 CORS 요청을 처리할 때 다음과 같은 HTTP 헤더를 응답에 포함시킨다.

Access-Control-Allow-Origin

어떤 도메인에서 요청을 허용할지 정의한다.

Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Origin: *

example.com에서 요청을 허용한다.
* 값을 주면 모든 도메인에서의 요청을 허용한다. 이는 매우 개방적인 설정으로, 보통 공개된 API나 누구나 접근할 수 있어야 하는 리소스에 사용된다.

 

 

Access-Control-Allow-Methods

어떤 HTTP 메서드를 허용할지 정의한다.

Access-Control-Allow-Methods: GET, POST, PUT, DELETE

GET, POST, PUT, DELETE 메서드만 허용한다.

 

Access-Control-Allow-Headers

요청 헤더에 어떤 헤더를 사용할 수 있을지 정의한다.

Access-Control-Allow-Headers: Content-Type, Authorization

요청 헤더에 Content-Type과 Authorization을 포함시킬 수 있다.

 

 

Access-Control-Allow-Credentials

요청에 자격 증명(쿠키 등)을 포함시킬지 여부를 정의한다.

Access-Control-Allow-Credentials: true

자격 증명이 포함된 요청을 허용한다.

 

 

Access-Control-Expose-Headers

응답 헤더 중에서 클라이언트가 접근할 수 있는 헤더를 정의한다.

Access-Control-Expose-Headers: X-Custom-Header

X-Custom-Header를 클라이언트에서 읽을 수 있게 한다.

 

 

---

 

 

Cross-Origin-Opener-Policy policy 오류

Cross-Origin-Opener-Policy policy would block the window.close call.

 

Cross-Origin-Opener-Policy policy would block the window.close call. 오류는 브라우저 보안 정책 때문에 발생하는 문제이다.

 

Cross-Origin-Opener-Policy(COOP) 정책에 의해 window.close() 호출이 차단된다는 오류는, 주로 브라우저에서 보안 설정이 활성화된 상태에서 발생한다. COOP는 서로 다른 출처(origin)의 문서나 스크립트가 상호작용하는 것을 제한하여 보안을 강화하는 기능이다.

주된 원인은 OAuth 로그인 후 window.close()를 실행할 때 발생하는 경우가 많다. Firebase 인증을 사용할 때 팝업 방식 (signInWithPopup) 을 사용하면 브라우저의 COOP(Cross-Origin-Opener-Policy) 정책이 window.close()를 차단할 수 있다.

 

 

firebase 사용시 오류 해결 방법

firebase와 함께 리액트 프로젝트에서 Cross-Origin-Opener-Policy 관련 오류가 발생한 경우, 이는 Firebase와의 통신에서 발생하는 보안 정책 문제일 가능성이 크다. firebase는 외부 서비스와의 통신을 허용하지만, 브라우저에서 특정 보안 정책을 요구할 수 있다.

 

 

Firebase Functions에서 CORS 설정하기

firebase에서 CORS 오류를 해결하려면, firebase functions를 사용할 때, firebase functions의 CORS 설정을 수정해야 한다. 예를 들어, Firebase Functions로 API를 호출하는 경우 CORS 헤더를 설정할 수 있다.

const functions = require("firebase-functions");
const cors = require("cors");
const express = require("express");

const app = express();
app.use(cors({ origin: true })); // 모든 도메인에서 접근 허용

app.get("/some-api", (req, res) => {
  res.json({ message: "Hello from Firebase Functions!" });
});

exports.api = functions.https.onRequest(app);

 

 

Firebase에서 COOP(교차 출처 개방 정책) 설정
firebase Hosting에서는 기본적으로 COOP(교차 출처 개방 정책) 헤더가 자동으로 설정되며, 이로 인해 다른 출처에서 window.close()를 호출할 때 문제가 발생하기도 한다. 이를 해결하기 위해 Firebase Hosting의 firebase.json 파일을 수정한다.

 

이 설정은 Firebase Hosting에서 제공하는 파일에 대해 Cross-Origin-Opener-Policy 헤더를 추가한다. 이렇게 하면 동일 출처 정책을 강화하고, 다른 출처에서 자식 창을 닫을 수 없도록 설정할 수 있다.

{
  "hosting": {
    "headers": [
      {
        "source": "/**",
        "headers": [
          {
            "key": "Cross-Origin-Opener-Policy",
            "value": "same-origin"
          }
        ]
      }
    ]
  }
}