[HTTP] CORS와 SOP이 뭘까 ? (웹개발하다 만나는 cors에러 )

가끔 코딩을 하다 만나는 빨간 문장 . .

 

가끔 이렇게 시뻘겋게 떠있다

 

애써 무시했지만 이제 제대로 알아보자 하고 포스팅을 씁니다. 

 

 

먼저 cors는 뭐고 , 또 sop은 무엇인지 알아보자!

 

 

---

 

cors란 ?

Cross-Origin Resource Sharing 의 약자로 직역하면 교차 출처 리소스 공유하는 뜻이다. 

추가 HTTP 헤더를 사용하여 , 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다.

웹 애플리케이션은 리소스가 자신의 출처 (도메인,프로토콜,포트) 와 다를때 cors 요청을 실행한다.

 

 

❓ 왜 cors가 필요할까 ❓

- 이전에는 동일한 도메인에서 리소스를 받아왔지만, 현재는 도메인이 다른 서버에서 제공하는 API를 사용할 일이 많아졌다. 따라서 동일한 이전처럼 도메인간의 요청만을 할 수 없기때문에 cors가 생겼다.

 

 

 

❓ 그럼 이 cors는 왜 어디서는 되고 어디선 안될까 ❓

- 어디에서 보낸것이 cors에서 막히는가? 바로 브라우저이다.

 

- 정확하게 말하자면 cors는 교차 출처 리소스를 공유할 수 있게 만들어주는것이고, 요청을 막고 있는 건 SOP이다. 

 

 

❓  왜 브라우저에서 막을까 ❓ 

 내 브라우저에 토큰 등의 정보가 쿠키로 저장되있다.  즉, 내 인증정보가 브라우저에 저장되어있는것이다. 

이때 악의를 가진 개발자가 내 정보를 빼가기 위해 어떤 웹사이트에 접속을 유도한다. 그럼 내 브라우저는 악의성을 가진 사이트에 접속할 것이고 , 이 브라우저의 소스를 받아오는 과정에서 내 브라우저에 저장된 토큰 탈취하기라도 한다면?!   내정보를 가지고 악의적인 무슨짓을 할 지 모르는일이다 . 

 

---

 

 sop은 또 뭐지 ?

 

- sop은 Same Origin Policy의 약자로, 자바스크립트 엔진 표준 스펙의 보안규칙이다.

 

- 하나의 출처에서 로드된 자원 (문서, 스크립트 )이 호스트나 프로토콜, 포트번호가 일치하지 않는 자원과 상호작용 하지 못하도록 요청 발생을 제한하고, 동일 출처 (Same Origin !) 에서만 접근이 가능한 정책이다. 

 

 

❓ 그렇다면 왜 동일한 출처에서만 접근하도록 허용하는 것일까 ❓ 

 

- 위에서 말했던 브라우저가 막는 이유랑 유사하다. 다른말로 다시 풀자면, 다음과 같다.

만약 모든 출처를 허용한다면 , 1번 사이트에서 로그인을 한 후 인증 토큰을 받고, 로그인 한 상태에서 2번 사이트에 접속하게 되면, 2번사이트에서 1번사이트 api주소로 요청을 보낼 때 유저가 획득한 인증 토큰이 자동으로 첨부되어 사용자인척 요청을 받을 수 있다. 따라서 보안상의문제로 브라우저는 HTTP 호출을 동일한 출처로 제한한다.

 

 

 

---

 

sop에 대해 알아보고 cors가 왜 있어야 하는지도 알게 되었다. 그러면 cors 에러 해결방법을 알아보자.

 

cors 에러 해결 방법

 

1. 서버 측에서 Access-Contorol-Allow-Origin 헤더에 접근 권한을 설정할 수 있다.

 

 res.header("Access-Control-Allow-Origin", "*")

 

- Access-Contorol-Allow-Origin 을 *로 주면 모든 origin으로부터 요청을 허용하게 된다.

(하지만 보안상 취약하기 때문에 권장하지 않는다. )

 

- 따라서 출처를 명시해 써주는것이 좋다. 

 

 

 

2. Chrome의  확장 프로그램을 사용한다. 

https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf

Allow CORS: Access-Control-Allow-Origin

확장프로그램을 설정 후, 브라우저 오른쪽 상단에서 확장프로그램을 활성하 시키면 다음과 같이 된다. 

활성된 사진

이렇게 하면 로컬환경에서  API 사용시 cors 문제를 해결 할 수 있다. 

 

 

 

 

---

 

 

그밖에 참고할만한 자료 

 

출처: https://inpa.tistory.com/entry/AXIOS-📚-CORS-쿠키-전송withCredentials-옵션#1)_클라이언트에서_처리_(둘중에_한가지_방법)

[AXIOS] 📚 CORS 쿠키 전송(withCredentials 옵션)

 

https://inpa.tistory.com/entry/WEB-%F0%9F%93%9A-CORS-%F0%9F%92%AF-%EC%A0%95%EB%A6%AC-%ED%95%B4%EA%B2%B0%EB%B0%A9%EB%B2%95%F0%9F%91%8F#CORS_(CrossOrigin_Resource_Sharing)_%3C%EA%B5%90%EC%B0%A8&%EB%8B%A4%EB%A5%B8_%EC%B6%9C%EC%B2%98_%EB%A6%AC%EC%86%8C%EC%8A%A4_%EA%B3%B5%EC%9C%A0%3E 

 

[WEB] 📚 CORS 개념 💯 완벽 정리 & 해결 방법 👏