소개🚩

현대 웹 개발에서는 보안 문제에 대한 고려가 매우 중요합니다.
특히, COOP와 CORS는 가장 많이 알려저 있는 보안 메커니즘입니다.
이번 포스팅에서는 COOP와 CORS에 대해 자세히 알아보고, 웹 개발자들이 이러한 메커니즘을 어떻게 활용할 수 있는지 살펴보겠습니다.

출처란?

먼저 출처라는 개념을 알아야 합니다. 출처란

Protocol,Host,Port,Path,queryString,Fragment 구성요소 중에서 Protocol + Host + Port 3가지가 같으면 동일 출처(Origin)라고 합니다.

COOP (Cross-Origin Opener Policy)📌

• Cross-Origin Opener Policy (COOP)는 브라우저가 다른 출처의 창이나 탭을 열 수 있는지 여부를 제어하는 ​​보안 정책입니다.

• COOP는 공격자가 악의적인 웹사이트를 열어 사용자의 웹 브라우저를 제어할 수 있는 것을 방지하는 데 도움이 됩니다.

• COOP는 Origin Policy와 유사합니다. Origin Policy는 브라우저가 다른 출처의 자원을 로드할 수 있는지 여부를 제어하는 ​​보안 정책입니다.

• COOP는 Origin Policy를 보완하는 보안 정책입니다. COOP는 브라우저가 다른 출처의 창이나 탭을 열 수 있는지 여부를 제어하여 공격자가 악의적인 웹사이트를 열어 사용자의 웹 브라우저를 제어할 수 있는 것을 방지합니다.

COOP는 다음과 같은 방식으로 작동합니다.

1. 브라우저는 다른 출처의 창이나 탭을 열려고 시도합니다.
2. 브라우저는 COOP 정책을 확인합니다.
3. COOP 정책이 허용되면 브라우저는 창이나 탭을 엽니다.
4. COOP 정책이 거부되면 브라우저는 창이나 탭을 열지 않습니다.

COOP는 공격자가 악의적인 웹사이트를 열어 사용자의 웹 브라우저를 제어할 수 있는 것을 방지하는 데 도움이 되는 중요한 보안 정책입니다.

CORS (Cross-Origin Resource Sharing)📌

• CORS는 교차 출처 리소스 공유(Cross-Origin Resource Sharing)를 허용하기 위한 메커니즘입니다.
• 동일 출처 정책에 의해 제한되는 리소스에 대해, 웹 개발자들은 CORS를 사용하여 다른 출처에서의 요청을 허용할 수 있습니다.
• CORS는 웹 애플리케이션의 보안을 유지하면서도, 다른 출처에서의 리소스 요청을 제어하고 조절할 수 있는 기능을 제공합니다.

CORS 해결할 수 있는 방법

1. 서버 측에서 CORS 헤더 설정: 서버는 요청에 대한 응답에 CORS 관련 헤더를 설정하여 브라우저에게 허용할 도메인, 허용할 메서드, 허용할 헤더 등을 알려줍니다. 서버 측에서는 Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Allow-Headers 등의 헤더를 설정해야 합니다.

2. 프록시 서버 사용: CORS 문제를 우회하기 위해 프록시 서버를 사용할 수 있습니다. 클라이언트의 요청을 프록시 서버로 전달하고, 프록시 서버가 실제 리소스 서버로 요청을 보내 응답을 받아 클라이언트에게 전달합니다. 프록시 서버는 동일한 도메인에서 실행되기 때문에 CORS 문제를 피할 수 있습니다.

• 개발중에 간편하게 사용할 수 있는 CORS 확장 프로그램이다. 참고하면 좋을 것 같습니다.
  https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf?hl=ko

COOP와 CORS의 활용

CORS와 COOP는 웹 보안을 강화하고 다양한 도메인 간의 통신과 상호작용을 가능하게 함으로써 웹 애플리케이션의 기능성과 유연성을 향상시킵니다. 이들 메커니즘을 올바르게 사용하면 웹 애플리케이션의 보안 및 개발 측면에서 다양한 이점을 얻을 수 있습니다.