[항해 14기] 6주차 WIL (CORS)

1. CORS

1) Cross-Origin Resource Sharing

- 웹 애플리케이션에서 다른 도메인(Origin)으로부터 리소스를 요청하면 동일 출처 정책(Same-Origin Policy)이 발생하여 요청이 차단되는데 이 때 CORS체제를 이용하여 접근 가능하도록 권한 부여가 가능

 

2) 도메인/출처

Protocol,Host,Port 까지 같으면 동일한 출처

 

3) 다른 출처를 허용할 경우 위험성

- CSRF(Cross-Site Request Forgery) 공격: 다른 도메인으로부터의 요청을 허용하면 악의적인 웹 사이트가 사용자의 인증 정보를 도용하여 서비스의 보안을 침해할 수 있다
- 정보 노출: 다른 도메인에서 요청한 리소스에는 사용자의 개인 정보가 포함될 수 있기 때문에 위험

 

4) CORS 장점

- 보안 : 출처 정책(Same-Origin Policy)을 준수함과 동시에 CORS를 사용하여 특정 출처에 대한 접근을 허용함으로써, 보안 상의 제약을 준수하면서 필요한 리소스 공유가 가능
- 웹 애플리케이션 통합 : 다른 출처에서 호스팅되는 리소스에 접근하여 웹 애플리케이션을 통합이 가능. 외부 API에 요청을 보내거나 다른 도메인에서 호스팅되는 웹 페이지를 가져오는 등, CORS를 사용하면 이러한 리소스 간의 통합이 용이
- 효율적인 개발: 웹 애플리케이션의 개발 및 테스트 단계에서 서로 다른 도메인 간의 통신이 필요한 경우가 있는데, 개발 환경에서 CORS를 활성화하여 개발 및 디버깅을 더 효율적으로 수행

 

 

2. 요청 종류

1) 헤더 설정

- CORS는 서버에서 응답 헤더를 통해 설정되며, 브라우저는 이 헤더를 확인하여 리소스 요청의 허용 여부를 결정

- Access-Control-Allow-Origin: 서버가 클라이언트에게 응답을 보낼 때, 허용하는 도메인(Origin)을 명시("*"를 설정하면 모든 도메인을 허용)
- Access-Control-Allow-Methods: 서버가 허용하는 HTTP 메서드를 지정
- Access-Control-Allow-Headers: 서버가 허용하는 요청 헤더를 지정. 클라이언트가 추가적인 헤더를 요청에 포함시키려는 경우에 사용

- Access-Control-Allow-Credentials: 서버 요청에 대해 인증 정보(cookies, HTTP authentication 등) 허용여부

 

2) 단순 요청 (Simple Request)

- 일반적인 요청으로, 브라우저가 사전 검사(preflight)를 거치지 않고 서버로 직접 요청을 보냄
- 아래의 조건을 만족해야 한다
- GET, POST, HEAD 요청만 가능
- 사용자 정의 헤더(custom header) 추가 불가능

- Accept, Accept-Language, Contet-Language, Content-Type과 같은 CORS 안전 리스트 헤더 혹은 User-Agent 헤더
- 허용 Content-Type 헤더 : application/x-www-form-urlencoded, multipart/form-data, text/plain

 

3) 프리 플라이트(Preflight Request)

- 브라우저가 실제 요청을 보내기 전에 서버에 대한 사전 검사를 수행하는 요청
- 브라우저는 OPTIONS 메서드를 사용
- 서버가 특정 도메인, 메서드, 헤더 등을 허용하는지 확인하기 위한 용도로 사용

 

4) 신용 요청(Request with Credentials)

- 자격 증명(credentials)을 포함하여 보내는 요청
- 자격 증명은 쿠키, 인증 헤더 등 사용자 인증 정보를 의미

 

 

 

3. Express에서 CORS 쓰기

1) npm istall cors

2) app.js에 미들웨어 추가

- const cors = require('cors'); app.use('/api',cors());

- router.use(cors())

3) 예시 코드

app.use(

  cors({

    origin: "*",

    credentials: "true",

    // cors options

  })

);