[책집필] 기술면접 질문 - CORS, Proxy

---

목차

1. CORS란 무엇인가요?

2. Proxy

---

전자책 집필을 목표로 프론트엔드 개발자 기술면접 질의 응답을 정리해보고자 한다.

오늘의 주제는 CORS(Cross-Origin Resource Sharing) 와 Proxy Server 이다.

1. CORS 란 무엇인가요?

---

1-1. 30초 답변

CORS 란 교차 출처 리소스 공유라는 의미로, 웹 어플리케이션이 출처가 다른 자원에 접근할 수 있도록 브라우저와 서버가 협력하는 방식입니다. CORS 에 대처하는 방법은 서버 측에서 허용하는 Origin 과 메서드, 헤더 등을 응답 헤더에 명시하는 것 입니다. CORS를 우회하는 방법은 프록시 서버를 사용하거나 JSONP와 같은 기법이 있습니다.

 

1-2. 상세 설명

 CORS 는 한 출처에서 실행되는 웹 어플리케이션이 다른 출처의 리소스에 접근할 수 있도록 허용하는 메커니즘입니다. 예를 들어, A.com에서 실행되는 스크립트가 B.com의 API를 호출하는 경우, CORS가 필요합니다. CORS는 보안을 위해 동일 출처 정책(SOP: Same Origin Policy)을 따르는 브라우저에서 교차 출처 요청을 제한하기 때문에 발생하는 문제입니다. 따라서 CORS에 대처하는 방법과 우회하는 방법을 알아야 합니다.

 브라우저는 XMLHttpRequest 나 Fetch API 와 같은 API를 사용하여 교차 출처 요청을 보냅니다. 이때 요청 헤더에 protocol, hostname, port 를 포함하는 Origin이라는 필드에 요청을 보내는 출처를 담습니다. 서버는 요청을 받고, 응답 헤더에 Access-Control-Allow-Origin 이라는 필드에 허용하는 출처를 담아서 보냅니다. 이때 전체 선택자(*)를 사용하면 모든 출처를 허용하고, 특정 출처를 명시하면 해당 출처만 허용합니다. 브라우저는 응답 헤더를 확인하고, 요청한 출처가 허용된 출처에 포함되면 응답을 처리하고, 그렇지 않으면 오류를 발생시킵니다.

 

1-3. 꼬리질문 : CORS에 대처하는 방법을 구체적으로 설명해주세요.

  서버 측에서 응답 헤더에 CORS관련 필드를 추가하여 브라우저에게 교차 출처 요청을 허용한다고 알려줍니다. 예를 들어, 다음과 같은 헤더들이 있습니다.

  Access-Control-Allow-Origin : 허용하는 출처를 명시합니다. *를 사용하면 모든 출처를 허용합니다.

  Access-Control-Allow-Methods : 허용하는 HTTP 메서드(GET, POST, PUT, DELETE 등)를 명시합니다.

  Access-Control-Allow-Headers : 허용하는 HTTP 헤어를 명시합니다. Content-type, Authorization 등이 있습니다.

  Access-Control-Allow-Creadentials : 인증 정보(쿠키, HTTP 인증)를 함께 보낼 수 있도록 허용하는지 여부를 명시합니다. True 또는 False 값을 가집니다.

 서버 측에서는 요청 메서드가 GET, HEAD, POST가 아니거나, 특정 헤더나 인증 정보를 포함하는 요청에 대해서는 Preflight Request를 받습니다. 이는 실제 요청을 보내기 전에 OPTIONS 메서드로 요청을 보내서 서버의 요청 권한 허용 여부를 미리 확인하는 것 입니다.

 

1-4. 꼬리질문 : CORS를 우회하는 방법에 대해 구체적으로 설명해주세요.

Proxy 서버를 사용하여 요청을 중계하고 응답을 수정하는 방법이 있습니다. 예를 들어, A.com에서 B.com의 API를 호출하려고 하는데 CORS 오류가 발생한다면, C.com 이라는 프록시 서버를 만들고, A.com에서는 C.com에 요청을 보내고, C.com에서는 B.com 요청을 보내고, B.com에서 받은 응답에

Access-Control-Allow-Origin: *

'Access-Control-Allow-Origin: *' 라는 헤더를 추가하여 A.com에 전달하는 방식입니다.

 또 JSONP(JSON with Padding)라는 기법을 사용하는 방법이 있습니다. 이는 스크립트 태그의 src 속성을 사용하여 교차 출처 리소스를 불러오는 방법입니다. 스크립트 태그는 CORS 정책의 제약을 받지 않으므로, JSON 데이터를 콜백 함수로 감싸서 전달할 수 있습니다. 예를 들어, A.com에서 B.com의 API를 호출하려고 하는데 CORS 오류가 발생한다면, 다음과 같은 코드를 사용할 수 있습니다.

<script src=“B.com/api?callback=foo”></script>

이때 B.com의 API는

foo({"data": "some data"})

와 같은 형식으로 응답해야 합니다. 그러면 A.com에서 foo라는 함수를 정의하고, 그 함수 안에서 JSON 데이터를 처리할 수 있습니다.

 

1-5. 사전 개념

1-5-1. CORS 의 Origin 의 의미

protocol + hostname + port

origin 의 의미 (출처: https://www.youtube.com/watch?v=j2Q2Ev6CZzQ&t=92s)

1-5-2. 어떤 상황에서 CORS Error 를 만날 수 있는가? 

  : 개발을 하는 중에 포트번호가 다른 서버와 클라이언트 서버 간의 데이터 통신시 발생할 수 있다.

 

1-5-3. SOP (Same Origin Policy)

동일 출처 정책. 악의적 사용자의 하이제킹(Hijacking)을 방지하기 위하여, 같은 Origin 간의 접근 요청 및 데이터만 송수신을 허용한다.

 

1-5-4. localhost

현재 기기의 hostname 으로 127.0.0.1 을 가리킨다.

 

1-5-5. White-List

서버 측에서 접근을 허용하는 클라이언트(origin)

 

1-5-6. Preflight Request

브라우저가 Simple Request 가 아닌 PUT, DELETE 와 같은 요청에 대해 사전에 Preflight request option 메서드로 CORS 인지 여부를 확인하는 요청을 보내게 된다.

 

2. Proxy Server의 기능에 대해 설명하시오.

---

2-1. 30초 답변

 프록시 서버란 클라이언트 서버가 통신하는 과정에서 중간에 끼어서 요청과 응답을 중계하고 수정하는 역할을 하는 컴퓨터 시스템이나 응용 프로그램을 말합니다. 서버와 클라이언트 사이에 중계기로서 대리로 통신을 수행하는 것을 가리켜 Proxy, 그 중계 기능을 하는 것을 Proxy Server 라고 합니다. 프록시 서버는 캐싱, 필터링, 로드 밸런싱, 보안, 익명성 등의 기능을 통해 웹 서비스의 성능을 항샹시키거나, 접근 제한을 설정하거나, 보안을 강화하거나, 사용자의 신원을 숨기는 등의 다양한 목적으로 사용될 수 있습니다.

 

2-2. 상세설명

프록시 서버는 다음과 같은 기능들을 가집니다.

 캐싱(Caching) : *프록시 서버는 자주 요청되는 웹 페이지나 리소스를 캐시에 저장하여, 다음 요청 시에 빠르게 응답할 수 있습니다. 이렇게 하면 네트워크 트래픽과 응답 시간을 줄이고, 원격 서버의 부하를 감소시킬 수 있습니다. 예를 들어, 유닉스 계열에서 대중적으로 사용되는 스퀴드(Squid)*는 웹 캐싱 프록시로 널리 사용됩니다.

 필터링(Filtering) : 프록시 서버는 요청과 응답에 대한 필터링 규칙을 설정하여, 특정 웹 사이트나 콘텐츠에 대한 접근을 허용하거나 차단할 수 있습니다. 이렇게 하면 원치 않는 사이트나 악성 코드를 막고, 인터넷 사용을 제한하거나 모니터링 할 수 있습니다.

 로드 밸런싱(Load Balancing) : 프록시 서버는 여러 개의 웹 서버로부터 요청을 분산하여 처리할 수 있습니다. 이렇게 하면 웹 서비스의 가용성과 확장성을 높일 수 있습니다. 예를 들어, **Nginx**라는 소프트웨어는 로드 밸런싱 프록시로 널리 사용됩니다.

 보안(Securigy) : 프록시 서버는 클라이언트와 서버 사이에 **방화벽** 역할을 하여, 외부로부터의 공격이나 침입을 방지할 수 있습니다. 또한 프록시 서버는 요청과 응답에 대한 암호화나 인증과 같은 보안 기능을 제공할 수 있습니다. 예를 들어, **HTTPS** 프록시는 **SSL/TLS**를 사용하여 통신 내용을 암호화합니다.

 익명성(Anonymity) : 프록시 서버는 클라이언트의 신원 정보를 숨기거나 변경하여, 서버에게 익명으로 요청을 보낼 수 있습니다. 이렇게 하면 클라이언트의 개인 정보나 위치를 보호하거나, 지역 제한을 우회할 수 있습니다. 예를 들어, **토르**(Tor) 네트워크는 여러 개의 프록시 서버를 거쳐서 통신하는 방식으로 익명성을 제공합니다.

보안을 우회하는 용도로 사용되는 Proxy Server 예시 (출처: 위키백과)

 

2-3. 꼬리질문 : 리버스 프록시란 무엇인지 포워드 프록시와 비교하여 설명하여주세요.

 포워드 프록시(Forward Proxy)는 클라이언트가 원하는 웹 서버에 직접 접근하지 않고, 프록시 서버를 통해 간접적으로 데이터를 주고 받는 서버입니다. 포워드 프록시는 보통 방화벽이나 콘텐츠 필터링, 캐싱 등을 위해 사용됩니다. 예를 들어, 포워드 프록시는 특정 사이트에 접근을 제한하거나, 자주 방문하는 사이트의 데이터를 캐시하여 네트워크 트래픽을 줄일 수 있습니다. 포워드 프록시를 사용하려면 클라이언트는 웹 브라우저나 애플리케이션에서 프록시 서버의 주소와 포트를 설정해야 합니다.

 리버스 프록시(Reverse Proxy)는 웹 서버가 클라이언트에 직접 응답하지 않고, 프록시 서버를 통해 간접적으로 데이터를 전달하는 서버입니다. 리버스 프록시는 보통 보안, 성능, 안정성을 향상시키기 위해 사용됩니다. 예를 들어, 리버스 프록시는 원본 서버의 IP 주소를 숨기고 DDoS 공격과 같은 표적 공격을 방어할 수 있습니다. 또한, 리버스 프록시는 콘텐츠를 캐시하거나 부하 분산을 통해 웹 사이트의 로드 시간을 줄일 수 있습니다. 리버스 프록시는 클라이언트가 원본 서버와 직접 통신하지 못하도록 하고, 마치 리버스 프록시 서버 자체에서 제공된 것처럼 응답을 반환합니다.

 

2-4. 꼬리질문 : VPN과 Proxy Server의 차이

 가상 사설망(VPN: Virtual Private Network)은 인터넷 트래픽을 암호화하고 다른 서버를 통해 전송하는 서비스입니다. VPN은 프록시 서버와 마찬가지로 트래픽을 재라우팅하고 사용자의 실제 IP 주소와 위치를 숨김으로써 지역 제한된 콘텐츠에 접근할 수 있습니다. 하지만 프록시 서버와 달리 VPN은 트래픽 암호화를 통해 인터넷 업체나 정부의 감시를 피하고, 해킹 공격을 방지할 수 있습니다. VPN은 네트워크(L3) 또는 전송(L4) 수준에서 데이터의 네트워크 패킷에 대해 작동하여 모든 종류의 트래픽을 처리할 수 있습니다. VPN 에서는 사용자 데이터가 암호화되기 때문에 프록시 서버보다 연결 속도가 느릴 수 있습니다. 반면, 프록시 서버는 응용 프로그램 수준(L7)에서 작동하므로 특정 유형의 요청(HTTP 프록시의 경우 HTTP 요청) 또는 프록시 연결 설정을 한 소프트웨어에 대해서만 트래픽을 재라우팅 할 수 있습니다. 프록시 서버는 트래픽을 암호화하지 않으므로 보안이 취약할 수 있습니다.

Proxy Server 작동방식 예시  (출처: AdGuard VNP)

VPN 작동 방식 예시 (출처: AdGuard VNP)

2-5. 사전 개념

2-5-1. 메모리 계층 구조 (Memory Hierachy)

 메모리를 필요에 따라 여러가지 종류로 나누어 둠을 의미하는 메모리 계층 구조에서는 메모리를 용량, 접근 속도, 비용의 절충 관계를 파악해 순서대로 나열하면 CPU Resisters, Staic RAM (SRAM), Dynmaic RAM (DRAM), Magnetic Disk 순이 된다.

 레지스터와 캐시는 CPU 내부에 존재한다. 당연히 CPU는 아주 빠르게 접근할 수 있다. 메모리는 CPU 외부에 존재한다. 레지스터와 캐시보다 더 느리게 접근할 수 있다. 메모리는 CPU 외부에 존재하며 레지스터와 캐시보다 더 느리게 접근 할 수 밖에 없다. 하드 디스크는 CPU가 접근할 방법조차 없다. CPU가 하드 디스크에 접근하기 위해서는 하드 디스크의 데이터를 메모리로 이동시키고, 메모리에서 접근해야 한다. 접근 속도는 더욱 느려질 수 밖에 없다.

메모리 계층 구조 (Memory Hierachy) (출처: 나무위키)