TIL -CORS

Cors를 들어가기 이전에

SOP? Same Origin Policy

다른 출처의 리소스를 사용하는 것에 제한하는 보안방식

출처?(origin)

https://github:443/hana?tab=repositories#example

이러한 모든 것들을 출처라고 한다.

SOP는 왜 도움이 되는가?

자기의 출처와 다른곳에서 요청이 오는경우(해커가 접근하는경우) SOP에 위반되니까 요청을 받지 않는다.

⇒다른 출처의 리소스가 필요한 경우에는 ?? 이때 CORS를 사용!

CORS (출처 : MDN)

교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다. 웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행합니다.

1. 프리플라이트

[OPTIONS](<https://developer.mozilla.org/ko/docs/Web/HTTP/Methods/OPTIONS>) 메서드를 통해 다른 도메인의 리소스로 HTTP 요청을 보내 실제 요청이 전송하기에 안전한지 확인합니다. Cross-site 요청은 유저 데이터에 영향을 줄 수 있기 때문에 이와같이 미리 전송(preflighted)합니다.

1. 심플 리퀘스트

Preflight요청 없이 바로 요청을 한다.

다음 조건을 모두 만족해야한다

• GET, POST, HEAD 메서드 중 하나의 메서드
• Content-type (application/x-www-form-urlencoded, multipart/form-data, text/plain) 세개의 값들만 허용
• 헤더는 Accept, Accept-Language, Content-Language, Content-Type만 허용

왜 prefligth가 필요한가 ?

CORS를 모르는 서버를 위해 (CORS설정이 없는 서버를 위해)

Node.js 로 CORS 방식 허용

//모듈 설치
npm install cors

//모든 도메인에서 서버에 요청 가능
app.use(cors());

//허용할 도메인 추가
let corsOptions = {
    origin: 'https://www.front_end.com',
    credentials: true
}

app.use(cors(corsOptions));

credentials: true

CORS는 기본적으로 보안상의 이유로 쿠키를 요청으로 보낼 수 없도록 막고 있습니다. 하지만 다른 도메인을 가진 API 서버에 자신을 인증해야 정상적인 응답을 받을 수 있는 상황에서는 쿠키를 통한 인증이 필요하다

이를 위해서 두 가지 작업이 필요합니다.

• 요청을 credentials 모드로 설정하기
• // fetch case fetch(url, { credentials: 'include' }) // XHR case const xhr = new XMLHttpRequest(); xhr.withCredentials = true;
• 서버에서 응답 헤더로 Access-Control-Allow-Crendentials: true 설정하기

간단한 GET 요청의 경우는 prelight 과정이 없기 때문에, credentials 정보와 함께 CORS 요청을 합니다. 단, 서버에서 Access-Control-Allow-Credentials: false이거나 생략한 경우, 응답을 브라우저가 자바스크립트 코드에 노출시키지 않습니다. 즉, 전달하지 않습니다.